5 files changed, 53 insertions, 28 deletions

diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index f8d37984..f82d3660 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -230,23 +230,10 @@ padding-right:6px;
     clear:none;
 }
 
-.propertiesPanel .LockToolUp, .propertiesPanel .UnLockToolUp {
-    position: absolute;
-    left: 105px;
-    border: none;
-    background-color: transparent;
-    top: 2px;
-    opacity: 0.7;
-}
-
 .propertiesPanel .button:active {
     outline: none;
 }
 
-.propertiesPanel .LockToolUp:hover, .propertiesPanel .UnLockToolUp:hover {
-    opacity: 1;
-}
-
 .propertiesPanel input[type="checkbox"].nj-skinned, .propertiesPanel input[type="radio"].nj-skinned {
     position: relative;
     overflow: visible;
diff --git a/js/panels/properties.reel/sections/custom.reel/custom.js b/js/panels/properties.reel/sections/custom.reel/custom.js
index 703ef950..ac316907 100755
--- a/js/panels/properties.reel/sections/custom.reel/custom.js
+++ b/js/panels/properties.reel/sections/custom.reel/custom.js
@@ -328,6 +328,19 @@ exports.CustomSection = Montage.create(Component, {
             if (aField.value)       obj.label = aField.value;
             if (aField.prop)        obj.prop = aField.prop;
 
+            if (aField.enabled) {
+                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
+                                });
+                } else {
+                    obj.enabled = aField.enabled;
+                }
+            }
+
             //Initiate onChange Events
             obj.addEventListener("change", this, false);
 
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
index 227a232b..7f8fdbc2 100755
--- 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
@@ -8,7 +8,33 @@
     display: none;
 }
 
-.fieldCol .disabled
-{
+.fieldCol .disabled {
     color:#999999;
-}
\ No newline at end of file
+}
+
+
+#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
index 6e355f31..f50724c5 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
@@ -85,13 +85,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
             }
         },
         "bindButton": {
-            "module": "js/components/button.reel",
-            "name":  "Button",
+            "prototype": "montage/ui/toggle-button.reel",
             "properties": {
-                "element": {"#" :"posBound"},
-                "isToggleButton": true,
-                "onState": "LockToolUp",
-                "offState": "UnLockToolUp"
+                "element": {"#": "posBound"},
+                "pressedClass": "lockUp",
+                "preventFocus": true,
+                "identifier": "ratio"
             }
         }
     }
@@ -119,7 +118,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
        </section>
         <hr />
         <section class="fieldCol">
-            <button id="posBound"></button>
+            <button id="posBound" class="unlock"></button>
             <label>Width:</label>
             <article class="fieldRow twoCol">
                 <div>
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 49117090..1e47916f 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
@@ -100,7 +100,7 @@ exports.PosSize = Montage.create(Component, {
      */
     handleRatioAction: {
         value: function() {
-            if(this.bindButton.value) {
+            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;
 
@@ -148,7 +148,7 @@ exports.PosSize = Montage.create(Component, {
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
 
-                if(this.bindButton.value) {
+                if(this.bindButton.pressed) {
 
                     var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
 
@@ -173,7 +173,7 @@ exports.PosSize = Montage.create(Component, {
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
 
-                if(this.bindButton.value) {
+                if(this.bindButton.pressed) {
 
                     var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
 
@@ -221,7 +221,7 @@ exports.PosSize = Montage.create(Component, {
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
 
-                if(this.bindButton.value) {
+                if(this.bindButton.pressed) {
 
                     var newWidth = Math.round(this.aspectRatioHeight * this.heightControl.value);
 
@@ -246,7 +246,7 @@ exports.PosSize = Montage.create(Component, {
 
                 this.application.ninja.selectedElements.length ? items = this.application.ninja.selectedElements : items = [this.application.ninja.currentDocument.documentRoot];
 
-                if(this.bindButton.value) {
+                if(this.bindButton.pressed) {
                     var newHeight = Math.round(this.aspectRatioWidth * this.widthControl.value);
 
                     if(!isFinite(newHeight)) newHeight = this.widthControl.value;