2 files changed, 90 insertions, 86 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 0886bd6c..cf9bace6 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -32,7 +32,8 @@
                         "timetext" : {"#": "time_text"},
                         "timebar" : {"#": "time_bar"},
                         "container_tracks" : {"#" : "container-tracks"},
-                        "end_hottext" : {"@" : "endHottext"}
+                        "end_hottext" : {"@" : "endHottext"},
+                        "container_layers" : {"#" : "container-layers"}
                     }
                 },
 
@@ -72,7 +73,7 @@
                         },
                         "bindings" : {
                         "layerData" : {
-                                "boundObject" : {"@" : "repetition2"},
+                                "boundObject" : {"@" : "repetition1"},
                                 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
                                 "oneway" : false
                         }
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 350c7311..0490aa49 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -19,15 +19,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     /* === BEGIN: Models === */
     _arrLayers:{
+        serializable: true,
         value:[]
     },
 
     arrLayers:{
+        serializable: true,
         get:function () {
             return this._arrLayers;
         },
         set:function (newVal) {
             this._arrLayers = newVal;
+            this.needsDraw = true;
             this._cacheArrays();
         }
     },
@@ -47,10 +50,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
 
     _layerRepetition:{
+        serializable: true,
         value:null
     },
 
     layerRepetition:{
+        serializable: true,
         get:function () {
             return this._layerRepetition;
         },
@@ -248,6 +253,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     /* === END: Draw cycle === */
     /* === BEGIN: Controllers === */
+        // Create an empty layer template object with minimal defaults and return it for use
+        createLayerTemplate : {
+                value : function() {
+                        var returnObj = {};
+                        returnObj.layerData = {};
+                        returnObj.layerData.layerName = null;
+            returnObj.layerData.layerID = null;
+            returnObj.layerData.isMainCollapsed = true;
+            returnObj.layerData.isPositionCollapsed = true;
+            returnObj.layerData.isTransformCollapsed = true;
+            returnObj.layerData.isStyleCollapsed = true;
+            returnObj.layerData.arrLayerStyles = [];
+            returnObj.layerData.elementsList = [];
+            returnObj.layerData.deleted = false;
+            returnObj.layerData.isSelected = false;
+            returnObj.layerData.layerPosition = null;
+            returnObj.layerData.created=false;
+            returnObj.layerData.isTrackAnimated = false;
+            returnObj.layerData.currentKeyframeRule = null;
+            returnObj.layerData.trackPosition = 0;
+            returnObj.layerData.arrStyleTracks = [];
+            returnObj.layerData.tweens = [];
+            returnObj.parentElementUUID = null;
+            returnObj.parentElement = null;
+                        return returnObj;
+                }
+        },
     // Bind all document-specific events (pass in true to unbind)
     _bindDocumentEvents : {
         value: function(boolUnbind) {
@@ -309,27 +341,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.application.ninja.currentDocument.tlArrLayers = [];
                 this.application.ninja.currentDocument.tllayerNumber = 0;
                 this.application.ninja.currentDocument.tlLayerHashTable=[];
+                this.temparrLayers = [];
                 this.hashKey = this.application.ninja.currentSelectedContainer.uuid;
 
-                // Loop through the DOM of the document to find layers and animations.
-                // Fire off events as they are found.
-                if(!this.application.ninja.documentController.creatingNewFile){
-                    if(this.application.ninja.currentDocument.documentRoot.children[0]){
+                // Are we creating a new doc, or opening an existing one?
+                if(!this.application.ninja.documentController.creatingNewFile) {
+                        // Opening an existing document.  Loop through the DOM and build the data model.
+                    if(this.application.ninja.currentDocument.documentRoot.children[0]) {
                         myIndex=0;
-                        while(this.application.ninja.currentDocument.documentRoot.children[myIndex])
-                        {
+                        while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) {
                             this._openDoc=true;
                             this.restoreLayer(this.application.ninja.currentDocument.documentRoot.children[myIndex]);
                             myIndex++;
                         }
-                    }
-                    else{
+                    } else {
                         this.restoreLayer(1);
-                        this.selectLayer(0);
+                        //this.selectLayer(0);
                     }
-                }else{
+                } else {
+                        // New document. Create default layer and select it.
                     this.createNewLayer(1);
-                    this.selectLayer(0);
+                    //this.selectLayer(0);
     
                 }
                 // After recreating the tracks and layers, store the result in the currentDocument.
@@ -339,6 +371,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.application.ninja.currentDocument.tlLayerHashTable = this.hashInstance;
                 this.application.ninja.currentDocument.tlElementHashTable = this.hashElementMapToLayer;
                 this.application.ninja.currentDocument.hashKey=this.hashKey;
+                //this.selectLayer(0);
             } else {
                 // we do have information stored.  Use it.
                 this._boolCacheArrays = false;
@@ -347,9 +380,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.hashInstance = this.application.ninja.currentDocument.tlLayerHashTable;
                 this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable;
                 this.hashKey = this.application.ninja.currentDocument.hashKey;
-                this.selectLayer(0);
                 this._boolCacheArrays = true;
+                //this.selectLayer(0);
             }
+            // Select the first layer.
+            //debugger;
+            //this.selectLayer(0);
         }
     },
     
@@ -367,10 +403,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.application.ninja.timeline.updateTimeText(0.00);
             this.timebar.style.width = "0px";
             
-            // Clear variables--including repetitions.
+            // Clear variables.
             this.hashInstance = null;
             this.hashElementMapToLayer = null;
-            this.arrLayers = [];
 
             this.currentLayerNumber = 0;
             this.currentLayerSelected = false;
@@ -381,11 +416,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._firstTimeLoaded=true;
             this.end_hottext.value = 25;
             this.updateTrackContainerWidth();
+