1 files changed, 103 insertions, 25 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d7d5328e..01b03531 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -28,6 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         },
         set:function (newVal) {
             this._arrLayers = newVal;
+            this.application.ninja.currentDocument.tlArrLayers = newVal;
         }
     },
 
@@ -99,6 +100,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         },
         set:function (newVal) {
             this._arrTracks = newVal;
+            this.application.ninja.currentDocument.tlArrTracks = newVal;
         }
     },
 
@@ -171,12 +173,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     /* === BEGIN: Draw cycle === */
     prepareForDraw:{
             value:function () {
-                this.eventManager.addEventListener( "onOpenDocument", this, false);
+                this.initTimeline();
+                this.eventManager.addEventListener("onOpenDocument", this, false);
+                this.eventManager.addEventListener("closeDocument", this, false);
+                this.eventManager.addEventListener("switchDocument", this, false);
             }
         },
 
     handleOnOpenDocument:{
         value:function(){
+                this.clearTimelinePanel();
             this.eventManager.addEventListener("deleteLayerClick", this, false);
             this.eventManager.addEventListener("newLayer", this, false);
             this.eventManager.addEventListener("deleteLayer", this, false);
@@ -194,6 +200,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
         }
     },
+    
+    handleCloseDocument: {
+        value: function(event) {
+                this.clearTimelinePanel();
+        }
+    },
+    
+    handleSwitchDocument : {
+        value: function(event) {
+                // Handle document change.
+                this.handleOnOpenDocument();
+        }
+    },
+    
     willDraw:{
         value:function () {
             if (this._isLayer) {
@@ -205,10 +225,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     /* === END: Draw cycle === */
 
     /* === BEGIN: Controllers === */
-    initTimelineView:{
-        value:function () {
-            var myIndex;
-            this.layout_tracks = this.element.querySelector(".layout-tracks");
+        initTimeline : {
+                value: function() {
+                        // Set up basic Timeline functions: event listeners, etc.  Things that only need to be run once.
+                        this.layout_tracks = this.element.querySelector(".layout-tracks");
             this.layout_markers = this.element.querySelector(".layout_markers");
 
             this.newlayer_button.identifier = "addLayer";
@@ -219,8 +239,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
-
-            this.drawTimeMarkers();
+                        
+                }
+        },
+    initTimelineView:{
+        value:function () {
+            var myIndex;
+                        
+                        this.drawTimeMarkers();
 
             this._hashKey = "123";
             _firstLayerDraw = false;
@@ -249,18 +275,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     
     clearTimelinePanel : {
         value: function() {
-                console.log('clearing timeline...')
-                this.arrTracks = null;
-                this.arrLayers = null;
+                // Remove events
+                this.eventManager.removeEventListener("deleteLayerClick", this, false);
+            this.eventManager.removeEventListener("newLayer", this, false);
+            this.eventManager.removeEventListener("deleteLayer", this, false);
+            this.eventManager.removeEventListener("layerBinding", this, false);
+            this.eventManager.removeEventListener("elementAdded", this, false);
+            this.eventManager.removeEventListener("elementDeleted", this, false);
+            this.eventManager.removeEventListener("deleteSelection", this, false);
+            this.eventManager.removeEventListener("selectionChange", this, true);
+            
+            // Remove every event listener for every tween in TimelineTrack
+            this.deselectTweens();
+
+                // Reset visual appearance
+            this.application.ninja.timeline.playhead.style.left = "-2px";
+            this.application.ninja.timeline.playheadmarker.style.left = "0px";
+            this.application.ninja.timeline.updateTimeText(0.00);
+            this.timebar.style.width = "0px";
+            
+            // Clear variables--including repetitions.
+            this.hashInstance = null;
+            this.hashTrackInstance = null;
+            this.hashLayerNumber = null;
+            this.hashElementMapToLayer = null;
+                this.arrTracks = [];
+                this.arrLayers = [];
                 this.currentLayerNumber = 0;
-                this.currentLayerSelected = null;
-                this.currentTrackSelected = null;
+                this.currentLayerSelected = false;
+                this.currentTrackSelected = false;
                 this.selectedKeyframes = [];
                 this.selectedTweens = [];
                 this._captureSelection = false;
                 this._openDoc = false;
                 this.end_hottext.value = 25;
                 this.updateTrackContainerWidth();
+                
+                // Redraw all the things
+                this.layerRepetition.needsDraw = true;
+                this.trackRepetition.needsDraw = true;
                 this.needsDraw = true;
         }
     },
@@ -270,7 +323,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.container_tracks.style.width = (this.end_hottext.value * 80) + "px";
             this.master_track.style.width = (this.end_hottext.value * 80) + "px";
             this.time_markers.style.width = (this.end_hottext.value * 80) + "px";
-            this.time_markers.removeChild(this.timeMarkerHolder);
+            if (this.timeMarkerHolder) {
+                this.time_markers.removeChild(this.timeMarkerHolder);
+            }
+            
             this.drawTimeMarkers();
         }
     },
@@ -423,6 +479,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                             dLayer[hashVariable].deleted = false;
                             this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track);
                             this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el);
+                            this.selectLayer(event.detail._layerPosition);
                             break;
 
                         }
@@ -442,7 +499,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         hashVariable++;
                     }
                     this.application.ninja.currentSelectedContainer = parentNode;
-                    //NJevent('breadCrumbTrail', {"element":parentNode, "setFlag":this._setBreadCrumb});
                 } else {
                     dLayer = this.hashInstance.getItem(event.detail._el.parentElementUUID);
                     while (dLayer[hashVariable]) {
@@ -450,6 +506,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                             dLayer[hashVariable].deleted = false;
                             this.arrTracks.splice(event.detail._layerPosition, 0, event.detail._track);
                             this.arrLayers.splice(event.detail._layerPosition, 0, event.detail._el);
+                            this.selectLayer(event.detail._layerPosition);
                             break;