4 files changed, 101 insertions, 13 deletions

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
+            }
+        }
+    },
+
     _x: {
         value: 20
     },
diff --git a/js/stage/binding-view.reel/binding-view.js b/js/stage/binding-view.reel/binding-view.js
index 1d5ef4db..505dd074 100755
--- a/js/stage/binding-view.reel/binding-view.js
+++ b/js/stage/binding-view.reel/binding-view.js
@@ -255,6 +255,14 @@ exports.BindingView = Montage.create(Component, {
         value:null
     },
 
+    getOffStageIcon : {
+        value: function(object) {
+            var index = this.objectsTray.offStageObjectsController.organizedObjects.indexOf(object);
+
+            return this.objectsTray.iconsRepetition.childComponents[index];
+        }
+    },
+
 
     // When mouse pointer is on a hud this value will be set to true
     _mouseOverHud: { value: false },
diff --git a/js/stage/objects-tray.reel/objects-tray.html b/js/stage/objects-tray.reel/objects-tray.html
index 0fece3fe..901f3e58 100644
--- a/js/stage/objects-tray.reel/objects-tray.html
+++ b/js/stage/objects-tray.reel/objects-tray.html
@@ -14,7 +14,9 @@
             "owner": {
                 "prototype": "js/stage/objects-tray.reel",
                 "properties": {
-                    "element": {"#": "objects-tray"}
+                    "element": {"#": "objects-tray"},
+                    "iconsRepetition": {"@": "repetition" },
+                    "offStageObjectsController": {"@": "arrayController"}
                 }
             },
             "repetition" : {
@@ -38,7 +40,13 @@
                 "bindings": {
                     "sourceObject" : {"<-": "@repetition.objectAtCurrentIteration"},
                     "identifier" : {"<-": "@repetition.objectAtCurrentIteration.identifier"}
-                }
+                },
+                "listeners": [
+                    {
+                        "type": "click",
+                        "listener": {"@": "owner"}
+                    }
+                ]
             }
 
         }
diff --git a/js/stage/objects-tray.reel/objects-tray.js b/js/stage/objects-tray.reel/objects-tray.js
index 190abf57..75ece4c3 100644
--- a/js/stage/objects-tray.reel/objects-tray.js
+++ b/js/stage/objects-tray.reel/objects-tray.js
@@ -15,6 +15,26 @@ exports.ObjectsTray = Montage.create(Component, {
     hideClass : { value: 'hide-objects-tray'},
     _empty : { value: null },
     _workspaceMode : { value: null },
+
+    iconsRepetition : {
+        value: null
+    },
+    offStageObjectsController : {
+        value: null
+    },
+    
+    _showAllObjects : { value: null },
+    showAllObjects : {
+        get : function() { return this._showAllObjects; },
+        set : function(value) {
+            if(value === this._showAllObjects) { return; }
+            
+            this._showAllObjects = value;
+            
+            this.needsDraw = true;
+        }
+    },
+    
     workspaceMode : {
         get : function() { return this._workspaceMode; },
         set : function(value) {
@@ -43,6 +63,16 @@ exports.ObjectsTray = Montage.create(Component, {
         }
     },
 
+    offStageObjectFilter : {
+        value: function(obj) {
+            if(this.showAllObjects) {
+                return true;
+            }
+
+            return this.application.ninja.objectsController.isOffStageObject(obj);
+        }
+    },
+
     _hide : { value: null },
     hide : {
         get : function() { return this._hide; },
@@ -55,10 +85,19 @@ exports.ObjectsTray = Montage.create(Component, {
         }
     },
 
+    displayHUDForObject : {
+        value: function(object) {
+            this.parentComponent.boundComponents.push(object);
+        }
+    },
+
+    /* ---------------------
+     Draw Cycle
+     --------------------- */
 
     templateDidLoad: { 
         value: function() {
-            console.log('objects panel loaded');
+            this.offStageObjectsController.filterFunction = this.offStageObjectFilter.bind(this);
         }
     },
 
@@ -77,12 +116,15 @@ exports.ObjectsTray = Montage.create(Component, {
                 "oneway": true
             });
 
+        }
+    },
+    willDraw : {
+        value: function() {
             if(this.objects) {
-                this.empty = !this.objects.length;
+                this._empty = !this.offStageObjectsController.organizedObjects.length;
             } else {
-                this.empty = true;
+                this._empty = true;
             }
-
         }
     },
     draw : {