7 files changed, 75 insertions, 34 deletions

diff --git a/js/controllers/objects-controller.js b/js/controllers/objects-controller.js
index 6557c14e..f6d400f4 100644
--- a/js/controllers/objects-controller.js
+++ b/js/controllers/objects-controller.js
@@ -150,9 +150,9 @@ var objectsController = exports.ObjectsController = Montage.create(Montage, {
             var properties = [];
 
             for(var key in object) {
-                if(object.hasOwnProperty(key)) {
+                //if(object.hasOwnProperty(key)) {
                         properties.push(key);
-                }
+                //}
             }
 
             if(excludeUnderscoreProperties) {
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.css b/js/stage/binding-view.reel/binding-hud.reel/binding-hud.css
index 680f9183..5818eca8 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,14 +6,12 @@
 
 .bindingHud {
     position: absolute;
-    background: rgba(0, 0, 0, 0.85);
-    /*padding: 0px;*/
+    background: rgba(24, 24, 24, 0.85);
     color: #C4C4C4;
     font-size: 11px;
-    box-shadow: inset 0px 0px 0px 0px #CCC;
+    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61);
     border-radius: 6px;
-    padding: 3px 1px 1px;
-    border:1px solid #000;
+    padding: 3px 8px;
     text-shadow: 1px 1px 0px #000;
 }
 
@@ -58,35 +56,35 @@
 
 .bindingHud .hudOption .connectorBubble {
     position: absolute;
-    right: 5px;
+    right: 2px;
     top: 3px;
     border-radius: 50%;
     width: 10px;
     height: 10px;
     border-left: 0px;
     display: block;
-    background-color: #313131;
-    box-shadow: inset 0px 2px 7px 1px #0F0F0F, 0 1px #424242;
+    background-color: #353535;
+    box-shadow: inset 0px 2px 3px 1px #222, 0 1px #666;
 
 }
 
 .splitter.scrollArea {
     background-color: transparent;
-    background-size: 12%;
+    background-size: 10%;
     background-position-y: 2px;
     display: none;
     height:11px;
     text-align: center;
 }
 .splitter.scrollAreaTop {
-    border-top: 1px solid #353535;
-    box-shadow: 0 -1px 0 0 #141414;
+    border-bottom: 1px solid #141414;
+    box-shadow: 0 1px 0 0 #525252;
 }
 .splitter.scrollAreaBottom {
     -webkit-transform: rotate(180deg);
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
-    border-bottom: 1px solid #353535;
+    border-bottom: 1px solid #525252;
     box-shadow: 0 1px 0 0 #141414;
     margin-top: 4px;
 }
@@ -95,7 +93,7 @@
     opacity: 0.5;
 }
 .splitter.scrollArea:hover:not(.disabled) {
-    background-color: #252525;
+    background-color: #303030;
 }
 
 
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 9918b06d..6b802cb0 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
@@ -45,7 +45,10 @@ exports.BindingHud = Montage.create(Component, {
     optionsRepeater: {
         value: null
     },
-
+    panelData : {
+        value: null,
+        serializable: true
+    },
     _userComponent: { value: null  },
     userComponent: {
         get: function() {
@@ -59,7 +62,7 @@ exports.BindingHud = Montage.create(Component, {
                 isOffStage, icon, iconOffsets;
 
             this._userComponent = val;
-            this.properties = controller.getPropertiesFromObject(val, true);
+            this.properties = this.getPropertyList(val); //controller.getPropertiesFromObject(val, true);
 
             controller.getObjectBindings(this.userComponent).forEach(function(obj) {
                 this.boundProperties.push(obj.sourceObjectPropertyPath);
@@ -73,17 +76,43 @@ exports.BindingHud = Montage.create(Component, {
                 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.needsDraw = true;
 
         }
     },
 
+    getPropertyList : {
+        value: function(component) {
+            var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true);
+
+            var objectName, promotedProperties;
+
+            if(this.userComponent._montage_metadata) {
+                objectName = this.userComponent._montage_metadata.objectName;
+
+                if(this.panelData && this.panelData[objectName + 'Pi']) {
+
+                    promotedProperties = this.panelData[objectName + 'Pi'][0].Section.map(function(item) {
+                        return item[0].prop;
+                    });
+
+                    //// Remove promoted properties from current position in array
+                    props = props.filter(function(prop) {
+                        return promotedProperties.indexOf(prop) === -1;
+                    });
+
+                    //// Add them at the top
+
+                    props = promotedProperties.concat(props);
+
+                }
+            }
+
+            return props;
+        }
+    },
+
     properties: { value: [] },
 
     _isResizing: {
@@ -202,6 +231,12 @@ exports.BindingHud = Montage.create(Component, {
                 this.scrollUp.style.display = "block";