5 files changed, 107 insertions, 14 deletions

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index f82d3660..0928da3a 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -47,6 +47,11 @@ padding-right:6px;
 
 }
 
+.propertiesPanel button.nj-skinned {
+    margin-left: -12px;
+    margin-top: -3px;
+}
+
 .propertiesPanel hr {
     border: 0;
     border-top: 1px solid #3c3c3c;
diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 40e9b86a..d9dca538 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -87,7 +87,7 @@ exports.Properties = Montage.create(Component, {
                 this.displayStageProperties();
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
-                    this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
+                    this.displayElementProperties(this.application.ninja.selectedElements[0]);
                 } else {
                     this.displayGroupProperties(this.application.ninja.selectedElements);
                 }
@@ -113,14 +113,14 @@ exports.Properties = Montage.create(Component, {
                 }
 
                 if(this.application.ninja.selectedElements.length) {
-                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi");
+//                    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);
                 }
             } else if(event.target.id === "elementClass") {
                 if(this.application.ninja.selectedElements.length) {
-                    ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi");
-                    console.log(this.application.ninja.selectedElements[0]._element.className);
+                    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);
                 }
@@ -138,8 +138,8 @@ exports.Properties = Montage.create(Component, {
 
     handleElementChanging: {
         value: function(event) {
-//            this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left"));
-//            this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top"));
+//            this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "left"));
+//            this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "top"));
         }
     },
 
@@ -147,24 +147,27 @@ 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;
+                if(this.application.ninja.selectedElements.length) {
+                    el = this.application.ninja.selectedElements[0];
+                }
+
                 // TODO - This should only update the properties that were changed.
-                var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0];
                 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(this.threeD.inGlobalMode)
-                {
+                if(this.threeD.inGlobalMode) {
                     this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
                     this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D");
                     this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D");
                     this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle");
                     this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle");
                     this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle");
+                }
             }
         }
-        }
     },
 
     handleSelectionChange: {
@@ -173,7 +176,7 @@ exports.Properties = Montage.create(Component, {
                 this.displayStageProperties();
             } else {
                 if(this.application.ninja.selectedElements.length === 1) {
-                    this.displayElementProperties(this.application.ninja.selectedElements[0]._element);
+                    this.displayElementProperties(this.application.ninja.selectedElements[0]);
                 } else {
                     this.displayGroupProperties(this.application.ninja.selectedElements);
                 }
@@ -196,6 +199,19 @@ exports.Properties = Montage.create(Component, {
             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");
+            }
+
+            if(ElementsMediator.getProperty(stage, "-webkit-transform-style") === "preserve-3d") {
+                this.threeD.flatten = false;
+            } else {
+                this.threeD.flatten = true;
+            }
+
             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;
@@ -260,6 +276,11 @@ exports.Properties = Montage.create(Component, {
             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;
+            }
 
             if(this.threeD.inGlobalMode)
             {
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index ac316907..876fe110 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -15,6 +15,7 @@ var ColorSelect = require("js/panels/properties.reel/sections/custom-rows/color-
 
 // Components Needed to make this work
 var Hottext = require("js/components/hottextunit.reel").HotTextUnit;
+var HT = require("js/components/hottext.reel").HotText;
 var Dropdown = require("js/components/combobox.reel").Combobox;
 var TextField = require("js/components/textfield.reel").TextField;
 var FileInput = require("js/components/ui/file-input.reel").FileInput;
@@ -168,6 +169,7 @@ exports.CustomSection = Montage.create(Component, {
         value: function(fields) {
             switch(fields.type) {
                 case "hottext"  : return this.createHottext(fields);
+                case "ht"  : return this.createHT(fields);
                 case "dropdown" : return this.createDropdown(fields);
                 case "textbox"  : return this.createTextField(fields);
                 case "file"     : return this.createFileInput(fields);
@@ -178,6 +180,33 @@ exports.CustomSection = Montage.create(Component, {
         }
     },
 
+    createHT: {
+        value: function(aField) {
+
+            // Generate Hottext
+            var obj = HT.create();
+
+            // Set Values for HottextRow
+            if (aField.id)          obj.id = aField.id;
+            if (aField.value)       obj.value = aField.value;
+            if (aField.min)         obj._minValue = aField.min;
+            if (aField.max)         obj._maxValue = aField.max;
+            if (aField.prop)        obj.prop = aField.prop;
+
+            //Initiate onChange Events
+            obj.addEventListener("change", this, false);
+            obj.addEventListener("changing", this, false);
+
+            //Bind object value to controls list so it can be manipulated
+            Object.defineBinding(this.controls, aField.id, {