From e7293b28c53b23e64044c29e8451cbf3fc0bd049 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 10 May 2012 22:25:26 -0700
Subject: Partially fixing the body pi and fixing the selection controller

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 8c2daa14..6f43ce03 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -78,6 +78,7 @@ exports.Properties = Montage.create(Component, {
             if(this.application.ninja.selectedElements.length === 0 && this.application.ninja.currentDocument.documentRoot.nodeName.toLowerCase() !== "body") {
                 this.displayStageProperties();
             }
+            this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
     },
 
@@ -174,8 +175,9 @@ 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();
+//                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]);
-- 
cgit v1.2.3


From ec886fe3c46f6e3e54fe4e1df769dabed5588063 Mon Sep 17 00:00:00 2001
From: John Mayhew
Date: Fri, 11 May 2012 11:34:06 -0700
Subject: fixed bug introduced when we removed the color toolbar. The styling
 of the color chips in the PI was broken due to a reliance on a css class from
 the colortoolbar reel. The requried class was copied to the properties.css
 file as a temporary fix.

---
 js/panels/properties.reel/properties.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index 0928da3a..eee44561 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -4,6 +4,21 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
+/* Cleanup TODO - now that we removed the color toolbar from the tools panel, we no longer load the colortoolbar reel.
+                  Currently the color chips in the property inspector rely on the colortoolbar button style so we
+                  copied the class here. When we do the color feature cleanup we should remove this dependency.
+*/
+.colortoolbar button {
+  float: left;
+  clear: both;
+  width: 27px;
+  height: 27px;
+  background: black;
+  border: 1px solid #000;
+  padding: 0;
+  margin: 0px;
+}
+
 .propertiesPanel {
     color:#FFF;
     overflow-x: hidden;
-- 
cgit v1.2.3


From c87e538fdc337639bc4d54bb087dbf2b4f20297f Mon Sep 17 00:00:00 2001
From: Jose Antonio Marquez
Date: Fri, 11 May 2012 14:41:20 -0700
Subject: Adding support for new templates

This is supported for NEW and OPEN, SAVE is not supported yet by I/O. Saving works, but it will not be a banner template.
---
 js/panels/properties.reel/properties.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 6f43ce03..20f670d9 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -75,9 +75,7 @@ exports.Properties = Montage.create(Component, {
 
             // 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();
-            }
+           
             this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
     },
-- 
cgit v1.2.3


From 8f8eb57f4506987942745c3325492e939ed3caa8 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 14 May 2012 17:27:32 -0700
Subject: fixing the body pi

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.js            | 155 +++++----------------
 .../position-and-size.reel/position-and-size.html  |  30 ++--
 .../position-and-size.reel/position-and-size.js    |  12 ++
 3 files changed, 52 insertions(+), 145 deletions(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 20f670d9..837e74bc 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -67,15 +67,11 @@ 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
-           
+            // Display the default document root PI
             this.displayElementProperties(this.application.ninja.currentDocument.documentRoot);
         }
     },
@@ -156,7 +152,7 @@ exports.Properties = Montage.create(Component, {
                 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"));
+                this.positionSize.widthSize = ElementsMediator.getProperty(el, "width");
 
                 if(this.threeD.inGlobalMode) {
                     this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
@@ -173,8 +169,6 @@ 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) {
@@ -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"];
+                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.color.a !== undefined)
-                                    {
-                                        this.application.ninja.colorController.colorModel.alpha =
-                                                        {value: currentValue.color.a, wasSetByCode: true, type: 'change'};
+                                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'};
                                     }
-                                    if(currentValue.color.mode)
-                                    {
+
+                                    if(currentValue.color.mode) {
                                         this.application.ninja.colorController.colorModel[currentValue.color.mode] = currentValue.color;
-                                    }
-                                    else
-                                    {
+                                    } else {
                                         this.application.ninja.colorController.colorModel["rgb"] = currentValue.color;
                                     }
                                 }
-                            }
-                            else
-                            {
+                            } else {
                                 this.application.ninja.colorController.colorModel.alpha = {value: 1, wasSetByCode: true, type: 'change'};
                                 this.application.ninja.colorController.colorModel.applyNoColor();
                             }
                         }
                     }
                 }
