Merge branch 'dom-architecture' of github.com:Motorola-Mobility/ninja-internal into CSSPanelUpdates

Conflicts:
	js/document/templates/montage-html/default_html.css
	js/lib/NJUtils.js

2 files changed, 72 insertions, 53 deletions

diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html
index 42746caa..a7bf6a7c 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.html
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html
@@ -16,7 +16,17 @@
                 "properties": {
                     "element": {"#": "TLRadiusControl"},
                     "acceptableUnits" : ["px", "pt", "%"]
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    },
+                    {
+                        "type": "changing",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "hottext2": {
@@ -25,7 +35,13 @@
                     "element": {"#": "TRRadiusControl"},
                     "acceptableUnits" : ["px", "pt", "%"],
                     "enabled": false
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "hottext3": {
@@ -34,7 +50,13 @@
                     "element": {"#": "BLRadiusControl"},
                     "acceptableUnits" : ["px", "pt", "%"],
                     "enabled": false
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "hottext4": {
@@ -43,7 +65,13 @@
                     "element": {"#": "BRRadiusControl"},
                     "acceptableUnits" : ["px", "pt", "%"],
                     "enabled": false
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "change",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "lockButton": {
@@ -53,8 +81,14 @@
                     "pressed": true,
                     "pressedClass": "lockUp",
                     "preventFocus": true,
-                    "identifier": "ratio"
-                }
+                    "identifier": "lockButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             },
 
             "owner": {
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.js b/js/components/tools-properties/rect-properties.reel/rect-properties.js
index c1cb3945..2f8ea4dd 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.js
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.js
@@ -19,12 +19,6 @@ exports.RectProperties = Montage.create(ToolProperties, {
 
     _subPrepare: {
         value: function() {
-            this.lockButton.identifier = "lockButton";
-            this.lockButton.addEventListener("action", this, false);
-
-            this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]);
-            this._setCap([this.TLRadiusControl,this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]);
-
         }
     },
 
@@ -33,11 +27,8 @@ exports.RectProperties = Montage.create(ToolProperties, {
             this.TRRadiusControl.enabled = this.BLRadiusControl.enabled = this.BRRadiusControl.enabled = !this.lockButton.pressed;
 
             if(this.lockButton.pressed) {
-                this._setBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]);
-            } else {
-                this._removeBindings([this.TRRadiusControl, this.BLRadiusControl, this.BRRadiusControl]);
+                this._syncRadii(this.TLRadiusControl.value, this.TLRadiusControl.units);
             }
-
         }
     },
 
@@ -80,57 +71,51 @@ exports.RectProperties = Montage.create(ToolProperties, {
         get: function() { return this.base._fillMaterial.value; }
     },
 
-    _setBindings: {
-        value: function(els) {
-            var that = this;
-            els.forEach(function(el) {
-                Object.defineBinding(el, "value", {
-                    boundObject: that.TLRadiusControl,
-                    boundObjectPropertyPath: "value",
-                    boundValueMutator: function(value) {
-                        if (typeof value === "string") {
-                            return parseFloat(value);
-                        }
-
-                        return value;
-                    }
-                });
-
-                Object.defineBinding(el, "units", {
-                    boundObject: that.TLRadiusControl,
-                    boundObjectPropertyPath: "units"
-                });
-            });
-        }
-    },
+    handleChanging: {
+        value: function(event) {
+            if(event.wasSetByCode) {
+                return;
+            }
 
-    _removeBindings: {
-        value: function(els) {
-            els.forEach(function(el) {
-                Object.deleteBindings(el);
-            });
+            this._setBorderRadius(event);
         }
     },
 
-    _setCap: {
-        value: function(els) {
-            var that = this;
-            els.forEach(function(el) {
-                el.addEventListener("change", that, false);
-            });
+    handleChange: {
+        value: function(event) {
+            if(event.wasSetByCode) {
+                return;
+            }
+
+            this._setBorderRadius(event);
         }
     },
 
-    handleChange: {
+    _setBorderRadius: {
         value: function(event) {
             var hotTxt = event.currentTarget;
             if(hotTxt.units === "%") {
                 if(hotTxt.value > 50) {
                     hotTxt.maxValue = 50;
                 }
-                return hotTxt.value;