6 files changed, 82 insertions, 27 deletions

diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index a08def8a..fbd1b2b6 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -5,10 +5,8 @@
  </copyright> */
 
 .bindingView {
-    height: 100%;
     position: absolute;
-    width:100%;
-    z-index: 12;
+    z-index: 2;
 }
 
 .hudRepeater {
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 9a127618..5532d61a 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..682c0827 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -50,6 +50,32 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
+    _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;
+            }
+        }
+    },
+
     validateOverHud: {
         value: function() {
 
@@ -178,18 +204,28 @@ 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++) {
                     this.drawLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft +3, this.hudRepeater.childComponents[i].element.offsetTop +3);
+
+                }
+
+                if(this._isDrawingConnection) {
+                    this.drawLine(this._currentMousePosition.x,this._currentMousePosition.y,this._connectionPositionStart.x,this._connectionPositionStart.y,"#3333FF", 4);
                 }
+
             } else {
                 this.bindables = [];
                 this.clearCanvas();
@@ -205,12 +241,11 @@ exports.BindingView = Montage.create(Component, {
     },
 
     drawLine: {
-        value: function(fromX,fromY,toX,toY, color) {
-            this._context.lineWidth = 1; // Set Line Thickness
-            if (color === null) {
-                this._context.strokeStyle = "#CCCCCC";
-            }
-
+        value: function(fromX,fromY,toX,toY, color, width) {
+            if(width === null) width = 1;
+            if (color === null) color = "#CCC";
+            this._context.lineWidth = width; // Set Line Thickness
+            this._context.strokeStyle = color; // Set Color
             this._context.beginPath(); // Start Drawing Line
             this._context.moveTo(fromX, fromY);
             this._context.lineTo(toX, toY);
@@ -246,9 +281,24 @@ exports.BindingView = Montage.create(Component, {
 
     handleMousemove: {
         value: function(e) {
+            var mousePoint = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY));
+            var overHud = false;
+            this.hudRepeater.childComponents.forEach(function(obj) {
+                if(obj.x < mousePoint.x && (obj.x + obj.element.offsetWidth) > mousePoint.x) {
+                    if(obj.y < mousePoint.y && (obj.y + obj.element.offsetHeight) > mousePoint.y) {
+                        overHud = true;
+                        console.log(overHud);
+                    }
+                }
+            }.bind(this));
+            if(overHud) {
+                this.element.style.zIndex = "12";
+            } else {
+                this.element.style.zIndex = "2";
+            }
+
             if(this._isDrawingConnection) {
-                this._currentMousePosition.x = e.clientX;
-                this._currentMousePosition.y = e.clientY;
+                this._currentMousePosition = mousePoint;
                 this.needsDraw = true;
             }
 
@@ -257,21 +307,21 @@ exports.BindingView = Montage.create(Component, {
 
     handleMouseup: {
         value: function() {
-            this.element.removeEventListener("mousemove", this);
-            this.element.removeEventListener("mouseup", this);
+            window.removeEventListener("mouseup", this);
             this._isDrawingConnection = false;
             this.needsDraw = true;
         }
     },
 
     handleMousedown: {
-        value: function(event) {
+        value: function(e) {
             // We are looking for a mouse down on an option to start the connection visual
-            if(event._event.target.classList.contains("hudOption")) {
+            if(e._event.target.classList.contains("hudOption")) {
                 //NOTE: Test Code Please Clean Up
+                //alert(event._event.target.controller.title);
                 this._isDrawingConnection = true;
-                this.element.addEventListener("mousemove", this);
-                this.element.addEventListener("mouseup", this);
+                this._connectionPositionStart = webkitConvertPointFromPageToNode(this.element, new WebKitPoint(e.pageX, e.pageY));
+                window.addEventListener("mouseup", this);
             }
         }
     },
diff --git a/js/stage/stage.reel/stage.html b/js/stage/stage.reel/stage.html
index 397af0b6..215f8f2e 100755
--- a/js/stage/stage.reel/stage.html
+++ b/js/stage/stage.reel/stage.html
@@ -84,7 +84,7 @@
         <canvas data-montage-id="layoutCanvas" class="layoutCanvas"></canvas>
         <canvas data-montage-id="stageCanvas" class="stageCanvas"></canvas>
         <canvas data-montage-id="drawingCanvas" class="drawingCanvas"></canvas>
-        <section data-montage-id="bindingView" class="bindingView"></section>
+        <section data-montage-id="bindingView"></section>
     </section>
 
 </body>
diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js
index 30ee1e40..63339c57 100755
--- a/js/stage/stage.reel/stage.js
+++ b/js/stage/stage.reel/stage.js
@@ -21,6 +21,9 @@ exports.Stage = Montage.create(Component, {
     _canvasSelectionPrefs:  { value: { "thickness" : 1.0, "color" : "#46a1ff" } },
     _canvasDrawingPrefs:    { value: { "thickness" : 1.0, "color" : "#000" } },
     drawingContextPreferences: { get: function() { return this._canvasDrawingPrefs; } },
+    bindingView: {
+        value: null
+    },
 
     _iframeContainer: { value: null },
 
@@ -237,9 +240,8 @@ exports.Stage = Montage.create(Component, {
         value: function() {