1 files changed, 61 insertions, 143 deletions

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 8c2daa14..84b0d589 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();
         }
     },
 
@@ -102,13 +89,13 @@ exports.Properties = Montage.create(Component, {
     handleBlur: {
         value: function(event) {
 
-            if(event.target.id === "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");
                 }
@@ -117,13 +104,13 @@ exports.Properties = Montage.create(Component, {
 //                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
                     ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, this.application.ninja.selectedElements[0].id, "pi");
                 } else {
-                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id);
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.model.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.model.documentRoot.elementModel.id);
                 }
-            } else if(event.target.id === "elementClass") {
+            } else if(event.target === this.elementClass.element) {
                 if(this.application.ninja.selectedElements.length) {
                     ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi");
                 } else {
-                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass);
+                    ElementsMediator.setAttribute(this.application.ninja.currentDocument.model.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.model.documentRoot.elementModel.elementClass);
                 }
             }
         }
@@ -148,7 +135,7 @@ exports.Properties = Montage.create(Component, {
         value: function(event) {
 //            console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update
             if(event.detail.source && event.detail.source !== "pi") {
-                var el = this.application.ninja.currentDocument.documentRoot;
+                var el = this.application.ninja.currentDocument.model.documentRoot;
                 if(this.application.ninja.selectedElements.length) {
                     el = this.application.ninja.selectedElements[0];
                 }
@@ -174,8 +161,7 @@ exports.Properties = Montage.create(Component, {
     handleSelectionChange: {
         value: function(event) {
             if(event.detail.isDocument) {
-                if(this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() === "body") return;
-                this.displayStageProperties();
+                this.displayElementProperties(this.application.ninja.currentDocument.model.documentRoot);
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
                     this.displayElementProperties(this.application.ninja.selectedElements[0]);
@@ -187,98 +173,33 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
-    displayStageProperties: {
+    clear: {
         value: function() {
-            var stage = this.application.ninja.currentDocument.documentRoot;
-            //this is test code please remove
-            this.elementName.value = "Stage";
-            this.elementId.value = stage.elementModel.id;
+            this.elementName.value = "";
+            this.elementId.value = "";
             this.elementClass.value = "";
-
-            this.positionSize.disablePosition = true;
-            this.threeD.disableTranslation = true;
-
-            this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(stage, "height"));
-            this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(stage, "width"));
-
-            if(this.threeD.inGlobalMode)
-            {
-                this.threeD.xAngle = ElementsMediator.get3DProperty(stage, "xAngle");
-                this.threeD.yAngle = ElementsMediator.get3DProperty(stage, "yAngle");
-                this.threeD.zAngle = ElementsMediator.get3DProperty(stage, "zAngle");
-            }
-
-            this.threeD.flatten = ElementsMediator.getProperty(stage, "-webkit-transform-style") !== "preserve-3d";
-
-            if(this.customPi !== stage.elementModel.pi) {
-                // We need to unregister color chips from the previous selection from the Color Model
-                var len = this.customSections.length;
-                for(var n = 0, controls; n < len; n++) {
-                    controls = this.customSections[n].content.controls;
-                    if(controls["colorSelect"]) {
-                        controls["colorSelect"].destroy();
-                    } else if(controls["stageBackground"]) {
-                        controls["stageBackground"].destroy();
-                    }
-                }
-
-                this.customPi = stage.elementModel.pi;
-                this.displayCustomProperties(stage, stage.elementModel.pi);
-            }
-
-            // For now hardcode the background since it is the only custom property
-            // No need to loop through all the properties.
-            var backgroundChip = this.customSections[0].content.controls["background"];
-            backgroundChip.color = ElementsMediator.getProperty(stage, "background");
-
-            /*
-            var customPI = PiData[this.customPi];
-            // Get all the custom section for the custom PI
-            for(var i = 0, customSec; customSec = customPI[i]; i++) {
-
-                // Now set the Fields for the custom PI
-                for(var j = 0, fields; fields = customSec.Section[j]; j++) {
-                    for(var k = 0, control; control = fields[k]; k++) {
-
-                        var colorChipEl = this.customSections[i].content.controls[control.id];
-                        this.foo = colorChipEl;
-                        colorChipEl.addEventListener("firstDraw", this, false);
-
+            this.customPi = null;
+            this.customSections = [];