1 files changed, 32 insertions, 125 deletions

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 8c2daa14..fa62c850 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -67,17 +67,12 @@ 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();
-            }
+            // Display the default document root PI
+            this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
     },
 
@@ -174,8 +169,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.documentRoot);
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
                     this.displayElementProperties(this.application.ninja.selectedElements[0]);
@@ -187,98 +181,23 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
-    displayStageProperties: {
-        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.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);
-
-                    }
-                }
-            }
-            */
-        }
-    },
-
-    handleFirstDraw: {
-        value: function() {
-            this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'});
-        }
-    },
-
     displayElementProperties: {
         value: function (el) {
-            var customPI,
-                currentValue;
+            var customPI, currentValue, isRoot = this.application.ninja.selectionController.isDocument;
 
             this.elementName.value = el.elementModel.selection;
             this.elementId.value = el.getAttribute("id") || "";
             this.elementClass.value = el.getAttribute("class");
 
-            this.positionSize.disablePosition = false;
-            this.threeD.disableTranslation = false;
+            this.positionSize.disablePosition = isRoot;
+            this.threeD.disableTranslation = isRoot;
+            this.threeD.flatten = ElementsMediator.getProperty(el, "-webkit-transform-style") !== "preserve-3d";
 
             this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left"));
             this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top"));
             this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height"));
             this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
-
-            if(ElementsMediator.getProperty(el, "-webkit-transform-style") === "preserve-3d") {
-                this.threeD.flatten = false;
-            } else {
-                this.threeD.flatten = true;
-            }
+//            this.positionSize.widthSize = ElementsMediator.getProperty(el, "width");
 
             if(this.threeD.inGlobalMode)
             {
@@ -306,6 +225,12 @@ exports.Properties = Montage.create(Component, {
                 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");
+            }
+
                         var previousInput = this.application.ninja.colorController.colorModel.input;
             customPI = PiData[this.customPi];
             // Get all the custom section for the custom PI
@@ -317,64 +242,47 @@ exports.Properties = Montage.create(Component, {
 
                         if(control.type !== "color") {
                             currentValue = ElementsMediator.getProperty(el, control.prop, control.valueMutator);
-                            if(currentValue === null)
-                            {
+                            if(currentValue === null) {
                                 currentValue = control.defaultValue;
                             }
                             this.customSections[i].content.controls[control.id] = currentValue;
-                        }
-                        else
-                        {
-                            if(control.prop === "border")
-                            {
+                        } else {
+                            if(control.prop === "border") {
                                 // TODO - For now, always return the top border if multiple border sides
                                 currentValue = ElementsMediator.getColor(el, false, "top");
                                 this.application.ninja.colorController.colorModel.input = "stroke";
-                            }
-                            else if(control.prop === "background")
-                            {
+                            } else if(control.prop === "background") {
                                 currentValue = ElementsMediator.getColor(el, true);
                                 this.application.ninja.colorController.colorModel.input = "fill";
                             }
 
-                            if(currentValue)
-                            {
-                                if(currentValue.color)
-                                {
+                            if(currentValue) {
+                                if(currentValue.color) {
                                     currentValue.color.wasSetByCode = true;
                                     currentValue.color.type = "change";
                                 }
 
-                                if(currentValue.mode === "gradient")
-                                {
-                                    this.application.ninja.colorController.colorModel["gradient"] =
-                                                    {value: currentValue.color, wasSetByCode: true, type: 'change'};
-                                }
-                                else
+                                if(currentValue.mode === "gradient") {
+                                    this.application.ninja.colorController.colorModel["gradient"] = {value: currentValue.color, wasSetByCode: true, type: 'change'};
+                                } else {
+                                    if (currentValue.color.a !== undefined) {
+                                        this.application.ninja.colorController.colorModel.alpha = {value: currentValue.color.a, wasSetByCode: true, type: 'change'};