1 files changed, 119 insertions, 12 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 509ec7b1..734b051f 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -11,10 +11,98 @@ var Montage = require("montage/core/core").Montage,
 
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
-    hasTemplate:{
-        value:true
+    user_layers: {
+        value: null,
+        serializable: true
+    },
+
+    track_container: {
+        value: null,
+        serializable: true
+    },
+
+    timeline_leftpane: {
+        value: null,
+        serializable: true
+    },
+
+    layer_tracks: {
+        value: null,
+        serializable: true
+    },
+
+    master_track: {
+        value: null,
+        serializable: true
+    },
+
+    time_markers: {
+        value: null,
+        serializable: true
+    },
+
+    playhead: {
+        value: null,
+        serializable: true
+    },
+
+    playheadmarker: {
+        value: null,
+        serializable: true
+    },
+
+    timetext: {
+        value: null,
+        serializable: true
+    },
+
+    timebar: {
+        value: null,
+        serializable: true
+    },
+
+    container_tracks: {
+        value: null,
+        serializable: true
+    },
+
+    end_hottext: {
+        value: null,
+        serializable: true
+    },
+
+    container_layers: {
+        value: null,
+        serializable: true
+    },
+
+    timeline_disabler: {
+        value: null,
+        serializable: true
+    },
+
+    checkable_relative: {
+        value: null,
+        serializable: true
+    },
+
+    checkable_absolute: {
+        value: null,
+        serializable: true
+    },
+
+    checkable_animated: {
+        value: null,
+        serializable: true
     },
 
+    tl_configbutton: {
+        value: null,
+        serializable: true
+    },
+
+
+
     /* === BEGIN: Models === */
     _currentDocument: {
         value : null
@@ -54,6 +142,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             }
         }
     },
+
+    handleChange: {
+        value: function() {
+            if(this.currentDocument && this.currentDocument.model.getProperty("domContainer")) {
+                this.currentSelectedContainer = this.currentDocument.model.getProperty("domContainer");
+            }
+        }
+    },
     
     _currentSelectedContainer: {
         value: null
@@ -486,6 +582,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
             document.addEventListener("click", this.handleDocumentClick.bind(this), false);
 
+            this.addPropertyChangeListener("currentDocument.model.domContainer", this);
 
             // Bind some bindings
             Object.defineBinding(this, "currentSelectedContainer", {
@@ -608,11 +705,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // Store the timeline data in currentDocument...
                         if (this._boolCacheArrays) {
                                 // ... but only if we're supposed to.
-                        this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
-                        this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer;
-                        this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
-                        this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
-                        this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
+                if(this.currentDocument) {
+                            this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
+                            this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
+                            this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
+                            this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
+                            this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
+                }
                         this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected;
                         }
         }
@@ -623,7 +722,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // Initialize the currentDocument for a new set of timeline data.
                         this.application.ninja.currentDocument.isTimelineInitialized = true;
                         this.application.ninja.currentDocument.tlArrLayers = [];
-                this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.application.ninja.currentSelectedContainer;
+                this.application.ninja.currentDocument.tlCurrentSelectedContainer = this.currentDocument.model.domContainer;
                 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
                 this.application.ninja.currentDocument.tlCurrentLayerSelected = false;
                 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
@@ -806,8 +905,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick');
                                 // Information stored, but we're moving up or down in the breadcrumb.
                                 // Get the current selection and restore timeline info for its children.
-                                //debugger;
-                var parentNode = this.application.ninja.currentSelectedContainer,
+                var parentNode = this.currentDocument.model.domContainer,
                         storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.temparrLayers = [];
                 
@@ -827,6 +925,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 var i = 0, 
                         tlArrLayersLength = this.application.ninja.currentDocument.tlArrLayers.length;
                 
+                
+                this._ignoreNextContainerChange = true;
+                
                 // We're reading from the cache, not writing to it.
                 this._boolCacheArrays = false;
                 for (i = 0; i < tlArrLayersLength; i++) {
@@ -840,6 +941,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected;
                 this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
+
+
+                //debugger;
+                if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") {
+//                      this.currentDocument.model.domContainer = this.application.ninja.currentDocument.tlCurrentSelectedContainer;
+                }
                 this.currentElementsSelected = this.application.ninja.currentDocument.tlCurrentElementsSelected;
                 this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
                 
@@ -1276,7 +1383,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.layerName = stageElementName;