5 files changed, 1215 insertions, 116 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index c4aa6e29..717306a0 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,6 +17,7 @@
                                                 "styleRepetition" : {"@":"repetition1"},
                                                 "dynamicLayerName" : {"@":"dtext1"},
                                                 "dynamicLayerTag" : {"@": "dtext2"},
+                                                "layer_label_text" : {"#": "layer-label-text"},
                                                 "mainCollapser" : {"@" : "mainCollapser"},
                                                 "positionCollapser" : {"@" : "positionCollapser"},
                                                 "styleCollapser" : {"@" : "styleCollapser"},
@@ -38,7 +39,7 @@
                                 "value" : {
                                         "boundObject" : {"@": "owner"},
                                         "boundObjectPropertyPath" : "layerName",
-                                        "oneway" : false
+                                        "oneway" : true
                                 }
                         }
                     },
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 2df11f18..77db9b64 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -72,10 +72,28 @@ var Layer = exports.Layer = Montage.create(Component, {
             this._styleCounter = newVal;
         }
     },
+    _selectedStyleIndex: {
+        value: false
+    },
+    selectedStyleIndex: {
+        get: function() {
+                return this._selectedStyleIndex;
+        },
+        set: function(newVal) {
+                if (typeof(newVal) === "undefined") {
+                        return;
+                }
+                if (newVal !== this._selectedStyleIndex) {
+                        this._selectedStyleIndex = newVal;
+                        this.layerData.selectedStyleIndex = newVal;
+                        this.needsDraw = true;
+                }
+        }
+    },
 
     /* Layer models: the name, ID, and selected and animation booleans for the layer */
     _layerName:{
-        value: "Default Layer Name"
+        value: ""
     },
     
     layerName:{
@@ -84,13 +102,22 @@ var Layer = exports.Layer = Montage.create(Component, {
             return this._layerName;
         },
         set:function(newVal){
-                        this._layerEditable.value = newVal;
-                this._layerName = newVal;
-                this.layerData.layerName = newVal;
+                        if (this._layerEditable.value !== newVal) {
+                                this._layerEditable.value = newVal;
+                        }
+                        if (this._layerName !== newVal) {
+                                this._layerName = newVal;
+                        }
+                        if (this.layerData.layerName !== newVal) {
+                                this.layerData.layerName = newVal;
+                        }
+
                 if (typeof(this.dynamicLayerName) !== "undefined") {
-                        this.dynamicLayerName.value = newVal;
+                        if (this.dynamicLayerName.value !== newVal) {
+                                this.dynamicLayerName.value = newVal;
+                        }
                 }
-
+                this.needsDraw = true;
         }
     },
     _layerID:{
@@ -134,6 +161,20 @@ var Layer = exports.Layer = Montage.create(Component, {
         }
     },
     
+    _stageElement: {
+        value: null
+    },
+    
+    stageElement: {
+        get: function() {
+                return this._stageElement;
+        },
+        set: function(newVal) {
+                this._stageElement = newVal;
+                this.layerData.stageElement = newVal;
+        }
+    },
+    
     
     _elementsList : {
         value: []
@@ -398,6 +439,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 
             this.layerName = this.layerData.layerName;
             this.layerID = this.layerData.layerID;
+            this.stageElement = this.layerData.stageElement
             this.arrLayerStyles = this.layerData.arrLayerStyles;
             this.isMainCollapsed = this.layerData.isMainCollapsed;
             this.isPositionCollapsed = this.layerData.isPositionCollapsed;
@@ -417,6 +459,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.isVisible = this.layerData.isVisible;
             this.isAnimated = this.layerData.isAnimated;
             this.docUUID = this.layerData.docUUID;
+            this.selectedStyleIndex = this.layerData.selectedStyleIndex;
             this.needsDraw = boolNeedsDraw;
         }
     },
@@ -439,11 +482,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     triggerOutgoingBinding : {
         value: function() {
-                if (this.layerData.triggerBinding === true) {
-                        this.layerData.triggerBinding = false;
-                } else {
-                        this.layerData.triggerBinding = true;
-                }
+            this.layerData.triggerBinding = !this.layerData.triggerBinding;
         }
     },
         /* END: Models */
@@ -485,44 +524,34 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
                         this.element.addEventListener("drop", this.handleDrop.bind(this), false);
-
-            this.eventManager.addEventListener("updatedID", this, false);
-            this.eventManager.addEventListener("elementChange",this,false);
-
-            this.leftControl.identifier = "left";
-            this.leftControl.addEventListener("changing",this,false);
-            this.leftControl.addEventListener("change",this,false);
-
-            this.topControl.identifier = "top";
-            this.topControl.addEventListener("changing",this,false);
-            this.topControl.addEventListener("change",this,false);
-
-            this.widthControl.identifier = "width";
-            this.widthControl.addEventListener("changing",this,false);
-            this.widthControl.addEventListener("change",this,false);
-
-            this.heightControl.identifier = "height";
-            this.heightControl.addEventListener("changing",this,false);
-            this.heightControl.addEventListener("change",this,false);
-
-            el=this.layerData.elementsList[0];
-
-            this.dtextPositionX = parseFloat(ElementsMediator.getProperty(el, "left"));
-            this.dtextPositionY = parseFloat(ElementsMediator.getProperty(el, "top"));
-            this.dtextScaleY = parseFloat(ElementsMediator.getProperty(el, "height"));
-            this.dtextScaleX= parseFloat(ElementsMediator.getProperty(el, "width"));
-
-//            this.eventManager.addEventListener("changing",this,false);
-
         }
     },
 
     draw: {
         value: function() {
+                var boolHasClass = this.element.classList.contains("layerSelected");
+            if (this.isSelected && !boolHasClass) {
+                //console.log('Layer.draw, adding selection for layer ', this.layerName)
+                this.element.classList.add("layerSelected");
+                
+            }
+                        if (!this.isSelected && boolHasClass) {
+                //console.log('Layer.draw, removing selection for layer ', this.layerName)
+                this.element.classList.remove("layerSelected");
+            }
+            // Enable or disable the delete style button as appropriate
             if (this.isSelected) {
-                this.element.classList.add("selected");
+                if (this.selectedStyleIndex !== "false") {
+                        this.selectStyle(this.selectedStyleIndex);
+                        this.buttonDeleteStyle.classList.remove("disabled");
+                }
             } else {
-                this.element.classList.remove("selected");
+                this.buttonDeleteStyle.classList.add("disabled");
+            }
+            
+            // Update layer name?
+            if (this.layerName !== this.layer_label_text.innerText) {
+                this.layer_label_text.innerText = this.layerName;
             }