4 files changed, 40 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/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;