3 files changed, 94 insertions, 75 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index e8619d02..16fb0303 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -717,7 +717,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = this._layerEditable.value;
                         this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.dynamicLayerName.value;
                         this.needsDraw = true;
-                        this.application.ninja.documentController.activeDocument.model.needsSave = true;
+                        this.application.ninja.currentDocument.model.needsSave = true;
                 }
         },
         handleAddStyleClick: {
@@ -745,7 +745,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = newVal;
                         this.layerName = newVal;
                         this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = newVal;
-                        this.application.ninja.documentController.activeDocument.model.needsSave = true;
+                        this.application.ninja.currentDocument.model.needsSave = true;
                         this.needsDraw = true;
                 }
         },
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index c55e5a24..d7329ac7 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -15,6 +15,76 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
 
     /* === BEGIN: Models === */
+    _currentDocument: {
+        value : null
+    },
+
+    currentDocument : {
+        get : function() {
+            return this._currentDocument;
+        },
+        set : function(value) {
+            // If it's the same document, do nothing.
+            if (value === this._currentDocument) {
+                return;
+            }
+
+            if(!this._currentDocument && value.currentView === "design") {
+                this.enablePanel(true);
+            }
+
+            this._currentDocument = value;
+
+            if(!value) {
+                this._boolCacheArrays = false;
+                this.clearTimelinePanel();
+                this._boolCacheArrays = true;
+                this.enablePanel(false);
+            } else if(this._currentDocument.currentView === "design") {
+                this._boolCacheArrays = false;
+                this.clearTimelinePanel();
+                this._boolCacheArrays = true;
+
+                // Rebind the document events for the new document context
+                this._bindDocumentEvents();
+                
+                // Initialize the timeline for the document.
+                this.initTimelineForDocument();
+            }
+        }
+    },
+    
+    _currentSelectedContainer: {
+        value: null
+    },
+    currentSelectedContainer: {
+        get: function() {
+            return this._currentSelectedContainer;
+        },
+        set: function(newVal) {
+            if(this._currentSelectedContainer !== newVal) {
+                this._currentSelectedContainer = newVal;
+                if (this._ignoreNextContainerChange === true) {
+                    this._ignoreNextContainerChange = false;
+                    return;
+                }
+                this.application.ninja.currentDocument.setLevel = true;
+                
+                if(this._currentDocument.currentView === "design") {
+                    this._boolCacheArrays = false;
+                    this.clearTimelinePanel();
+                    this._boolCacheArrays = true;
+    
+                    // Rebind the document events for the new document context
+                    this._bindDocumentEvents();
+                    
+                    // Initialize the timeline for the document.
+                    this.initTimelineForDocument();
+                }
+            }
+        }
+    },
+
     _arrLayers:{
         value:[]
     },
@@ -135,19 +205,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
-    
-    _currentSelectedContainer: {
-        value: null
-    },
-    currentSelectedContainer: {
-        get: function() {
-                return this._currentSelectedContainer;
-        },
-        set: function(newVal) {
-                this._currentSelectedContainer = newVal;
-                this.handleDocumentChange();
-        }
-    },
+
 
     _millisecondsOffset:{
         value:1000
@@ -233,7 +291,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         set:function (value) {
             if (this._breadCrumbContainer !== value) {
                 this._breadCrumbContainer = value;
-                //this.LayerBinding();
             }
         }
     },
@@ -334,12 +391,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     prepareForDraw:{
         value:function () {
             this.initTimeline();
-            // Bind the event handler for the document change events
-            //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
-            this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
-            //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
-            //this.eventManager.addEventListener("breadCrumbBinding",this,false);
-            
+
             // Bind drag and drop event handlers
             this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
             this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
@@ -353,6 +405,14 @@ 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);
 
+
+            // Bind some bindings
+            Object.defineBinding(this, "currentSelectedContainer", {
+                boundObject:this.application.ninja,
+                boundObjectPropertyPath:"currentSelectedContainer",
+                oneway:true
+            });
+
         }
     },
 
@@ -559,14 +619,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false);
             this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
             this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
-            
-            // Bind some bindings
-            Object.defineBinding(this, "currentSelectedContainer", {
-                boundObject:this.application.ninja,
-                boundObjectPropertyPath:"currentSelectedContainer",
-                oneway:true
-            });
-            
+ 
                         // Start the panel out in disabled mode by default
                         // (Will be switched on later, if appropriate).
             this.enablePanel(false);
@@ -576,17 +629,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     // Initialize the timeline for a document.
     // Called when a document is opened (new or existing), or when documents are switched.
+    _ignoreNextContainerChange: {
+        value: true
+    },
     initTimelineForDocument:{
         value:function () {
-
-
-            var myIndex,
-                boolAlreadyInitialized = false;
+            var myIndex;
             this.drawTimeMarkers();
             // Document switching