5 files changed, 67 insertions, 30 deletions

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 e177963f..c53c82e2 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,27 +38,31 @@
     position:relative;
     border-bottom:1px solid #505050;
     line-height:16px;
-    padding:1px 9px;
+    padding:1px 9px 1px 15px;
 }
-.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble {
-    background: #5e9eff;
+.connectorBubble, .bindingHud .hudOption:hover, .bindingHud .hudOption .connectorBubble:hover {
+    box-shadow: inset 0px 0px 6px #5e9eff;
     display:block;
 }
 
+.hudOption.bound, .bindingHud .hudOption.bound {
+    background: #5e9eff;
+}
+
 .bindingHud .hudOption:last-child {
     border-bottom: 0px;
 }
 
 .bindingHud .hudOption .connectorBubble {
     position: absolute;
-    right: -10px;
-    top: 1px;
-    background: rgba(0, 0, 0, 0.3);
+    right: 3px;
+    top: 3px;
     border-radius: 50%;
-    width: 16px;
-    height: 16px;
+    width: 12px;
+    height: 12px;
     border-left: 0px;
-    display: none;
+    display: block;
+    box-shadow: inset 0px 0px 6px #5e9eff;
     /*border-bottom-right-radius: 50%;
     border-top-right-radius: 50%;*/
 
diff --git a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
index 38d2a2ec..b8410f9b 100755
--- a/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
+++ b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.html
@@ -65,7 +65,7 @@
     <section data-montage-id="bindingHud" class="bindingHud">
         <div data-montage-id="title" class="bindingTitle"></div>
         <div data-montage-id="hudRepetition" class="hudRepetition">
-            <div data-montage-id="hudOption" class="hudOption"></div>
+            <div data-montage-id="hudOption"></div>
         </div>
     </section>
 
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index 7ec31edf..a08def8a 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -14,8 +14,7 @@
 .hudRepeater {
     position: absolute;
     width:100%;
-    height:100%;
-    z-index: 2;
+    z-index: 3;
 }
 
 .bindingViewCanvas {
@@ -33,4 +32,5 @@
     -webkit-box-orient: horizontal;
     -webkit-box-pack: center;
     -webkit-box-align: center;
+    z-index: 2;
 }
\ No newline at end of file
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index 5fb7affd..9a127618 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -15,8 +15,7 @@
                 "prototype": "js/stage/binding-view.reel",
                 "properties": {
                     "element": {"#": "bindingView"},
-                    "hudRepeater": {"@": "hudRepeater"},
-                    "canvas": {"#": "bindingViewCanvas"}
+                    "hudRepeater": {"@": "hudRepeater"}
                 }
             },
             "hudRepeater": {
@@ -66,8 +65,6 @@
         <div class="objects-tray-container">
             <div data-montage-id="objects-tray" ></div>
         </div>
-
-        <canvas data-montage-id="bindingViewCanvas" class="bindingViewCanvas"></canvas>
     </section>
 
 </body>
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 58a4cf06..ac9751e8 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -50,12 +50,6 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
-    handleMousedown: {
-        value: function(e) {
-            validateOverHud(e.clientX, e.clientY);
-        }
-    },
-
     validateOverHud: {
         value: function() {
 
@@ -183,6 +177,7 @@ exports.BindingView = Montage.create(Component, {
             this._canvas = this.application.ninja.stage.drawingCanvas;
             this._context = this.application.ninja.stage.drawingCanvas.getContext('2d');
             this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
+            this.element.addEventListener("mousedown", this, false);
         }
     },
 
@@ -193,7 +188,7 @@ exports.BindingView = Montage.create(Component, {
                 this.canvas.height = this.application.ninja.stage.drawingCanvas.offsetHeight;
                 this.clearCanvas();
                 for(var i= 0; i < this.hudRepeater.childComponents.length; i++) {
-                    this.drawBlueLine(this.hudRepeater.objects[i].component.element.offsetLeft,this.hudRepeater.objects[i].component.element.offsetTop, this.hudRepeater.childComponents[i].element.offsetLeft, this.hudRepeater.childComponents[i].element.offsetTop);
+                    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);
                 }
             } else {
                 this.bindables = [];
@@ -209,10 +204,12 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
-    drawBlueLine: {
-        value: function(fromX,fromY,toX,toY) {
-            this._context.lineWidth = 4; // Set Line Thickness
-            //this._context.strokeStyle = "#5e9eff";
+    drawLine: {
+        value: function(fromX,fromY,toX,toY, color) {
+            this._context.lineWidth = 1; // Set Line Thickness
+            if (color === null) {
+                this._context.strokeStyle = "#CCCCCC";
+            }
 
             this._context.beginPath(); // Start Drawing Line
             this._context.moveTo(fromX, fromY);
@@ -223,20 +220,59 @@ exports.BindingView = Montage.create(Component, {
 
     clearCanvas: {
         value: function() {
-            debugger;
             this._context.clearRect(0,0,this._canvas.offsetWidth,this._canvas.offsetHeight);
         }
     },
 
+    ///////////////////////////////////////////////////////
+    // Events & Functions to draw user selected options //
+    /////////////////////////////////////////////////////
+
+    // When a user selects a valid option this value will be switched to true and canvas
+    // will draw a line following the mouse and the start position
+    _isDrawingConnection: {
+        value: false
+    },
+
+    // When isDrawingConnection is set true this is the beginning position for the draw line
+    _connectionPositionStart: {
+        value: {x: 0, y:0}
+    },
+
+    // When isDrawingConnection is set true this is the end point for the draw line
+    _currentMousePosition: {
+        value: {x: 0, y:0}
+    },
+
     handleMousemove: {
-        value: function() {
+        value: function(e) {
+            if(this._isDrawingConnection) {
+                this._currentMousePosition.x = e.clientX;
+                this._currentMousePosition.y = e.clientY;
+                this.needsDraw = true;
+            }
+
+        }
+    },
 
+    handleMouseup: {
+        value: function() {
+            this.element.removeEventListener("mousemove", this);
+            this.element.removeEventListener("mouseup", this);
+            this._isDrawingConnection = false;
+            this.needsDraw = true;