7 files changed, 64 insertions, 13 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 50171260..45353a08 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1220,7 +1220,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             for(i=0;i<arrSelectedIndexesLength;i++){
                 for(j=0;j<currentLayersSelectedLength;j++){
 
-                    if(this.arrLayers[arrSelectedIndexes[i]] === this.arrLayers[this.currentLayerSelected[j]]){
+                    if(this.arrLayers[arrSelectedIndexes[i]] === this.arrLayers[this.currentLayersSelected[j]]){
                         matchedValues+=1;
                     }
                 }
@@ -1773,6 +1773,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 currentLayersSelectedLength = this.currentLayersSelected.length,
                                 arrLayersLength = this.arrLayers.length,
                                 returnVal = arrLayersLength -1;
+                        if (returnVal === -1) {
+                                return false;
+                        }
                         if (this.currentLayersSelected === false) {
                                 return false;
                         }
diff --git a/js/panels/components-panel.reel/components-panel.js b/js/panels/components-panel.reel/components-panel.js
index ab033433..073a4438 100755
--- a/js/panels/components-panel.reel/components-panel.js
+++ b/js/panels/components-panel.reel/components-panel.js
@@ -300,8 +300,11 @@ exports.ComponentsPanel = Montage.create(Component, {
 
     componentInstanceOnFirstDraw: {
         value: function(instance) {
+            var addDelegate = this.application.ninja.elementMediator.addDelegate;
+            this.application.ninja.elementMediator.addDelegate = null;
             this.application.ninja.elementMediator.addElements(instance.element);
             this.application.ninja.currentDocument.model.mObjects.push(instance);
+            this.application.ninja.elementMediator.addDelegate = addDelegate;
         }
     },
 
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 fb0fd57e..a7fbb297 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
@@ -26,8 +26,28 @@ exports.BindingHudOption = Montage.create(Component, {
         }
     },
 
-    bound: {
-        value: false
+    _promoted : { value: null },
+    promoted : {
+        get : function() { return this._promoted; },
+        set : function(value) {
+            if(value === this._promoted) { return; }
+
+            this._promoted = value;
+
+            this.needsDraw = true;
+        }
+    },
+
+    _bound : { value: null },
+    bound : {
+        get : function() { return this._bound; },
+        set : function(value) {
+            if(value === this._bound) { return; }
+
+            this._bound = value;
+
+            this.needsDraw = true;
+        }
     },
 
     prepareForDraw: {
@@ -47,6 +67,12 @@ exports.BindingHudOption = Montage.create(Component, {
             } else {
                 this.element.classList.remove("bound");
             }
+
+            if(this.promoted || this.bound) {
+                this.element.classList.add("promoted");
+            } else {
+                this.element.classList.remove("promoted");
+            }
 //            if(this.bindings.length > 0) {
 //                this.element.classList.add("bound");
 //            } else {
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 5818eca8..1536c706 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
@@ -11,7 +11,7 @@
     font-size: 11px;
     box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.61);
     border-radius: 6px;
-    padding: 3px 8px;
+    padding: 3px;
     text-shadow: 1px 1px 0px #000;
 }
 
@@ -29,6 +29,8 @@
     /*background: rgba(0, 0, 0, 0.3);*/
     line-height:16px;
     /*box-shadow: inset 0px 0px 4px #333, 1px 1px 0px #3A3A3A;*/
+    padding-top: 4px;
+    margin: 0 5px;
     min-width: 80px;
 }
 
@@ -38,7 +40,10 @@
     line-height:16px;
     padding:1px 25px 1px 8px;
 }
-
+.bindingHud .hudOption.promoted {
+    color: #FFF;
+    font-weight: bold;
+}
 .bindingHud .hudOption .connectorBubble:hover {
     background-color: #1B52A7;
     box-shadow: inset 0px 2px 2px 1px rgba(15, 15, 15, 0.78), 0 1px #474747;
@@ -94,8 +99,13 @@
 }
 .splitter.scrollArea:hover:not(.disabled) {
     background-color: #303030;
+    border-bottom: 1px solid #252525;
+    box-shadow: 0 1px 0 0 #3F3F3F;
+}
+.splitter.scrollAreaBottom:hover:not(.disabled) {
+    border-bottom: 1px solid #3F3F3F;
+    box-shadow: 0 1px 0 0 #252525;
 }
-
 
 .hudRepetition {
     overflow: hidden;
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 7bb888d5..f7e1a1d2 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
@@ -36,7 +36,8 @@
                     "element": {"#" : "hudOption"}
                 },
                 "bindings": {
-                    "title": {"<-": "@repeater.objectAtCurrentIteration"}
+                    "title": {"<-": "@repeater.objectAtCurrentIteration.property"},
+                    "promoted": {"<-": "@repeater.objectAtCurrentIteration.promoted"}
                 }
             },
             "resizer1": {
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 58cf197f..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
@@ -90,9 +90,17 @@ exports.BindingHud = Montage.create(Component, {
 
     getPropertyList : {
         value: function(component) {
-            var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true);
-
-            var objectName, promotedProperties;
+            var props = this.application.ninja.objectsController.getPropertiesFromObject(component, true),
+                promotedProperties = [],
+                objectName;
+
+            ///// Mapper - property to property object
+            function propertyMapper(property) {
+                return {
+                    property: property,
+                    promoted: promotedProperties.indexOf(property) !== -1
+                }
+            }
 
             if(this.userElement.controller._montage_metadata) {
                 objectName = this.userElement.controller._montage_metadata.objectName;
@@ -115,7 +123,7 @@ exports.BindingHud = Montage.create(Component, {
                 }
             }
 
-            return props;
+            return props.map(propertyMapper);
         }