6 files changed, 214 insertions, 31 deletions

diff --git a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js
index b606d6b8..a11cd3f6 100755
--- a/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js
+++ b/js/panels/properties.reel/sections/custom-rows/single-row.reel/single-row.js
@@ -8,6 +8,10 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 
 exports.SingleRow = Montage.create(Component, {
+    slot: {
+        value: null
+    },
+
     id: {
         value: null
     },
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 9df16112..08434b01 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -116,7 +116,11 @@ exports.CustomSection = Montage.create(Component, {
         value: function(event) {
             // Change the stage color for now
             //console.log(this, event);
-            ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
+            if (event._event.color && event._event.color.css) {
+                ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
+            } else {
+                    ElementsMediator.setProperty([this.application.ninja.currentDocument.model.documentRoot], this.id, ['none'], "Change", "pi", '');
+            }
             /*
             var propEvent = document.createEvent("CustomEvent");
             propEvent.initEvent("propertyChange", true, true);
@@ -233,6 +237,12 @@ exports.CustomSection = Montage.create(Component, {
               boundObjectPropertyPath: "value"
             });
 
+            //Bind object value to controls list so it can be manipulated
+            Object.defineBinding(this.controls, aField.id + "Units", {
+              boundObject: obj,
+              boundObjectPropertyPath: "units"
+            });
+
             return obj;
         }
     },
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.html b/js/panels/properties.reel/sections/position-size.reel/position-size.html
index 5d1a805a..d322f826 100755
--- a/js/panels/properties.reel/sections/position-size.reel/position-size.html
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html
@@ -29,10 +29,13 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": {"#": "PosX"},
                 "maxValue": 10000,
-                "minValue": -10000
+                "minValue": -10000,
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
-                "value": {"<<->": "@owner.leftPosition"}
+                "units": {"<->": "@owner.leftUnits"},
+                "value": {"<->": "@owner.leftPosition"}
             }
         },
         "PosY": {
@@ -40,20 +43,26 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": {"#": "PosY"},
                 "maxValue": 10000,
-                "minValue": -10000
+                "minValue": -10000,
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
-                "value": {"<<->": "@owner.topPosition"}
+                "units": {"<->": "@owner.topUnits"},
+                "value": {"<->": "@owner.topPosition"}
             }
         },
 
         "PosH": {
             "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             "properties": {
-                "element": {"#": "PosH"}
+                "element": {"#": "PosH"},
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
-                "value": {"<<->": "@owner.heightSize"}
+                "units": {"<->": "@owner.heightUnits"},
+                "value": {"<->": "@owner.heightSize"}
             }
         },
 
@@ -65,7 +74,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "units": "px"
             },
             "bindings": {
-                "value": {"<<->": "@owner.widthSize"}
+                "units": {"<->": "@owner.widthUnits"},
+                "value": {"<->": "@owner.widthSize"}
             }
 
         },
@@ -74,7 +84,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             "properties": {
                 "element": {"#": "posBound"},
                 "pressedClass": "lockUp",
-                "preventFocus": true,
                 "identifier": "ratio"
             }
         }
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.js b/js/panels/properties.reel/sections/position-size.reel/position-size.js
index 7c24e02a..94c0bbf2 100755
--- a/js/panels/properties.reel/sections/position-size.reel/position-size.js
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.js
@@ -8,21 +8,78 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 
 exports.PositionSize = Montage.create(Component, {
+
+    position: {
+        value: null,
+        serializable: true
+    },
+
+    leftLabel: {
+        value: null,
+        serializable: true
+    },
+
+    leftControl: {
+        value: null,
+        serializable: true
+    },
+
+    topLabel: {
+        value: null,
+        serializable: true
+    },
+
+    topControl: {
+        value: null,
+        serializable: true
+    },
+
+    heightControl: {
+        value: null,
+        serializable: true
+    },
+
+    widthControl: {
+        value: null,
+        serializable: true
+    },
+
+    bindButton: {
+        value: null,
+        serializable: true
+    },
+
     leftPosition: {
         value: 0
     },
 
+    leftUnits: {
+        value: "px"
+    },
+
     topPosition: {
         value: 0
     },
 
+    topUnits: {