8 files changed, 310 insertions, 40 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
index 88314c8b..e5c04279 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: {
                 serializable: true,
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 16fb0303..a2d6444d 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -15,8 +15,34 @@ var nj = require("js/lib/NJUtils").NJUtils;
 
 var Layer = exports.Layer = Montage.create(Component, {
 
-    hasTemplate:{
-        value: true
+    dynamicLayerTag: {
+        value: null,
+        serializable: true
+    },
+
+    positionCollapser: {
+        value: null,
+        serializable: true
+    },
+
+    transformCollapser: {
+        value: null,
+        serializable: true
+    },
+
+    styleCollapser: {
+        value: null,
+        serializable: true
+    },
+
+    clickerMain: {
+        value: null,
+        serializable: true
+    },
+
+    myLabel: {
+        value: null,
+        serializable: true
     },
     
     /* Begin: Models */
@@ -31,7 +57,8 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._mainCollapser = newVal;
-        }
+        },
+        serializable: true
     },
     
     /* Style models: the array of styles, and the repetition that uses them */
@@ -345,6 +372,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 : {
@@ -429,6 +469,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
 
     layerData:{
+        serializable: true,
         get:function(){
             return this._layerData;
         },
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index c39f3a56..eed58a65 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -20,10 +20,31 @@ var Component = require("montage/ui/component").Component;
 
 var LayerStyle = exports.LayerStyle = Montage.create(Component, {
 
-    hasTemplate:{
-        value: true
+    styleContainer: {
+        value: null,
+        serializable: true
     },
-    
+
+    styleHintable: {
+        value: null,
+        serializable: true
+    },
+
+    styleProperty: {
+        value: null,
+        serializable: true
+    },
+
+    valueEditorHottext: {
+        value: null,
+        serializable: true
+    },
+
+    dtextProperty: {
+        value: null,
+        serializable: true
+    },
+
     /* === BEGIN: Models === */
         // isSelected: whether or not the style is selected
         _isSelected: {
@@ -112,7 +133,8 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._myHintable = newVal;