6 files changed, 271 insertions, 381 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 81bd1867..d65d031f 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -38,13 +38,11 @@ var Layer = exports.Layer = Montage.create(Component, {
     _arrLayerStyles : {
         serializable: true,
                 enumerable: true,
-        serializable: true,
             value: []
     },
     arrLayerStyles : {
         serializable: true,
         enumerable: true,
-        serializable: true,
         get: function() {
                 return this._arrLayerStyles;
         },
@@ -110,7 +108,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     /* Position and Transform hottext values */
     _dtextPositionX : {
         value:null,
-        serializable: true,
+        serializable: true
     },
 
     dtextPositionX:{
@@ -129,7 +127,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     _dtextPositionY : {
         value:null,
-        serializable: true,
+        serializable: true
     },
 
     dtextPositionY:{
@@ -148,7 +146,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     _dtextScaleX : {
         value:null,
-        serializable: true,
+        serializable: true
     },
 
     dtextScaleX:{
@@ -167,7 +165,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     _dtextScaleY : {
         value:null,
-        serializable: true,
+        serializable: true
     },
 
     dtextScaleY:{
@@ -186,7 +184,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     _dtextSkewX : {
         value:null,
-        serializable: true,
+        serializable: true
     },
 
     dtextSkewX:{
@@ -205,7 +203,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     _dtextSkewY : {
         value:null,
-        serializable: true,
+        serializable: true
     },
 
     dtextSkewY:{
@@ -224,7 +222,7 @@ var Layer = exports.Layer = Montage.create(Component, {
     
     _dtextRotate : {
         value:null,
-        serializable: true,
+        serializable: true
     },
 
     dtextRotate:{
@@ -386,7 +384,46 @@ var Layer = exports.Layer = Montage.create(Component, {
                 this._bypassAnimation = newVal;
         }
     },
-    
+
+    _layerData:{
+        serializable:true,
+        value:{}
+    },
+
+    layerData:{
+        serializable:true,
+        get:function(){
+            return this._layerData;
+        },
+        set:function(val){
+            this._layerData = val;
+            if(this._layerData){
+                this.setData();
+            }
+        }
+    },
+
+    setData:{
+        value:function(){
+            this.layerName = this.layerData.layerName;
+            this.layerID = this.layerData.layerID;
+            this.arrLayerStyles = this.layerData.arrLayerStyles;
+            this.isMainCollapsed = this.layerData.isMainCollapsed;
+            this.isPositionCollapsed = this.layerData.isPositionCollapsed;
+            this.isTransformCollapsed = this.layerData.isTransformCollapsed;
+            this.isSelected = this.layerData.isSelected;
+            this.isActive = this.layerData.isActive;
+            this.isStyleCollapsed = this.layerData.isStyleCollapsed;
+            this.bypassAnimation = this.layerData.bypassAnimation;
+            this.dtextPositionX = this.layerData.dtextPositionX;
+            this.dtextPositionY = this.layerData.dtextPositionY;
+            this.dtextSkewX = this.layerData.dtextSkewX;
+            this.dtextSkewY = this.layerData.dtextSkewY;
+            this.dtextScaleX = this.layerData.dtextScaleX;
+            this.dtextScaleY = this.layerData.dtextScaleY;
+            this.dtextRotate = this.layerData.dtextRotate;
+        }
+    },
 
         /* END: Models */
 
@@ -628,7 +665,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleMousedown: {
                 value: function(event) {
-                        this.isActive = true;
+                        this.layerData.isActive = true;
                         var ptrParent = nj.queryParentSelector(event.target, ".content-style");
                         if (ptrParent !== false) {
                                 this.selectStyle(this.getActiveStyleIndex());
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index ae1bcddf..0886bd6c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -71,91 +71,11 @@
                                 "element": {"#": "container-layer"}
                         },
                         "bindings" : {
-                                "layerName" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.layerName",
-                                        "oneway" : false
-                                },
-                                "layerID" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.layerID",
-                                        "oneway" : false
-                                },
-                                "arrLayerStyles" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.arrLayerStyles",
-                                        "oneway" : false
-                                },
-                                "isMainCollapsed" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isMainCollapsed",
-                                        "oneway" : false
-                                },
-                                "isPositionCollapsed" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isPositionCollapsed",
-                                        "oneway" : false
-                                },
-                                "isTransformCollapsed" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
-                                        "oneway" : false
-                                },
-                                "isSelected" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
-                                        "oneway" : false
-                                },
-                                "isActive" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isActive",
-                                        "oneway" : false
-                                },
-                                "isStyleCollapsed" : {
-                                        "boundObject" : {"@" : "repetition1"},
-                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
-                                        "oneway" : false
-                                },
+                        "layerData" : {
+                                "boundObject" : {"@" : "repetition2"},
+                                "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
+                                "oneway" : false
+                        }