8 files changed, 139 insertions, 28 deletions

diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index b75d2126..54ff14ba 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -4,14 +4,13 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-var Montage = require("montage/core/core").Montage,
-    Component        = require("montage/ui/component").Component;
+var Montage = require("montage/core/core").Montage;
 
 var CATEGORIES  = {
 
 };
 
-var objectsController = exports.ObjectsController = Montage.create(Component, {
+var objectsController = exports.ObjectsController = Montage.create(Montage, {
 
     _currentDocument : {
         value : null,
@@ -191,6 +190,8 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
         }
     },
 
+    /* ----- Utils ----- */
+
     _hasPrototype : {
         value: function(object, prototypeName) {
             var prototypes = this.getPrototypes(object).map(function(proto) {
@@ -202,6 +203,18 @@ var objectsController = exports.ObjectsController = Montage.create(Component, {
         }
     },
 
+    ///// Returns true if the element is "non-visual", i.e. is not a component,
+    ///// and has not element property
+
+    isOffStageObject : {
+        value: function(object) {
+            var isComponent = this._hasPrototype(object, "Component"),
+                hasValidElement = object.element && object.element.parentNode;
+
+            return !isComponent || !hasValidElement;
+        }
+    },
+
     /* ---- Bindable controller properties ---- */
 
     currentObjectBindings : {
diff --git a/js/panels/objects/object.reel/object.css b/js/panels/objects/object.reel/object.css
index f090ade6..79b7647c 100644
--- a/js/panels/objects/object.reel/object.css
+++ b/js/panels/objects/object.reel/object.css
@@ -43,7 +43,7 @@
     margin:  0 auto 5px;
     width: 50px;
 }
-.object-label {
+.object-name {
     color: #fff;
     display: block;
     text-align: center;
diff --git a/js/panels/objects/object.reel/object.html b/js/panels/objects/object.reel/object.html
index 6274f480..f9de1499 100644
--- a/js/panels/objects/object.reel/object.html
+++ b/js/panels/objects/object.reel/object.html
@@ -21,14 +21,10 @@
             "labelText": {
                 "prototype": "montage/ui/dynamic-text.reel",
                 "properties": {
-                    "element": {"#": "label" }
+                    "element": {"#": "name" }
                 },
                 "bindings": {
-                    "value" : {
-                        "boundObject": {"@": "owner"},
-                        "boundObjectPropertyPath": "label",
-                        "oneway": true
-                    }
+                    "value" : {"<-": "@owner.name"}
                 }
             }
 
@@ -41,7 +37,7 @@
 
 <li data-montage-id="object" draggable="true">
     <div data-montage-id="object-icon" class="object-icon"></div>
-    <span data-montage-id="label" class="object-label"></span>
+    <span data-montage-id="name" class="object-name"></span>
 </li>
 
 </body>
diff --git a/js/panels/objects/object.reel/object.js b/js/panels/objects/object.reel/object.js
index 76f1b5bf..6f8f5c92 100644
--- a/js/panels/objects/object.reel/object.js
+++ b/js/panels/objects/object.reel/object.js
@@ -48,8 +48,6 @@ exports.Object = Montage.create(Component, {
 
             this._identifier = value;
 
-            this.label = value;
-
             this.needsDraw = true;
         }
         
@@ -67,14 +65,30 @@ exports.Object = Montage.create(Component, {
 
             this._montageMetaData = data;
 
-            if(!this.identifier && data.label) {
-                this.label = data.label;
+            if(data.label) {
+                this.name = data.label;
                 this.needsDraw = true;
             }
         }
 
     },
 
+    /* ---------------------
+     Event Handlers
+     --------------------- */
+
+    handleClick: {
+        value: function(e) {
+            this.parentComponent.parentComponent.displayHUDForObject(this.sourceObject);
+        }
+    },
+
+    prepareForDraw : {
+        value: function() {
+            this.iconElement.addEventListener('click', this, false);
+        }
+    },
+
     draw : {
         value: function() {
             if(this.type) {
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 0893e8d8..dd88bef7 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
@@ -52,17 +52,35 @@ exports.BindingHud = Montage.create(Component, {
             return this._userComponent;
         },
         set: function(val) {
-            if (typeof(val) !== "undefined") {
-                this._userComponent = val;
+            if(!val) { return; }
+
+            var controller = this.application.ninja.objectsController,
+                bindingView = this.parentComponent.parentComponent,
+                isOffStage, icon, iconOffsets;
+
+            this._userComponent = val;
+            this.properties = controller.getPropertiesFromObject(val, true);
+
+            controller.getObjectBindings(this.userComponent).forEach(function(obj) {
+                this.boundProperties.push(obj.sourceObjectPropertyPath);
+            }, this);
+
+            isOffStage = controller.isOffStageObject(val);
+
+            if(isOffStage) {
+                icon = bindingView.getOffStageIcon(val);
+                iconOffsets = this.getElementOffsetToParent(icon.element, bindingView.element);
+                this.title = icon.name;
+                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.properties = this.application.ninja.objectsController.getPropertiesFromObject(val, true);
-                this.application.ninja.objectsController.getObjectBindings(this.userComponent).forEach(function(obj) {
-                    this.boundProperties.push(obj.sourceObjectPropertyPath);
-                }.bind(this));
-                this.needsDraw = true;
             }
+
+            this.needsDraw = true;
+
         }
     },
 
@@ -111,6 +129,18 @@ exports.BindingHud = Montage.create(Component, {
         }
     },
 
+    getElementOffsetToParent : {
+        value: function(element, parent) {
+            var nodeToPage = webkitConvertPointFromNodeToPage(element, new WebKitPoint(0, 0)),
+                parentToPage = webkitConvertPointFromNodeToPage(parent, new WebKitPoint(0, 0));
+
+            return {
+                x : nodeToPage.x - parentToPage.x,
+                y : nodeToPage.y - parentToPage.y
+            }