7 files changed, 123 insertions, 16 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 58f4175e..07cbff11 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
@@ -14,5 +14,28 @@ var Montage = require("montage/core/core").Montage,
 exports.BindingHudOption = Montage.create(Component, {
     title: {
         value: "value"
+    },
+    _bindings: {
+        value: []
+    },
+
+    bindings: {
+        get: function() {
+            return this._bindings;
+        },
+        set: function(val) {
+            this._bindings = val;
+            this.needsDraw = true;
+        }
+    },
+
+    draw: {
+        value:function() {
+            if(this.bindings.length > 0) {
+                this.element.classList.add("bound");
+            } else {
+                this.element.classList.remove("bound");
+            }
+        }
     }
 });
\ No newline at end of file
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 626706ed..34f14a5a 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
@@ -28,17 +28,20 @@
 
 .bindingHud .hudRepetition {
     background: #555;
-    padding:1px 9px;
     line-height:16px;
     border:1px solid #000;
     box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;
-    min-width: 65px;
+    min-width: 80px;
 }
 
 .bindingHud .hudOption {
     position:relative;
     border-bottom:1px solid #505050;
     line-height:16px;
+    padding:1px 9px;
+}
+.hudOption.bound, .bindingHud .hudOption.bound .connectorBubble {
+    background-color:#44F;
 }
 
 .bindingHud .hudOption:last-child {
@@ -47,7 +50,7 @@
 
 .bindingHud .hudOption .connectorBubble {
     position: absolute;
-    right: -20px;
+    right: -11px;
     top: 2px;
     background: #555;
     border: 1px solid black;
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 1f3b181c..5e37cfc9 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
@@ -32,7 +32,8 @@
                     "element": {"#" : "hudOption"}
                 },
                 "bindings": {
-                   "title": {"<-": "@repeater.objectAtCurrentIteration.title"}
+                    "title": {"<-": "@repeater.objectAtCurrentIteration.title"},
+                    "bindings": {"<-": "@repeater.objectAtCurrentIteration.bindings"}
                 }
             },
             "Title": {
diff --git a/js/stage/binding-view.reel/binding-view.css b/js/stage/binding-view.reel/binding-view.css
index 4fa7e10c..41514d7b 100755
--- a/js/stage/binding-view.reel/binding-view.css
+++ b/js/stage/binding-view.reel/binding-view.css
@@ -8,5 +8,12 @@
     position: absolute;
     width:100%;
     height:100%;
+    z-index: 1;
+}
+
+.bindingViewCanvas {
+    width:100%;
+    height:100%;
+    position:absolute;
     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 39704e25..0f01e9ff 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"},
+                    "bindingViewCanvas": {"#": "bindingViewCanvas"}
                 }
             },
             "hudRepeater": {
@@ -76,6 +77,7 @@
 
             </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 a0ca0c4f..d17735b2 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -23,6 +23,16 @@ exports.BindingView = Montage.create(Component, {
         value:[]
     },
 
+    _bindingViewCanvas: {
+        value:null
+    },
+    _canvas: {
+        value:null
+    },
+    _context : {
+        value: null
+    },
+
     //Public Objects
     hudRepeater: { value: null },
 
@@ -53,13 +63,25 @@ exports.BindingView = Montage.create(Component, {
             this._nonVisualComponents = val;
         }
     },
+    bindingViewCanvas: {
+        get: function() {
+            return this._bindingViewCanvas;
+        },
+        set: function(val) {
+            this._bindingViewCanvas = val;
+        }
+    },
 
     //Methods
 
+
+
     //Montage Draw Cycle
     prepareForDraw: {
         value: function() {
-
+            this._canvas = this.application.ninja.stage.drawingCanvas;
+            this._context = this._canvas.getContext('2d');
+            this.application.ninja.stage._iframeContainer.addEventListener("scroll", this, false);
         }
     },
 
@@ -70,8 +92,12 @@ exports.BindingView = Montage.create(Component, {
                     {
                         "title": "Input1",
                         "properties": [
-                            {"title":"Value"},
-                            {"title": "Width"}
+                            {"title":"Value",
+                                "bindings": [
+                                    {"direction": "<-", "boundObject":"Checkbox1", "boundProperty": "Value"}
+                                ]
+                            },
+                            {"title": "Width", "bindings": []}
                         ],
                         "x": 20,
                         "y": 20
@@ -79,16 +105,47 @@ exports.BindingView = Montage.create(Component, {
                     {
                         "title": "Checkbox1",
                         "properties": [
-                            {"title":"Group"},
-                            {"title": "Value"}
+                            {"title":"Group" , "bindings": []},
+                            {"title":"Value",
+                                "bindings": [
+                                    {"direction": "-