1 files changed, 115 insertions, 76 deletions

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;
             }
         }
     },
@@ -530,14 +559,6 @@ var Layer = exports.Layer = Montage.create(Component, {
         value: function() {
                 // console.log("Layer.didDraw: Layer "+ this.layerID );
                 if (this._isFirstDraw === true) {
-                        if (this.isSelected === true) {
-                                if (this.application.ninja.currentDocument._uuid === this._docUUID) {
-                                        // Once we're done drawing the first time we need to tell the TimelinePanel if
-                                        // this layer is supposed to be selected.
-                                        //console.log('layerName ' +  this.layerName);
-                                        this.parentComponent.parentComponent.selectedLayerID = this.layerID;
-                                        }
-                        }
                         this._isFirstDraw = false;
                         this.layerData._isFirstDraw = false;
                         
@@ -545,7 +566,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                                         this.mainCollapser.myContent.style.height = "auto";
                                         this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass);
                                         this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass);
-
                         }