11 files changed, 461 insertions, 159 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 9c8d4434..42bbbb86 100644
--- a/js/panels/Timeline/Collapser.js
+++ b/js/panels/Timeline/Collapser.js
@@ -41,6 +41,7 @@ var Montage = require("montage/core/core").Montage,
                 value: 0
         },
         contentHeight: {
+        serializable: true,
                 get: function() {
                         return this._contentHeight;
                 },
@@ -59,6 +60,7 @@ var Montage = require("montage/core/core").Montage,
                 value: false
         },
         isAnimated: {
+        serializable: true,
                 get: function() {
                         return this._isAnimated;
                 },
@@ -71,6 +73,7 @@ var Montage = require("montage/core/core").Montage,
                 value: true
         },
         bypassAnimation: {
+        serializable: true,
                 get: function() {
                         return this._bypassAnimation;
                 },
@@ -102,6 +105,7 @@ var Montage = require("montage/core/core").Montage,
                 value: ""
         },
         isCollapsed : {
+        serializable: true,
                 get: function() {
                         return this._isCollapsed;
                 },
@@ -110,7 +114,6 @@ var Montage = require("montage/core/core").Montage,
                                 this._isCollapsed = newVal;
                                 //this.needsDraw = true;
                         }
-                        
                 }
         },
         
@@ -141,6 +144,7 @@ var Montage = require("montage/core/core").Montage,
                 value: true
         },
         isLabelClickable : {
+        serializable: true,
                 get: function() {
                         return this._isLabelClickable;
                 },
@@ -149,6 +153,34 @@ var Montage = require("montage/core/core").Montage,
                 }
         },
 
+    _myContent:{
+        value:null
+    },
+
+    myContent:{
+            serializable:true,
+            get:function () {
+                return this._myContent;
+            },
+            set:function (newVal) {
+                this._myContent = newVal;
+            }
+        },
+
+        _clicker:{
+            value:null
+        },
+
+        clicker:{
+            serializable:true,
+            get:function () {
+                return this._clicker;
+            },
+            set:function (newVal) {
+                this._clicker = newVal;
+            }
+        },
+
         // isToggling: Bindable property. Set this (to anything) to trigger a toggle.
         _isToggling: {
                 value: true
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 629b118c..4773489c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -86,10 +86,12 @@ var Layer = exports.Layer = Montage.create(Component, {
                 if (newVal !== this._selectedStyleIndex) {
                         this._selectedStyleIndex = newVal;
                         this.layerData.selectedStyleIndex = newVal;
-                        this.needsDraw = true;
                 }
         }
     },
+    _storedStyleIndex : {
+        value: false
+    },
 
     /* Layer models: the name, ID, and selected and animation booleans for the layer */
     _layerName:{
@@ -276,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, {
                         if (value === false) {
                                 // If changing from true to false, we need to deselect any associated styles
                                 this.selectStyle(false);
+                        } else {
+                            if (this._storedStyleIndex !== false) {
+                                this.selectStyle(this._storedStyleIndex);
+                            }
                         }
                         this._isSelected = value;
                         this.layerData.isSelected = value;
@@ -342,6 +348,19 @@ var Layer = exports.Layer = Montage.create(Component, {
     _layerEditable : {
         value: false
     },
+
+    _dynamicLayerName:{
+        value:true
+    },
+    dynamicLayerName:{
+        serializable:true,
+        get:function () {
+            return this._dynamicLayerName;
+        },
+        set:function (newVal) {
+            this._dynamicLayerName = newVal;
+        }
+    },
     
     // Are the various collapsers collapsed or not
     _isMainCollapsed : {
@@ -565,7 +584,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             }
             // Enable or disable the delete style button as appropriate
             if (this.isSelected) {
-                if (this.selectedStyleIndex !== "false") {
+                if (this.selectedStyleIndex !== false) {
                         this.selectStyle(this.selectedStyleIndex);
                         this.buttonDeleteStyle.classList.remove("disabled");
                 }
@@ -620,7 +639,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 }
         },
         addStyle : {
-                value: function(styleProperty) {
+                value: function(styleProperty, existingRule) {
                         // Add a new style rule.  It should be added above the currently selected rule, 
                         // Or at the end, if no rule is selected.
 
@@ -649,13 +668,16 @@ var Layer = exports.Layer = Montage.create(Component, {
                 newStyle.editorProperty = styleProperty;
                 newEvent.layerEventType = "restoreStyle";
                 newEvent.trackEditorProperty = styleProperty;
-                newEvent.trackEditorProperty = styleProperty;
+                if(existingRule){
+                    newEvent.existingRule = existingRule;
+                }
             }
                         newStyle.editorValue = "";
                         newStyle.ruleTweener = false;
                         newStyle.isSelected = false;
             newStyle.colorelement = "";
             this.arrLayerStyles.push(newStyle);
+            this.selectStyle(this.arrLayerStyles.length -1);
 
                         // Set up the event info and dispatch the event
             this.styleCounter += 1;
@@ -666,56 +688,64 @@ var Layer = exports.Layer = Montage.create(Component, {
 
         deleteStyle : {
                 value: function() {
-                        var newEvent = document.createEvent("CustomEvent"),
-                                selectedIndex = 0;
-                        if (this.arrLayerStyles.length > 0) {
-                                if (!!this.styleRepetition.selectedIndexes) {
+                
+                        // Only delete a style if we have one or more styles, and one of them is selected
+                        if ((this.arrLayerStyles.length > 0) && (this.selectedStyleIndex !== false)) {
+                                var newEvent = document.createEvent("CustomEvent");