+
                 this.application.ninja.colorController.colorModel.input =  previousInput;
                 var color = this.application.ninja.colorController.colorModel.colorHistory[previousInput][this.application.ninja.colorController.colorModel.colorHistory[previousInput].length-1];
     			color.c.wasSetByCode = true;
@@ -409,6 +317,8 @@ exports.Properties = Montage.create(Component, {
     displayGroupProperties: {
         value: function (els) {
             this.elementName.value = "Multiple Elements";
+            this.elementId.value = "";
+            this.elementClass.value = "";
         }
     },
 
@@ -457,10 +367,7 @@ exports.Properties = Montage.create(Component, {
         value: function(e) {
             if(e.wasSetByCode) return;
 
-//            ElementsMediator.setProperty(this.application.ninja.selectedElements, "border-style", [this.customSections[0].content.controls.borderStyle], "Changing", "pi");
             ElementsMediator.setProperty(this.application.ninja.selectedElements, e.prop, [e.value + "px"], "Changing", "pi");
-
-
         }
     }
 
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
index a7aac84e..75cb2944 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
@@ -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,11 +43,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "minValue": -10000
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "topPosition",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.topPosition"}
             }
         },
         "PosH": {
@@ -59,25 +52,20 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "element": {"#": "PosH"}
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "heightSize",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.heightSize"}
             }
         },
         "PosW": {
             "prototype": "js/components/hottextunit.reel[HotTextUnit]",
             "properties": {
-                "element": {"#": "PosW"}
+                "element": {"#": "PosW"},
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
             },
             "bindings": {
-                "value": {
-                    "boundObject": {"@": "owner"},
-                    "boundObjectPropertyPath": "widthSize",
-                    "oneway": false
-                }
+                "value": {"<<->": "@owner.widthSize"}
             }
+
         },
         "bindButton": {
             "prototype": "montage/ui/toggle-button.reel",
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
index 1e47916f..8842558b 100755
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
+++ b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
@@ -23,7 +23,19 @@ exports.PosSize = Montage.create(Component, {
     widthSize: {
         value: 0
     },
+/*
+    widthSize: {
+        get: function() { return this._widthSize;},
+        set: function(value) {
+            this._widthSize = parseInt(value);
+            this.widthUnit = value;
+        }
+    },
 
+    widthUnit: {
+        value: "px"
+    },
+*/
     savedPosition: {
         value: null
     },
-- 
cgit v1.2.3


From 5df0e78f2eced2fd04a531652f61c42261d97636 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Mon, 14 May 2012 17:29:57 -0700
Subject: reverting a pi width change

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 837e74bc..3ec48687 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -152,7 +152,7 @@ exports.Properties = Montage.create(Component, {
                 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 = ElementsMediator.getProperty(el, "width");
+                this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width"));
 
                 if(this.threeD.inGlobalMode) {
                     this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D");
-- 
cgit v1.2.3


From 3be58f9391cc2ef7f1d27ec69c98ea600cb93a22 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Tue, 15 May 2012 16:00:49 -0700
Subject: renaming the position and size component

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.html          |  10 +-
 .../position-and-size.reel/position-and-size.css   |  40 ---
 .../position-and-size.reel/position-and-size.html  | 124 ---------
 .../position-and-size.reel/position-and-size.js    | 276 ---------------------
 .../sections/position-size.reel/position-size.css  |  40 +++
 .../sections/position-size.reel/position-size.html | 126 ++++++++++
 .../sections/position-size.reel/position-size.js   | 276 +++++++++++++++++++++
 7 files changed, 448 insertions(+), 444 deletions(-)
 delete mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
 delete mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
 delete mode 100755 js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
 create mode 100755 js/panels/properties.reel/sections/position-size.reel/position-size.css
 create mode 100755 js/panels/properties.reel/sections/position-size.reel/position-size.html
 create mode 100755 js/panels/properties.reel/sections/position-size.reel/position-size.js

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.html b/js/panels/properties.reel/properties.html
index 3a1ae880..ac0dab5a 100755
--- a/js/panels/properties.reel/properties.html
+++ b/js/panels/properties.reel/properties.html
@@ -38,13 +38,15 @@
                 "prototype": "js/panels/properties.reel/section.reel",
                 "properties": {
                     "element": {"#": "PosSize"},
-                    "content" : {"@": "PosSize"},
+                    "content" : {"@": "positionSize"},
                     "name" : "Position And Size"
                 }
             },
-            "PosSize": {
-                "prototype": "js/panels/properties.reel/sections/position-and-size.reel[PosSize]"
+
+            "positionSize": {
+                "prototype": "js/panels/properties.reel/sections/position-size.reel"
             },
+
             "threeDSection": {
                 "prototype": "js/panels/properties.reel/section.reel",
                 "properties": {
@@ -97,7 +99,7 @@
                     "elementName":          {"@": "elementName"},
                     "elementClass":         {"@": "elementClass"},
                     "elementId":            {"@": "elementId"},
-                    "positionSize":         {"@": "PosSize"},
+                    "positionSize":         {"@": "positionSize"},
                     "threeD":               {"@": "threeDProperties"}
                 }
             }
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
deleted file mode 100755
index 7f8fdbc2..00000000
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-
-.fieldCol .hide {
-    display: none;
-}
-
-.fieldCol .disabled {
-    color:#999999;
-}
-
-
-#posBound {
-    position: absolute;
-    left: 105px;
-    border: none;
-    background-color: transparent;
-    top: 2px;
-    opacity: 0.7;
-    width: 17px;
-    height: 18px;
-    margin-right: 10px;
-}
-
-#posBound:hover {
-    opacity: 1;
-}
-
-.unlock{
-    background: url("../../../../../images/optionsbar/unlinked.png") no-repeat;
-
-}
-
-.lockUp {
-    background: url("../../../../../images/optionsbar/link.png") no-repeat;
-}
-
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
deleted file mode 100755
index 75cb2944..00000000
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<!-- <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> -->
-<html lang="en">
-<head>
-    <link rel="stylesheet" href="position-and-size.css" type="text/css">
-    <script type="text/montage-serialization">
-    {
-        "owner": {
-            "prototype" : "js/panels/properties.reel/sections/position-and-size.reel[PosSize]",
-            "properties" : {
-                "element" :         {"#": "section"},
-                "position":         {"#": "position"},
-                "leftLabel":        {"#": "labelX"},
-                "leftControl":      {"@": "PosX"},
-                "topLabel":         {"#": "labelY"},
-                "topControl":       {"@": "PosY"},
-                "heightControl":    {"@": "PosH"},
-                "widthControl":     {"@": "PosW"},
-                "bindButton":       {"@": "bindButton"}
-            }
-        },
-
-        "PosX": {
-            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-            "properties": {
-                "element": {"#": "PosX"},
-                "maxValue": 10000,
-                "minValue": -10000
-            },
-            "bindings": {
-                "value": {"<<->": "@owner.leftPosition"}
-            }
-        },
-        "PosY": {
-            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-            "properties": {
-                "element": {"#": "PosY"},
-                "maxValue": 10000,
-                "minValue": -10000
-            },
-            "bindings": {
-                "value": {"<<->": "@owner.topPosition"}
-            }
-        },
-        "PosH": {
-            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-            "properties": {
-                "element": {"#": "PosH"}
-            },
-            "bindings": {
-                "value": {"<<->": "@owner.heightSize"}
-            }
-        },
-        "PosW": {
-            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
-            "properties": {
-                "element": {"#": "PosW"},
-                "acceptableUnits" : ["px", "%"],
-                "units": "px"
-            },
-            "bindings": {
-                "value": {"<<->": "@owner.widthSize"}
-            }
-
-        },
-        "bindButton": {
-            "prototype": "montage/ui/toggle-button.reel",
-            "properties": {
-                "element": {"#": "posBound"},
-                "pressedClass": "lockUp",
-                "preventFocus": true,
-                "identifier": "ratio"
-            }
-        }
-    }
-    </script>
-</head>
-<body>
-    <div data-montage-id="section" class="sectional">
-        <section data-montage-id="position" class="fieldCol">
-            <label data-montage-id="labelX">Left:</label>
-            <article class="fieldRow twoCol">
-                <div>
-                    <div class="inputField">
-                        <div data-montage-id="PosX"></div>
-                    </div>
-                </div>
-                <div>
-                    <div>
-                        <label data-montage-id="labelY">Top:</label>
-                    </div>
-                    <div class="inputField">
-                        <div data-montage-id="PosY"></div>
-                    </div>
-                </div>
-            </article>
-       </section>
-        <hr />
-        <section class="fieldCol">
-            <button data-montage-id="posBound" id="posBound" class="unlock"></button>
-            <label>Width:</label>
-            <article class="fieldRow twoCol">
-                <div>
-                    <div class="inputField">
-                        <div data-montage-id="PosW"></div>
-                    </div>
-                </div>
-                <div>
-                    <div>
-                        <label>Height:</label>
-                    </div>
-                    <div class="inputField">
-                        <div data-montage-id="PosH"></div>
-                    </div>
-                </div>
-            </article>
-       </section>
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js b/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
deleted file mode 100755
index 8842558b..00000000
--- a/js/panels/properties.reel/sections/position-and-size.reel/position-and-size.js
+++ /dev/null
@@ -1,276 +0,0 @@
-/* <copyright>
-This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
-(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
-</copyright> */
-
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-
-exports.PosSize = Montage.create(Component, {
-    leftPosition: {
-        value: 0
-    },
-
-    topPosition: {
-        value: 0
-    },
-
-    heightSize: {
-        value: 0
-    },
-
-    widthSize: {
-        value: 0
-    },
-/*
-    widthSize: {
-        get: function() { return this._widthSize;},
-        set: function(value) {
-            this._widthSize = parseInt(value);
-            this.widthUnit = value;
-        }
-    },
-
-    widthUnit: {
-        value: "px"
-    },
-*/
-    savedPosition: {
-        value: null
-    },
-
-    aspectRatioWidth: {
-        value: null
-    },
-
-    aspectRatioHeight: {
-        value: null
-    },
-
-    _disablePosition: {
-        value: true
-    },
-
-    disablePosition: {
-        get: function () {
-            return this._disablePosition;
-        },
-        set: function (value) {
-            if(value !== this._disablePosition) {
-                this._disablePosition  = value;
-                this.needsDraw = true;
-            }
-        }
-    },
-
-    prepareForDraw: {
-        value: function() {
-            this.leftControl.identifier = "left";
-            this.leftControl.addEventListener("change", this, false);
-            this.leftControl.addEventListener("changing", this, false);
-
-            this.topControl.identifier = "top";
-            this.topControl.addEventListener("change", this, false);
-            this.topControl.addEventListener("changing", this, false);
-
-            this.heightControl.identifier = "height";
-            this.heightControl.addEventListener("change", this, false);
-            this.heightControl.addEventListener("changing", this, false);
-
-            this.widthControl.identifier = "width";
-            this.widthControl.addEventListener("change", this, false);
-            this.widthControl.addEventListener("changing", this, false);
-
-            this.bindButton.identifier = "ratio";
-            this.bindButton.addEventListener("action", this, false);
-
-        }
-    },
-
-    draw: {
-        value: function() {
-            if(this._disablePosition) {
-                this.leftPosition = 0;
-                this.leftControl.enabled = false;
-                this.topPosition = 0;
-                this.topControl.enabled = false;
-                this.leftLabel.classList.add("disabled");
-                this.topLabel.classList.add("disabled");
-            } else {
-                this.leftControl.enabled = true;
-                this.topControl.enabled = true;
-                this.leftLabel.classList.remove("disabled");
-                this.topLabel.classList.remove("disabled");
-            }
-        }
-    },
-
-    /**
-     * Calculate the current aspect ration when the bind button is pressed.
-     * If one of the values is 0, then use 1:1 as the ratio;
-     */
-    handleRatioAction: {
-        value: function() {
-            if(this.bindButton.pressed) {
-                this.aspectRatioWidth = this.heightControl.value / this.widthControl.value;
-                if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1;
-
-                this.aspectRatioHeight = this.widthControl.value / this.heightControl.value;
-                if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1;
-            } else {
-                this.aspectRatioWidth = 1;
-                this.aspectRatioHeight = 1;
-            }
-        }
-    },
-
-    handleLeftChange: {
-        value: function(event) {
-            var prevPosition;
-
-            if(!event.wasSetByCode) {
-                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-
-                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition);
-                this.savedPosition = null;
-            }
-        }
-    },
-
-    handleTopChange: {
-        value: function(event) {
-            var prevPosition;
-
-            if(!event.wasSetByCode) {
-                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-
-                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition);
-                this.savedPosition = null;
-            }
-        }
-    },
-
-    handleHeightChange: {
-        value: function(event) {
-            var prevPosition, items;
-
-            if(!event.wasSetByCode) {
-                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-
-                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
-
-                if(this.bindButton.pressed) {
-
-                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
-
-                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
-
-                    this.widthControl.value = newWidth;
-                    this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi");
-                }
-
-                this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition);
-                this.savedPosition = null;
-            }
-        }
-    },
-
-    handleWidthChange: {
-        value: function(event) {
-            var prevPosition, items;
-
-            if(!event.wasSetByCode) {
-                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
-
-                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
-
-                if(this.bindButton.pressed) {
-
-                    var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
-
-                    if(!isFinite(newHeight)) newHeight = this.widthControl.value;
-
-                    this.heightControl.value = newHeight;
-                    this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi");
-
-                }
-
-                this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition);
-                this.savedPosition = null;
-
-            }
-
-        }
-    },
-
-    handleLeftChanging: {
-        value: function(event) {
-            if(!event.wasSetByCode) {
-                if(!this.savedPosition) this.savedPosition = this.leftPosition;
-                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Changing", "pi");
-            }
-
-        }
-    },
-
-    handleTopChanging: {
-        value: function(event) {
-            if(!event.wasSetByCode) {
-                if(!this.savedPosition) this.savedPosition = this.topPosition;
-                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Changing", "pi");
-            }
-
-        }
-    },
-
-    handleHeightChanging: {
-        value: function(event) {
-            var items;
-            if(!event.wasSetByCode) {
-
-                if(!this.savedPosition) this.savedPosition = this.heightSize;
-
-                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
-
-                if(this.bindButton.pressed) {
-
-                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
-
-                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
-
-                    this.widthControl.value = newWidth;
-                    this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi");
-                }
-
-                this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi");
-
-            }
-        }
-    },
-
-    handleWidthChanging: {
-        value: function(event) {
-            var items;
-            if(!event.wasSetByCode) {
-
-                if(!this.savedPosition) this.savedPosition = this.widthSize;
-
-                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
-
-                if(this.bindButton.pressed) {
-                    var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
-
-                    if(!isFinite(newHeight)) newHeight = this.widthControl.value;
-
-                    this.heightControl.value = newHeight;
-                    this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Changing", "pi");
-                }
-
-                this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Changing", "pi");
-            }
-        }
-    }
-
-
-});
\ No newline at end of file
diff --git a/js/panels/properties.reel/sections/position-size.reel/position-size.css b/js/panels/properties.reel/sections/position-size.reel/position-size.css
new file mode 100755
index 00000000..7f8fdbc2
--- /dev/null
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.css
@@ -0,0 +1,40 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+.fieldCol .hide {
+    display: none;
+}
+
+.fieldCol .disabled {
+    color:#999999;
+}
+
+
+#posBound {
+    position: absolute;
+    left: 105px;
+    border: none;
+    background-color: transparent;
+    top: 2px;
+    opacity: 0.7;
+    width: 17px;
+    height: 18px;
+    margin-right: 10px;
+}
+
+#posBound:hover {
+    opacity: 1;
+}
+
+.unlock{
+    background: url("../../../../../images/optionsbar/unlinked.png") no-repeat;
+
+}
+
+.lockUp {
+    background: url("../../../../../images/optionsbar/link.png") no-repeat;
+}
+
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
new file mode 100755
index 00000000..5d1a805a
--- /dev/null
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<!-- <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> -->
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="position-size.css" type="text/css">
+    <script type="text/montage-serialization">
+    {
+        "owner": {
+            "prototype" : "js/panels/properties.reel/sections/position-size.reel",
+            "properties" : {
+                "element" :         {"#": "section"},
+                "position":         {"#": "position"},
+                "leftLabel":        {"#": "labelX"},
+                "leftControl":      {"@": "PosX"},
+                "topLabel":         {"#": "labelY"},
+                "topControl":       {"@": "PosY"},
+                "heightControl":    {"@": "PosH"},
+                "widthControl":     {"@": "PosW"},
+                "bindButton":       {"@": "bindButton"}
+            }
+        },
+
+        "PosX": {
+            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
+            "properties": {
+                "element": {"#": "PosX"},
+                "maxValue": 10000,
+                "minValue": -10000
+            },
+            "bindings": {
+                "value": {"<<->": "@owner.leftPosition"}
+            }
+        },
+        "PosY": {
+            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
+            "properties": {
+                "element": {"#": "PosY"},
+                "maxValue": 10000,
+                "minValue": -10000
+            },
+            "bindings": {
+                "value": {"<<->": "@owner.topPosition"}
+            }
+        },
+
+        "PosH": {
+            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
+            "properties": {
+                "element": {"#": "PosH"}
+            },
+            "bindings": {
+                "value": {"<<->": "@owner.heightSize"}
+            }
+        },
+
+        "PosW": {
+            "prototype": "js/components/hottextunit.reel[HotTextUnit]",
+            "properties": {
+                "element": {"#": "PosW"},
+                "acceptableUnits" : ["px", "%"],
+                "units": "px"
+            },
+            "bindings": {
+                "value": {"<<->": "@owner.widthSize"}
+            }
+
+        },
+        "bindButton": {
+            "prototype": "montage/ui/toggle-button.reel",
+            "properties": {
+                "element": {"#": "posBound"},
+                "pressedClass": "lockUp",
+                "preventFocus": true,
+                "identifier": "ratio"
+            }
+        }
+    }
+    </script>
+</head>
+<body>
+    <div data-montage-id="section" class="sectional">
+        <section data-montage-id="position" class="fieldCol">
+            <label data-montage-id="labelX">Left:</label>
+            <article class="fieldRow twoCol">
+                <div>
+                    <div class="inputField">
+                        <div data-montage-id="PosX"></div>
+                    </div>
+                </div>
+                <div>
+                    <div>
+                        <label data-montage-id="labelY">Top:</label>
+                    </div>
+                    <div class="inputField">
+                        <div data-montage-id="PosY"></div>
+                    </div>
+                </div>
+            </article>
+       </section>
+        <hr />
+        <section class="fieldCol">
+            <button data-montage-id="posBound" id="posBound" class="unlock"></button>
+            <label>Width:</label>
+            <article class="fieldRow twoCol">
+                <div>
+                    <div class="inputField">
+                        <div data-montage-id="PosW"></div>
+                    </div>
+                </div>
+                <div>
+                    <div>
+                        <label>Height:</label>
+                    </div>
+                    <div class="inputField">
+                        <div data-montage-id="PosH"></div>
+                    </div>
+                </div>
+            </article>
+       </section>
+    </div>
+</body>
+</html>
\ No newline at end of file
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
new file mode 100755
index 00000000..10e084be
--- /dev/null
+++ b/js/panels/properties.reel/sections/position-size.reel/position-size.js
@@ -0,0 +1,276 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+
+exports.PositionSize = Montage.create(Component, {
+    leftPosition: {
+        value: 0
+    },
+
+    topPosition: {
+        value: 0
+    },
+
+    heightSize: {
+        value: 0
+    },
+
+    widthSize: {
+        value: 0
+    },
+/*
+    widthSize: {
+        get: function() { return this._widthSize;},
+        set: function(value) {
+            this._widthSize = parseInt(value);
+            this.widthUnit = value;
+        }
+    },
+
+    widthUnit: {
+        value: "px"
+    },
+*/
+    savedPosition: {
+        value: null
+    },
+
+    aspectRatioWidth: {
+        value: null
+    },
+
+    aspectRatioHeight: {
+        value: null
+    },
+
+    _disablePosition: {
+        value: true
+    },
+
+    disablePosition: {
+        get: function () {
+            return this._disablePosition;
+        },
+        set: function (value) {
+            if(value !== this._disablePosition) {
+                this._disablePosition  = value;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+            this.leftControl.identifier = "left";
+            this.leftControl.addEventListener("change", this, false);
+            this.leftControl.addEventListener("changing", this, false);
+
+            this.topControl.identifier = "top";
+            this.topControl.addEventListener("change", this, false);
+            this.topControl.addEventListener("changing", this, false);
+
+            this.heightControl.identifier = "height";
+            this.heightControl.addEventListener("change", this, false);
+            this.heightControl.addEventListener("changing", this, false);
+
+            this.widthControl.identifier = "width";
+            this.widthControl.addEventListener("change", this, false);
+            this.widthControl.addEventListener("changing", this, false);
+
+            this.bindButton.identifier = "ratio";
+            this.bindButton.addEventListener("action", this, false);
+
+        }
+    },
+
+    draw: {
+        value: function() {
+            if(this._disablePosition) {
+                this.leftPosition = 0;
+                this.leftControl.enabled = false;
+                this.topPosition = 0;
+                this.topControl.enabled = false;
+                this.leftLabel.classList.add("disabled");
+                this.topLabel.classList.add("disabled");
+            } else {
+                this.leftControl.enabled = true;
+                this.topControl.enabled = true;
+                this.leftLabel.classList.remove("disabled");
+                this.topLabel.classList.remove("disabled");
+            }
+        }
+    },
+
+    /**
+     * Calculate the current aspect ration when the bind button is pressed.
+     * If one of the values is 0, then use 1:1 as the ratio;
+     */
+    handleRatioAction: {
+        value: function() {
+            if(this.bindButton.pressed) {
+                this.aspectRatioWidth = this.heightControl.value / this.widthControl.value;
+                if(isNaN(this.aspectRatioWidth) || !isFinite(this.aspectRatioWidth) || this.aspectRatioWidth === 0) this.aspectRatioWidth = 1;
+
+                this.aspectRatioHeight = this.widthControl.value / this.heightControl.value;
+                if(isNaN(this.aspectRatioHeight) || !isFinite(this.aspectRatioHeight) || this.aspectRatioHeight === 0) this.aspectRatioHeight = 1;
+            } else {
+                this.aspectRatioWidth = 1;
+                this.aspectRatioHeight = 1;
+            }
+        }
+    },
+
+    handleLeftChange: {
+        value: function(event) {
+            var prevPosition;
+
+            if(!event.wasSetByCode) {
+                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+
+                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Change", "pi", prevPosition);
+                this.savedPosition = null;
+            }
+        }
+    },
+
+    handleTopChange: {
+        value: function(event) {
+            var prevPosition;
+
+            if(!event.wasSetByCode) {
+                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+
+                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Change", "pi", prevPosition);
+                this.savedPosition = null;
+            }
+        }
+    },
+
+    handleHeightChange: {
+        value: function(event) {
+            var prevPosition, items;
+
+            if(!event.wasSetByCode) {
+                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+
+                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.pressed) {
+
+                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
+
+                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
+
+                    this.widthControl.value = newWidth;
+                    this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Change", "pi");
+                }
+
+                this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Change", "pi", prevPosition);
+                this.savedPosition = null;
+            }
+        }
+    },
+
+    handleWidthChange: {
+        value: function(event) {
+            var prevPosition, items;
+
+            if(!event.wasSetByCode) {
+                if(this.savedPosition) prevPosition = [this.savedPosition + "px"];
+
+                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.pressed) {
+
+                    var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
+
+                    if(!isFinite(newHeight)) newHeight = this.widthControl.value;
+
+                    this.heightControl.value = newHeight;
+                    this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Change", "pi");
+
+                }
+
+                this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Change", "pi", prevPosition);
+                this.savedPosition = null;
+
+            }
+
+        }
+    },
+
+    handleLeftChanging: {
+        value: function(event) {
+            if(!event.wasSetByCode) {
+                if(!this.savedPosition) this.savedPosition = this.leftPosition;
+                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "left", [this.leftControl.value + "px"] , "Changing", "pi");
+            }
+
+        }
+    },
+
+    handleTopChanging: {
+        value: function(event) {
+            if(!event.wasSetByCode) {
+                if(!this.savedPosition) this.savedPosition = this.topPosition;
+                this.application.ninja.elementMediator.setProperty(this.application.ninja.selectedElements, "top", [this.topControl.value + "px"] , "Changing", "pi");
+            }
+
+        }
+    },
+
+    handleHeightChanging: {
+        value: function(event) {
+            var items;
+            if(!event.wasSetByCode) {
+
+                if(!this.savedPosition) this.savedPosition = this.heightSize;
+
+                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.pressed) {
+
+                    var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
+
+                    if(!isFinite(newWidth)) newWidth = this.heightControl.value;
+
+                    this.widthControl.value = newWidth;
+                    this.application.ninja.elementMediator.setProperty(items, "width", [newWidth + "px"] , "Changing", "pi");
+                }
+
+                this.application.ninja.elementMediator.setProperty(items, "height", [this.heightControl.value + "px"] , "Changing", "pi");
+
+            }
+        }
+    },
+
+    handleWidthChanging: {
+        value: function(event) {
+            var items;
+            if(!event.wasSetByCode) {
+
+                if(!this.savedPosition) this.savedPosition = this.widthSize;
+
+                this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
+
+                if(this.bindButton.pressed) {
+                    var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
+
+                    if(!isFinite(newHeight)) newHeight = this.widthControl.value;
+
+                    this.heightControl.value = newHeight;
+                    this.application.ninja.elementMediator.setProperty(items, "height", [newHeight + "px"] , "Changing", "pi");
+                }
+
+                this.application.ninja.elementMediator.setProperty(items, "width", [this.widthControl.value + "px"] , "Changing", "pi");
+            }
+        }
+    }
+
+
+});
\ No newline at end of file
-- 
cgit v1.2.3


