8 files changed, 125 insertions, 35 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 6db86a78..18eb11c9 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
@@ -60,7 +60,6 @@ exports.BindingHudOption = Montage.create(Component, {
     draw: {
         value:function() {
             if(this.bound) {
-                console.log(this.title);
                 this.element.classList.add("bound");
             } else {
                 this.element.classList.remove("bound");
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
index c53c82e2..1c75b03a 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
@@ -38,15 +38,16 @@
     position:relative;
     border-bottom:1px solid #505050;
     line-height:16px;
-    padding:1px 9px 1px 15px;
+    padding:1px 20px 1px 10px;
 }
-.connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover {
+
+.bindingHud .hudOption .connectorBubble:hover {
     box-shadow: inset 0px 0px 6px #5e9eff;
-    display:block;
+    cursor: pointer;
 }
 
 .hudOption.bound, .bindingHud .hudOption.bound {
-    background: #5e9eff;
+    background:  -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
 }
 
 .bindingHud .hudOption:last-child {
@@ -62,7 +63,7 @@
     height: 12px;
     border-left: 0px;
     display: block;
-    box-shadow: inset 0px 0px 6px #5e9eff;
+    box-shadow: inset 0px 0px 6px #AAA;
     /*border-bottom-right-radius: 50%;
     border-top-right-radius: 50%;*/
 
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 4260a66c..799c5866 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
@@ -32,7 +32,6 @@ exports.BindingHud = Montage.create(Component, {
                 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.css b/js/stage/binding-view.reel/binding-view.css
index 543577d1..0365f52d 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -5,9 +5,11 @@
  </copyright> */
 
 .bindingView {
-    height: 100%;
     position: absolute;
-    width:100%;
+    z-index: 2;
+}
+
+.bindingView.mousedOverHud {
     z-index: 12;
 }
 
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 91c9e397..01bc3ff7 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -15,7 +15,8 @@
                 "prototype": "js/stage/binding-view.reel",
                 "properties": {
                     "element": {"#": "bindingView"},
-                    "hudRepeater": {"@": "hudRepeater"}
+                    "hudRepeater": {"@": "hudRepeater"},
+                    "objectsTray": {"@": "objectsTray"}
                 }
             },
             "hudRepeater": {
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index ac9751e8..0a663a4e 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -36,7 +36,6 @@ exports.BindingView = Montage.create(Component, {
         },
         set: function(val) {
             this._translateX = val;
-            console.log("x", this._translateX);
         }
     },
 
@@ -46,7 +45,32 @@ exports.BindingView = Montage.create(Component, {
         },
         set: function(val) {
             this._translateY = val;
-            console.log("y", this._translateY);
+        }
+    },
+
+    _width :{  value: 0 },
+    width: {
+        get:function() {
+            return this._width;
+        },
+        set: function(val) {
+            if(this._width !== val) {
+                this._width = val;
+                this.needsDraw = true;
+            }
+        }
+    },
+
+    _height :{  value: 0 },
+    height: {
+        get:function() {
+            return this._height;
+        },
+        set: function(val) {
+            if(this._height !== val) {
+                this._height = val;
+                this.needsDraw = true;
+            }
         }
     },
 
@@ -78,6 +102,10 @@ exports.BindingView = Montage.create(Component, {
         value: null
     },
 
+    startConnector: {
+        value: null
+    },
+
     //Public Objects
     hudRepeater: { value: null },
 
@@ -103,7 +131,6 @@ exports.BindingView = Montage.create(Component, {
                 this.application.ninja.objectsController.getPropertiesFromObject(this.selectedComponent, true).forEach(function(obj) {
                     this.componentsList[this.selectedComponent.identifier].properties.push({"title":obj})
                 }.bind(this));
-                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") {
@@ -119,7 +146,6 @@ exports.BindingView = Montage.create(Component, {
                 for(var key in this.componentsList){
                     this.bindables.push(this.componentsList[key]);
                 }
-                console.log(this.bindables);
                 // Get Bindings that exist;
 
 
@@ -178,23 +204,39 @@ exports.BindingView = Montage.create(Component, {
             this._context = this.application.ninja.stage.drawingCanvas.getContext('2d');
             this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
             this.element.addEventListener("mousedown", this, false);
+            this.element.addEventListener("mousemove", this, false);
         }
     },
 
     draw: {
         value: function() {
+
+            this.element.style.width = this.width + "px";
+            this.element.style.height = this.height + "px";
             if(this.selectedComponent !== null) {
                 this.canvas.width  = this.application.ninja.stage.drawingCanvas.offsetWidth;
                 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight;
                 this.clearCanvas();
                 for(var i= 0; i < this.hudRepeater.childComponents.length; i++) {