10 files changed, 265 insertions, 70 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 34b0b296..8139375d 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -198,7 +198,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #iframeContainer { position: absolute; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: scroll; background: gray; }
 
-.drawingCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 6; }
+.drawingCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 7; }
 
 .stageCanvas { position: absolute; margin: 0px; border: none; padding: 0px; top: 0px; left: 0px; z-index: 5; }
 
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..78189415 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
@@ -12,7 +12,53 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.BindingHudOption = Montage.create(Component, {
+    _title: {
+        value: null
+    },
+
     title: {
-        value: "value"
+        get: function() {
+            return this._title;
+        },
+        set: function(val) {
+            this._title = val;
+            this.needsDraw = true;
+        }
+    },
+
+    bound: {
+        value: false
+    },
+
+    _hudOptions: {
+        value: []
+    },
+
+    hudOptions: {
+        get: function() {
+            return this._hudOptions;
+        },
+        set: function(val) {
+            this._hudOptions = val;
+            this.title = val.title;
+            this.bound = val.bound;
+            this.needsDraw = true;
+        }
+    },
+
+    draw: {
+        value:function() {
+            if(this.bound) {
+                console.log(this.title);
+                this.element.classList.add("bound");
+            } else {
+                this.element.classList.remove("bound");
+            }
+//            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..aa204be7 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
@@ -6,7 +6,7 @@
 
 .bindingHud {
     position: absolute;
-    background: #282828;
+    background: rgba(0, 0, 0, 0.8);
     padding: 0px;
     color: #FFF;
     font-size: 11px;
@@ -15,6 +15,7 @@
     padding: 3px;
     padding-top:0px;
     border:1px solid #000;
+    text-shadow: 1px 1px 0px #000;
 }
 
 .bindingHud .bindingTitle {
@@ -27,18 +28,21 @@
 }
 
 .bindingHud .hudRepetition {
-    background: #555;
-    padding:1px 9px;
+    background: rgba(0, 0, 0, 0.3);
     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: #5e9eff;
+    display:block;
 }
 
 .bindingHud .hudOption:last-child {
@@ -47,14 +51,14 @@
 
 .bindingHud .hudOption .connectorBubble {
     position: absolute;
-    right: -20px;
-    top: 2px;
-    background: #555;
-    border: 1px solid black;
-    border-radius: 0px;
-    width: 12px;
-    height: 12px;
+    right: -10px;
+    top: 1px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
     border-left: 0px;
+    display: none;
     /*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 1f3b181c..afa4cd47 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
@@ -14,7 +14,8 @@
             "owner": {
                 "prototype": "js/stage/binding-view.reel/binding-hud.reel",
                 "properties": {
-                    "element": {"#": "bindingHud"}
+                    "element": {"#": "bindingHud"},
+                    "titleElement": {"#": "title"}
                 }
             },
             "repeater": {
@@ -32,16 +33,7 @@
                     "element": {"#" : "hudOption"}
                 },
                 "bindings": {
-                   "title": {"<-": "@repeater.objectAtCurrentIteration.title"}
-                }
-            },
-            "Title": {
-                "prototype": "montage/ui/dynamic-text.reel",
-                "properties": {
-                    "element": {"#": "title"}
-                },
-                "bindings": {
-                    "value": {"<-": "@owner.title"}
+                    "hudOptions": {"<-": "@repeater.objectAtCurrentIteration"}
                 }
             }
         }
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 029a1a39..14347a32 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
@@ -12,13 +12,30 @@ var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
 
 exports.BindingHud = Montage.create(Component, {
-    title: {
-        value: "default"
+    _bindingArgs: {
+        value: null
+    },
+
+    titleElement: {
+        value: null
+    },
+