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

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