7 files changed, 44 insertions, 49 deletions

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.element.classList.add("nj-skinned");
+                    this.content2.label = this.label2;
                     this.element.getElementsByClassName("lbl")[1].style.display = "none";
                 } else {
                     this.element.getElementsByClassName("lbl")[1].innerHTML = this.label2 + ":";
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 876fe110..ae408f11 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -19,7 +19,7 @@ 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;
-var Checkbox = require("js/components/checkbox.reel").Checkbox;
+var LabelCheckbox = require("js/components/ui/label-checkbox.reel").LabelCheckbox;
 var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
 var Button = require("montage/ui/button.reel").Button;
 
@@ -77,7 +77,7 @@ exports.CustomSection = Montage.create(Component, {
                     this.rows.push(tmpRow);
 
                 } else if(this._fields[i].length === 3) {
-                    
+
                 }
 
             }
@@ -103,7 +103,7 @@ exports.CustomSection = Montage.create(Component, {
     handleChange: {
                 value:function(event) {
             if(event._event.wasSetByCode) return;
-            
+
             var obj = event.currentTarget;
             this._dispatchPropEvent({"type": "change", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
                 }
@@ -116,7 +116,7 @@ exports.CustomSection = Montage.create(Component, {
         value: function(event) {
             // Change the stage color for now
             //console.log(this, event);
-            ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
+            ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
             /*
             var propEvent = document.createEvent("CustomEvent");
             propEvent.initEvent("propertyChange", true, true);
@@ -262,10 +262,10 @@ exports.CustomSection = Montage.create(Component, {
                 if(aField.enabled.boundObject) {
                     // TODO - For now, always bind to this.controls[someProperty]
                     Object.defineBinding(obj, "enabled", {
-                                    boundObject: this.controls,
-                                    boundObjectPropertyPath: aField.enabled.boundProperty,
-                                    oneway: false
-                                });
+                        boundObject: this.controls,
+                        boundObjectPropertyPath: aField.enabled.boundProperty,
+                        oneway: false
+                    });
                 } else {
                     obj.enabled = aField.enabled;
                 }
@@ -349,7 +349,7 @@ exports.CustomSection = Montage.create(Component, {
         value: function(aField) {
 
             // Generate Textfield
-            var obj = Checkbox.create();
+            var obj = LabelCheckbox.create();
 
             // Set Values for TextField
             if (aField.id)          obj.id = aField.id;
@@ -400,7 +400,7 @@ exports.CustomSection = Montage.create(Component, {
             this.controls[aField.id] = obj;
 
             // TODO - Hack for now to reference the color select object to unregister color chips
-            this.controls["stageBackground"] = obj;
+            this.controls["background"] = obj;
 
             return obj;
         }
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-size.reel/position-size.css
index 7f8fdbc2..7f8fdbc2 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.css
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html
index a7aac84e..5d1a805a 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html
@@ -6,11 +6,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> -->
 <html lang="en">
 <head>
-    <link rel="stylesheet" href="position-and-size.css" type="text/css">
+    <link rel="stylesheet" href="position-size.css" type="text/css">
     <script type="text/montage-serialization">
     {
         "owner": {
-            "prototype" : "js/panels/properties.reel/sections/position-and-size.reel[PosSize]",
+            "prototype" : "js/panels/properties.reel/sections/position-size.reel",
             "properties" : {
                 "element" :         {"#": "section"},
                 "position":         {"#": "position"},
@@ -23,6 +23,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "bindButton":       {"@": "bindButton"}
             }
         },
+
         "PosX": {
             "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             "properties": {
@@ -31,11 +32,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "minValue": -10000
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "leftPosition",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.leftPosition"}
             }
         },
         "PosY": {
@@ -46,38 +43,31 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "minValue": -10000
             },
             "bindings": {