5 files changed, 110 insertions, 72 deletions

diff --git a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
index 78189415..3eda272c 100755
--- a/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
+++ b/js/stage/binding-view.reel/binding-hud-option.reel/binding-hud-option.js
@@ -39,10 +39,15 @@ exports.BindingHudOption = Montage.create(Component, {
             return this._hudOptions;
         },
         set: function(val) {
-            this._hudOptions = val;
-            this.title = val.title;
-            this.bound = val.bound;
+            if (typeof(val) !== "undefined") {
+                this._hudOptions = val;
+                this.title = val.title;
+                this.bound = val.bound;
+            } else {
+                this._hudOptions = null;
+            }
             this.needsDraw = true;
+
         }
     },
 
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
index 88229683..acd072f9 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.js
@@ -25,13 +25,17 @@ exports.BindingHud = Montage.create(Component, {
             return this._bindingArgs;
         },
         set: function(val) {
-            this._bindingArgs = val;
-            this.title = this.bindingArgs.component.identifier;
-            this.x = this._bindingArgs.component.element.offsetLeft;
-            this.y = this._bindingArgs.component.element.offsetTop;
-            this.properties = this._bindingArgs.properties;
-            this.needsDraw = true;
-            console.log("Binding Args Set", val);
+            if (typeof(val) !== "undefined") {
+                this._bindingArgs = val;
+                this.title = this.bindingArgs.component.identifier;
+                this.x = this._bindingArgs.component.element.offsetLeft;
+                this.y = this._bindingArgs.component.element.offsetTop;
+                this.properties = this._bindingArgs.properties;
+                this.needsDraw = true;
+                console.log("Binding Args Set", val);
+            } else {
+                this.properties = [];
+            }
         }
     },
 
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 4eea3cc4..90ef2286 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -37,6 +37,17 @@
                     "bindingArgs": {"<-": "@hudRepeater.objectAtCurrentIteration"}
                 }
             },
+            "translateComposer": {
+                "prototype": "montage/ui/composer/translate-composer",
+                "properties": {
+                    "component": {"@": "owner"}
+                },
+                "bindings": {
+                    "element": {"<-": "@owner._element"},
+                    "translateX": {"->": "@owner.translateX"},
+                    "translateY": {"->": "@owner.translateY"}
+                }
+            },
             "nonVisualRepeater": {
                 "prototype": "montage/ui/repetition.reel",
                 "properties": {
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 01a71202..900d2b24 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -17,17 +17,50 @@ exports.BindingView = Montage.create(Component, {
         value: null
     },
 
-    componentsList: {
-        value: {}
+    //Move variables
+    _translateX : {
+        value: 0
     },
 
-    /*
+    _translateY: {
+        value: 0
+    },
+
+    translateX : {
+        get: function() {
+            return this._translateX;
+        },
+        set: function(val) {
+            this._translateX = val;
+            console.log("x", this._translateX);
+        }
+    },
+
+    translateY: {
+        get: function() {
+            return this._translateY;
+        },
+        set: function(val) {
+            this._translateY = val;
+            console.log("y", this._translateY);
+        }
+    },
+
+    handleMousedown: {
+        value: function(e) {
+            validateOverHud(e.clientX, e.clientY);
+        }
+    },
 
-    Bindables Format: [
+    validateOverHud: {
+        value: function() {
 
-    ]
-    */
+        }
+    },
 
+    componentsList: {
+        value: {}
+    },
 
     _bindables: {
         value: []
@@ -58,35 +91,36 @@ exports.BindingView = Montage.create(Component, {
         },
         set: function(val) {
             this._selectedComponent = val;
-            this.application.ninja.objectsController.currentObject = this.selectedComponent;
-            var arrBindings = this.application.ninja.objectsController.currentObjectBindings;
-            var arrProperties = this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true);
-
-            //Add the first component which is the selected one to have a hud
-            debugger;
-            this.componentsList[this.selectedComponent.identifier] = {"component":  this.selectedComponent, "properties": this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true)};
-            console.log("components:",this.componentsList);
-            //Go through the loop and find every interacted object by bindings
-            arrBindings.forEach(function(obj) {
-                if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") {
-                    var componentListItem = {}
-                    componentListItem.component = obj.boundObject;
-                    componentListItem.properties = [];
-                    this.application.ninja.objectsController.getPropertiesFromObject(obj.boundObject, true).forEach(function(obj) {
-                        componentListItem.properties.push({"title":obj})
-                    }.bind(this));
-                    this.componentsList[obj.boundObject.identifier] = componentListItem;
+            if(this._selectedComponent !== null) {
+                this.application.ninja.objectsController.currentObject = this.selectedComponent;
+                var arrBindings = this.application.ninja.objectsController.currentObjectBindings;
+                var arrProperties = this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true);
+
+                //Add the first component which is the selected one to have a hud
+
+                this.componentsList[this.selectedComponent.identifier] = {"component":  this.selectedComponent, "properties": this.application.ninja.objectsController.getPropertyList(this.selectedComponent, true)};
+                console.log("components:",this.componentsList);
+                //Go through the loop and find every interacted object by bindings
+                arrBindings.forEach(function(obj) {
+                    if(typeof (this.componentsList[obj.boundObject.identifier]) === "undefined") {
+                        var componentListItem = {}
+                        componentListItem.component = obj.boundObject;
+                        componentListItem.properties = [];
+                        this.application.ninja.objectsController.getPropertiesFromObject(obj.boundObject, true).forEach(function(obj) {
+                            componentListItem.properties.push({"title":obj})
+                        }.bind(this));
+                        this.componentsList[obj.boundObject.identifier] = componentListItem;
+                    }
+                }.bind(this));
+                for(var key in this.componentsList){
+                    this.bindables.push(this.componentsList[key]);
                 }
-            }.bind(this));
-            for(var key in this.componentsList){
-                this.bindables.push(this.componentsList[key]);
-            }
-            console.log(this.bindables);
-            // Get Bindings that exist;
+                console.log(this.bindables);
+                // Get Bindings that exist;
 
 
-            //Get Properties of Elements in bindings;
-
+                //Get Properties of Elements in bindings;
+            }
             this.needsDraw = true;
         }
     },
@@ -137,41 +171,14 @@ exports.BindingView = Montage.create(Component, {
     draw: {
         value: function() {
             if(this.selectedComponent !== null) {
-//                this.bindables = [
-//                    {
-//                        "title": "Input1",
-//                        "properties": [
-//                            {"title":"Value",
-//                                "bindings": [
-//                                    {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"}
-//                                ]
-//                            },
-//                            {"title": "Width", "bindings": []}
-//                        ],
-//                        "x": 20,
-//                        "y": 20
-//                    },
-//                    {