5 files changed, 67 insertions, 32 deletions

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index 5306eb5b..84f52ed4 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -285,6 +285,7 @@ padding-right:6px;
 .propertiesPanel input[type='radio'].nj-skinned {
     text-indent: 0px;
     line-height: 5px;
+    margin: -4px 0 0 0;
 }
 
 .propertiesPanel input[type='radio'].nj-skinned label {
@@ -303,4 +304,34 @@ input label {
 .propertiesPanel .rotation .fieldRow {
     -webkit-box-flex:0;
     width:45px;
+}
+
+.propertiesPanel div.montage-button:disabled {
+    opacity: 0.4;
+}
+
+.propertiesPanel div.montage-button {
+    font-size: 9px;
+    cursor: pointer;
+    display: block;
+    margin: -3px 0 0 -12px;
+    padding: 4px;
+    border: 1px #313131 solid;
+    background-color: #474747;
+    background-image: -webkit-linear-gradient(top, #505050 0%, #3c3c3c 100%);
+    border-radius: 4px;
+    color: white;
+    text-transform: uppercase;
+    cursor: pointer;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
+    width: 18px;
+    height: 14px;
+}
+
+.propertiesPanel div.montage-button:active {
+    background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #505050 100%);
+}
+
+.propertiesPanel div.montage-button:hover {
+    -webkit-box-shadow: 0px 0px 3px #b4b4b4;
 }
\ No newline at end of file
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index fa62c850..b292a66a 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -46,17 +46,15 @@ exports.Properties = Montage.create(Component, {
 
     prepareForDraw: {
         value : function() {
-
+            this.eventManager.addEventListener("openDocument", this, false);
             this.eventManager.addEventListener("selectionChange", this, false);
+            this.eventManager.addEventListener("closeDocument", this, false);
 
             // This will be a toggle option
             if(this.application.ninja.appData.PILiveUpdate) {
                 this.eventManager.addEventListener( "elementChanging", this, false);
             }
 
-            this.eventManager.addEventListener("openDocument", this, false);
-            this.eventManager.addEventListener("switchDocument", this, false);
-
             this.elementId.element.addEventListener("blur", this, false);
             this.elementId.element.addEventListener("focus", this, false);
             this.elementId.element.addEventListener("keyup", this, false);
@@ -71,23 +69,17 @@ exports.Properties = Montage.create(Component, {
         value: function() {
             this.eventManager.addEventListener( "elementChange", this, false);
 
+            // Save a reference of the pi inside the document view to be able to clear
+            this.application.ninja.currentDocument.model.views.design.propertiesPanel = this;
+
             // Display the default document root PI
             this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
     },
 
-    handleSwitchDocument: {
+    handleCloseDocument: {
         value: function(){
-            // For now always assume that the stage is selected by default
-            if(this.application.ninja.selectedElements.length === 0) {
-                this.displayStageProperties();
-            } else {
-                if(this.application.ninja.selectedElements.length === 1) {
-                    this.displayElementProperties(this.application.ninja.selectedElements[0]);
-                } else {
-                    this.displayGroupProperties(this.application.ninja.selectedElements);
-                }
-            }
+            this.clear();
         }
     },
 
@@ -181,6 +173,16 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
+    clear: {
+        value: function() {
+            this.elementName.value = "";
+            this.elementId.value = "";
+            this.elementClass.value = "";
+            this.customPi = null;
+            this.customSections = [];
+        }
+    },
+
     displayElementProperties: {
         value: function (el) {
             var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument;
@@ -217,20 +219,29 @@ exports.Properties = Montage.create(Component, {
                     controls = this.customSections[n].content.controls;
                     if(controls["colorSelect"]) {
                         controls["colorSelect"].destroy();
-                    } else if(controls["stageBackground"]) {
-                        controls["stageBackground"].destroy();
+                    } else if(controls["background"]) {
+                        controls["background"].destroy();
                     }
                 }
 
                 this.customPi = el.elementModel.pi;
                 this.displayCustomProperties(el, el.elementModel.pi);
-            }
 
-            if(isRoot) {
-                var backgroundChip = this.customSections[0].content.controls["background"];
-                if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background");
+                // Root element color chip
+                if(isRoot) {
+                    var backgroundChip = this.customSections[0].content.controls["background"];
+                    var rootBackgroundColor = ElementsMediator.getProperty(el, "background");
+
+                    if(rootBackgroundColor) {
+                        backgroundChip.color = rootBackgroundColor;
+                    } else {
+                        backgroundChip.color = null;
+                    }
+                }
             }
 
+
+
                         var previousInput = this.application.ninja.colorController.colorModel.input;
             customPI = PiData[this.customPi];
             // Get all the custom section for the custom PI
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
index bdcbff7f..c3af0668 100755
--- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.html
@@ -22,10 +22,7 @@
                 "element": { "#": "slotElement" }
             },
             "bindings": {
-                "content" : {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "content"
-                }
+                "content": {"<-": "@owner.content"}
             }
         },
         "slot2": {
@@ -34,10 +31,7 @@
                 "element": { "#": "slotElement2" }
             },
             "bindings": {
-                "content" : {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "content2"
-                }
+                "content": {"<-": "@owner.content2"}
             }
         }
     }
diff --git a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
index 4c5c80d7..2f81aa2e 100755
--- a/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
+++ b/js/panels/properties.reel/sections/custom-rows/dual-row.reel/dual-row.js
@@ -44,8 +44,7 @@ exports.DualRow = Montage.create(Component, {
             }
             if(this.label2 !== null) {
                 if(this.content2.type === "button") {
-                    this.content2.element = document.createElement("button");
+                    this.content2.label = this.label2;