5 files changed, 62 insertions, 63 deletions

diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 859268a0..9942300c 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -519,10 +519,12 @@ exports.Ninja = Montage.create(Component, {
 //                background =  "#000000";
 //                overflow = "hidden";
                 transitionStopRule = "nj-css-garbage-selector";
+                this.stage.bindingView.hide = true;
             } else {
 //                background =  "#808080";
 //                overflow = "visible";
                 transitionStopRule = "*"
+                this.stage.bindingView.hide = false;
             }
 
             // TODO: Remove marker for old template: NINJA-STAGE-REWORK
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 a62fe78d..1b0af09d 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
@@ -10,6 +10,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 */
 var Montage = require("montage/core/core").Montage,
     Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;
 
 exports.BindingHud = Montage.create(Component, {
     scrollUp: {
@@ -49,10 +50,10 @@ exports.BindingHud = Montage.create(Component, {
         value: null,
         serializable: true
     },
-    _userComponent: { value: null  },
-    userComponent: {
+    _userElement: { value: null  },
+    userElement: {
         get: function() {
-            return this._userComponent;
+            return this._userElement;
         },
         set: function(val) {
             if(!val) { return; }
@@ -61,14 +62,14 @@ exports.BindingHud = Montage.create(Component, {
                 bindingView = this.parentComponent.parentComponent,
                 isOffStage, icon, iconOffsets;
 
-            this._userComponent = val;
-            this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true);
+            this._userElement = val;
+            this.properties = this.getPropertyList(val.controller); //controller.getPropertiesFromObject(val, true);
 
-            controller.getObjectBindings(this.userComponent).forEach(function(obj) {
+            controller.getObjectBindings(this._userElement.controller).forEach(function(obj) {
                 this.boundProperties.push(obj.sourceObjectPropertyPath);
             }, this);
 
-            isOffStage = controller.isOffStageObject(val);
+            isOffStage = controller.isOffStageObject(val.controller);
 
             if(isOffStage) {
                 icon = bindingView.getOffStageIcon(val);
@@ -77,13 +78,13 @@ exports.BindingHud = Montage.create(Component, {
                 this.x = iconOffsets.x;
                 this.y = iconOffsets.y - 80;
             } else {
-                this.title = val.identifier;
-                this.x = val.element.offsetLeft;
-                this.y = val.element.offsetTop;
+                this.title = this._userElement.controller.identifier;
+                this.x = this._userElement.offsetLeft;
+                this.y = this._userElement.offsetTop;
+//                this.x = parseInt(ElementsMediator.getProperty(val, "left"));
+//                this.y = parseInt(ElementsMediator.getProperty(val, "top"));
             }
-
             this.needsDraw = true;
-
         }
     },
 
@@ -101,8 +102,8 @@ exports.BindingHud = Montage.create(Component, {
                 }
             }
 
-            if(this.userComponent._montage_metadata) {
-                objectName = this.userComponent._montage_metadata.objectName;
+            if(this.userElement.controller._montage_metadata) {
+                objectName = this.userElement.controller._montage_metadata.objectName;
 
                 if(this.panelData && this.panelData[objectName + 'Pi']) {
 
@@ -302,22 +303,17 @@ exports.BindingHud = Montage.create(Component, {
 
     handleMouseover: {
         value: function(e) {
+
             if(this.scrollSpace < this.properties.length) {
                 if (this.scrollInterval === null) {
                     if (e._event.target.classList.contains("scrollAreaBottom")) {
-                        self = e._event.target.parentElement.controller;
-                        //e._event.target.parentElement.controller.currentScrollDirection = "down";
-                        this.scrollInterval = setInterval(function() {
-                            self.optionsRepeater.element.scrollTop += 3;
-                        }, 20);
+                        this.currentScrollDirection = "down";
                     } else {
-                        this.scrollInterval = setInterval(function() {
-                            self.optionsRepeater.element.scrollTop -= 3;
-                        }, 20);
+                        this.currentScrollDirection = "up";
                     }
                 }
             }
-            //this.needsDraw = true;
+            this.needsDraw = true;
         }
     },
 
@@ -333,17 +329,22 @@ exports.BindingHud = Montage.create(Component, {
 
     draw: {
         value: function() {
+
+            if(this.currentScrollDirection !== null) {
+                this.scrollInterval = setInterval(function() {
+                    if(this.currentScrollDirection === "down") {
+                        this.optionsRepeater.element.scrollTop += 3;
+                    } else {
+                        this.optionsRepeater.element.scrollTop -= 3;
+                    }
+                }.bind(this), 20);
+            } else {
+                clearInterval(this.scrollInterval);
+            }
+
             this.titleElement.innerHTML = this.title;
             this.element.style.top = (this.y + this._resizedY) + "px";
             this.element.style.left = (this.x + this._resizedX) + "px";
-
-//            if(this.currentScrollDirection !== null) {
-//                if(this.currentScrollDirection === "up") {
-//                    this.optionsRepeater.element.scrollTop -= 18;
-//                } else {
-//                    this.optionsRepeater.element.scrollTop += 18;
-//                }
-//            }
         }
     },
     didDraw: {
diff --git a/js/stage/binding-view.reel/binding-view.html b/js/stage/binding-view.reel/binding-view.html
index b6c5ff40..c8da1e7e 100755
--- a/js/stage/binding-view.reel/binding-view.html
+++ b/js/stage/binding-view.reel/binding-view.html
@@ -41,7 +41,7 @@
                     "panelData": {"@": "panelData"}
                 },
                 "bindings": {
-                    "userComponent": {"<-": "@hudRepeater.objectAtCurrentIteration"}
+                    "userElement": {"<-": "@hudRepeater.objectAtCurrentIteration"}
                 },
                 "listeners": [
                     {
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 1fc4d583..9e1b3e22 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -97,20 +97,20 @@ exports.BindingView = Montage.create(Component, {
         }
     },
 
-    _selectedComponent: { value: null },
-    selectedComponent: {
+    _selectedElement: { value: null },
+    selectedElement: {
         get: function() {
-            return this._selectedComponent;
+            return this._selectedElement;
         },
         set: function(val) {
             this.boundComponents = [];
-            if(this._selectedComponent !== val) {
+            if(this._selectedElement !== val) {