Timeline: Document switching and code restructuring.

2 files changed, 95 insertions, 66 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 1aa9a725..92adee05 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -32,8 +32,7 @@
                         "timetext" : {"#": "time_text"},
                         "timebar" : {"#": "time_bar"},
                         "container_tracks" : {"#" : "container-tracks"},
-                        "end_hottext" : {"@" : "endHottext"},
-                        "getme" : {"#" : "getme"}
+                        "end_hottext" : {"@" : "endHottext"}
                     }
                 },
 
@@ -285,7 +284,7 @@
                         
                         <div id="user_layers" class="userlayers">
                             <div id="master_layer" class="masterlayer">
-                                <div id="getme">Master Layer</div>
+                                <div>Master Layer</div>
                             </div>
                             <div id="container-layers">
                                 <div id="container-layer"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 67ff3c02..6d23453d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -28,7 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         },
         set:function (newVal) {
             this._arrLayers = newVal;
-            this.updateLayers();
+            this._cacheArrays();
         }
     },
 
@@ -44,16 +44,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._layerRepetition = newVal;
         }
     },
-    updateLayers : {
+    _cacheArrays : {
         value: function() {
-                this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
-                // this.application.ninja.currentDocument.tlArrTracks = this.arrTracks;
-                console.log('inside of updateLayers ');
-                console.log(this.application.ninja.currentDocument.tlArrTracks);
-
+                // Cache this.arrLayers and this.arrTracks.
+                console.log('cacheArrays ' + this._boolCacheArrays)
+                if (this._boolCacheArrays) {
+                        console.log('caching arrays for ', this.application.ninja.currentDocument.name);
+                                this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
+                                this.application.ninja.currentDocument.tlArrTracks = this.arrTracks;
+                }
         }
     },
-    boolUpdateLayers : {
+    
+    // Set to false to skip array caching array sets in current document
+    _boolCacheArrays : {
         value: true
     },
 
@@ -112,7 +116,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         },
         set:function (newVal) {
             this._arrTracks = newVal;
-            this.updateLayers();
+            this._cacheArrays();
         }
     },
 
@@ -192,43 +196,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             }
         },
 
-    handleOnOpenDocument:{
-        value:function(){
-                this.boolUpdateLayers = false;
-                this.clearTimelinePanel();
-                this.boolUpdateLayers = true;
-            this.eventManager.addEventListener("deleteLayerClick", this, false);
-            this.eventManager.addEventListener("newLayer", this, false);
-            this.eventManager.addEventListener("deleteLayer", this, false);
-            this.eventManager.addEventListener("layerBinding", this, false);
-            this.eventManager.addEventListener("elementAdded", this, false);
-            this.eventManager.addEventListener("elementDeleted", this, false);
-            this.eventManager.addEventListener("deleteSelection", this, false);
-            this.eventManager.addEventListener("selectionChange", this, true);
-            this.hashInstance = this.createLayerHashTable();
-            this.hashTrackInstance = this.createTrackHashTable();
-            this.hashLayerNumber = this.createLayerNumberHash();
-            this.hashElementMapToLayer = this.createElementMapToLayer();
-            this.initTimelineView();
-
-
-        }
-    },
-    
-    handleCloseDocument: {
-        value: function(event) {
-                this.clearTimelinePanel();
-                        this.arrTracks = [];
-                        this.arrLayers = [];
-        }
-    },
-    
-    handleSwitchDocument : {
-        value: function(event) {
-                // Handle document change.
-                this.handleOnOpenDocument();
-        }
-    },
     
     willDraw:{
         value:function () {
@@ -241,6 +208,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     /* === END: Draw cycle === */
 
     /* === BEGIN: Controllers === */
+        
+        // Bind all document-specific events (pass in true to unbind)
+        _bindDocumentEvents : {
+                value: function(boolUnbind) {
+                        var arrEvents = ["deleteLayerClick", 
+                                                         "newLayer", 
+                                                         "deleteLayer", 
+                                                         "layerBinding",
+                                                         "elementAdded", 
+                                                         "elementDeleted", 
+                                                         "deleteSelection", 
+                                                         "selectionChange"],
+                                i,
+                                arrEventsLength = arrEvents.length;
+                                
+                        if (boolUnbind) {
+                                for (i = 0; i < arrEventsLength; i++) {
+                                        this.eventManager.removeEventListener(arrEvents[i], this, false);
+                                }
+                        } else {
+                                for (i = 0; i < arrEventsLength; i++) {
+                                        this.eventManager.addEventListener(arrEvents[i], this, false);
+                                }
+                        }
+                }
+        },
+        
         initTimeline : {
                 value: function() {
                         // Set up basic Timeline functions: event listeners, etc.  Things that only need to be run once.
@@ -258,7 +252,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         
                 }
         },
-    initTimelineView:{
+        
+    initTimelineForDocument:{
         value:function () {
             var myIndex;
                         this.drawTimeMarkers();
@@ -269,10 +264,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // Check to see if we have saved timeline information in the currentDocument.
                         if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") {
                                 // No, we have no information stored.  Create it.
-                                console.log('newfile!')
+                                console.log('newfile ' + this.application.ninja.currentDocument.name)
                                 this.application.ninja.currentDocument.isTimelineInitialized = true;
                                 this.application.ninja.currentDocument.tlArrLayers = [];
                                 this.application.ninja.currentDocument.tlArrTracks = [];
+                                
+                                
+                                // Loop through the DOM of the document to find layers and animations.
+                                // Fire off events as they are found.
                                 _firstLayerDraw = false;
                     if(!this.application.ninja.documentController.creatingNewFile){
                         if(this.application.ninja.currentDocument.documentRoot.children[0]){
@@ -282,7 +281,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 this._openDoc=true;
                                 NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]})
                                 myIndex++;