10 files changed, 148 insertions, 200 deletions

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index eee44561..84f52ed4 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -271,20 +271,21 @@ padding-right:6px;
     content: "•";
 }
 
-.propertiesPanel input.nj-skinned label {
+.propertiesPanel .checkbox-label {
     position: absolute;
-    top: 0;
-    left: 15px;
+    top: 4px;
+    padding-left: 5px;
+    /*left: 15px;*/
     font-size: 10px;
     width:55px;
     text-align: left;
     font-weight: normal;
     color:#FFF;
 }
-
 .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.html b/js/panels/properties.reel/properties.html
index 3a1ae880..ac0dab5a 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -38,13 +38,15 @@
                 "prototype": "js/panels/properties.reel/section.reel",
                 "properties": {
                     "element": {"#": "PosSize"},
-                    "content" : {"@": "PosSize"},
+                    "content" : {"@": "positionSize"},
                     "name" : "Position And Size"
                 }
             },
-            "PosSize": {
-                "prototype": "js/panels/properties.reel/sections/position-and-size.reel[PosSize]"
+
+            "positionSize": {
+                "prototype": "js/panels/properties.reel/sections/position-size.reel"
             },
+
             "threeDSection": {
                 "prototype": "js/panels/properties.reel/section.reel",
                 "properties": {
@@ -97,7 +99,7 @@
                     "elementName":          {"@": "elementName"},
                     "elementClass":         {"@": "elementClass"},
                     "elementId":            {"@": "elementId"},
-                    "positionSize":         {"@": "PosSize"},
+                    "positionSize":         {"@": "positionSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
             }
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 9af9253b..7f8197ea 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);
@@ -67,32 +65,21 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
-    // Document is opened - Display the current selection
     handleOpenDocument: {
         value: function() {
-
             this.eventManager.addEventListener( "elementChange", this, false);
 
-            // For now always assume that the stage is selected by default when opening the old template
-            // TODO: Remove marker for old template: NINJA-STAGE-REWORK
-            if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") {
-                this.displayStageProperties();
-            }
+            // 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.model.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();
         }
     },
 
@@ -101,12 +88,14 @@ exports.Properties = Montage.create(Component, {
      */
     handleBlur: {
         value: function(event) {
-            if(event.target.dataset.montageId === "elementId") {
+
+            if(event.target === this.elementId.element) {
+
                 // Remove all white spaces from the id
                 this.elementId.value = this.elementId.value.replace(/\s/g, '');
 
                 // Check if that id is in use
-                if(this.application.ninja.currentDocument._document.getElementById(this.elementId.value) !== null) {
+                if(this.application.ninja.currentDocument.model.views.design.document.getElementById(this.elementId.value) !== null) {
                     // TODO: Replace with Ninja Alert
                     alert("The following ID: " + this.elementId.value + " is already in use");
                 }
@@ -115,13 +104,13 @@ exports.Properties = Montage.create(Component, {