From 6dfe2e62b1d7a71daf097aac3a31213d564e6122 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 16 May 2012 00:54:30 -0700
Subject: Removing the old checkbox components. Created a new LabelCheckbox

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.css                 | 8 ++++----
 js/panels/properties.reel/sections/custom.reel/custom.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index 0928da3a..756ecc5c 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -256,17 +256,17 @@ padding-right:6px;
     content: "•";
 }
 
-.propertiesPanel input.nj-skinned label {
+.propertiesPanel .checkbox-label {
     position: absolute;
-    top: 0;
-    left: 15px;
+    top: 4px;
+    padding-left: 5px;
+    /*left: 15px;*/
     font-size: 10px;
     width:55px;
     text-align: left;
     font-weight: normal;
     color:#FFF;
 }
-
 .propertiesPanel input[type='radio'].nj-skinned {
     text-indent: 0px;
     line-height: 5px;
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 876fe110..3ab32888 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});
 		}
@@ -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;
-- 
cgit v1.2.3


From 081d72d145f3b570f0f866802e015527848f690e Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 16 May 2012 11:40:51 -0700
Subject: adding a null check.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index 3ec48687..fa62c850 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -228,7 +228,7 @@ exports.Properties = Montage.create(Component, {
 
             if(isRoot) {
                 var backgroundChip = this.customSections[0].content.controls["background"];
-                backgroundChip.color = ElementsMediator.getProperty(el, "background");
+                if(backgroundChip) backgroundChip.color = ElementsMediator.getProperty(el, "background");
             }
 
 			var previousInput = this.application.ninja.colorController.colorModel.input;
-- 
cgit v1.2.3


From 65cea92d839bcd25ea9094a0798190a4dc4bea35 Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 17 May 2012 00:16:43 -0700
Subject: Adding a disabled property to the label-checkbox.

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/sections/custom.reel/custom.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 3ab32888..49b4414e 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -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;
                 }
-- 
cgit v1.2.3


From 7a94696e19b14e15261df516e2ba75e693b1313d Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Fri, 18 May 2012 00:21:56 -0700
Subject: enabling basic document switching

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 js/panels/properties.reel/properties.js | 16 ----------------
 1 file changed, 16 deletions(-)

(limited to 'js/panels/properties.reel')

diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js
index fa62c850..4d048472 100755
--- a/js/panels/properties.reel/properties.js
+++ b/js/panels/properties.reel/properties.js
@@ -55,7 +55,6 @@ exports.Properties = Montage.create(Component, {
             }
 
             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);
@@ -76,21 +75,6 @@ exports.Properties = Montage.create(Component, {
         }
     },
 
-    handleSwitchDocument: {
-        value: function(){
-            // For now always assume that the stage is selected by default
-            if(this.application.ninja.selectedElements.length === 0) {
-                this.displayStageProperties();
-