4 files changed, 209 insertions, 57 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index eac361a8..f6fae9b8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -37,7 +37,8 @@
                         "checkable_animated" : {"#" : "checkable_animated"},
                         "tl_configbutton" : {"#" : "tl-configbutton"},
                         "checkable_lock" : {"#" : "checkable_lock"},
-                        "checkable_visible":{"#" : "checkable_visible"}
+                        "checkable_visible":{"#" : "checkable_visible"},
+                        "play_button" : {"#" : "play_button"}
                     }
                 },
 
@@ -164,10 +165,7 @@
                     <div data-montage-id="leftpane_inside" class="leftinside">
                         <div data-montage-id="timeline_controller" class="timelinecontroller">
                             <div data-montage-id="timeline_controls" class="timelinecontrols">
-                                <div data-montage-id="rewind_button" class="rewindbutton"></div>
                                 <div data-montage-id="play_button" class="playbutton"></div>
-                                <div data-montage-id="pause_button" class="pausebutton"></div>
-                                <div data-montage-id="forward_button" class="forwardbutton"></div>
                                 <div data-montage-id="time_text" class="timetext">00:00:00</div>
                             </div>
                         </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 53a3b299..ef13f22e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -117,28 +117,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if (value === this._currentDocument) {
                 return;
             }
-
-            if(!this._currentDocument && value.currentView === "design") {
-                this.enablePanel(true);
-            }
-
             this._currentDocument = value;
+            
+            var boolDoc = false,
+                boolView = false;
+                
+                        // Should we enable the panel? 
+                        // Only if we have both a document and we're in design view.
+                        if (typeof(value) !== "undefined") {
+                                if (value.currentView === "design") {
+                                        // We are in design view.
+                                        boolView = true;
+                                }
+                        }
+                        if (typeof(this._currentDocument) !== "undefined") {
+                                // We have a document, or at least we have initialized the panel.  
+                                boolDoc = true;
+                        }
 
-            if(!value) {
+            if(boolDoc === false) {
                 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();
+            } else {
+                if(boolView === true) {
+                        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();
+                        this.enablePanel(true);
+                                }
             }
         }
     },
@@ -229,6 +243,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value: false
     },
     
+    _areTracksCollapsing: {
+        value: false
+    },
+    
     _currentOpenSpanMenu: {
         value: false
     },
@@ -595,7 +613,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     prepareForDraw:{
         value:function () {
             this.initTimeline();
-
         }
     },
     
@@ -674,6 +691,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // We have shuffled layers, so we need to update this.selectedLayers.
                         this.selectLayers([])
                 }
+
+                // Do we need to scroll the layers?
+                if (this._areTracksCollapsing !== false) {
+                        //console.log("diddraw: user_layers, layout_tracks", this.user_layers.scrollTop, this.layout_tracks.scrollTop);
+                    //this.layout_tracks.scrollTop = this.user_layers.scrollTop;\
+                    this.layout_tracks.scrollTop = this._areTracksCollapsing;
+                        this._areTracksCollapsing = false;
+                }
         }
     },
 
@@ -726,11 +751,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         if (this._boolCacheArrays) {
                                 // ... but only if we're supposed to.
                 if(this.currentDocument) {
+                        var i = 0, 
+                                hashLength = this.application.ninja.currentDocument.tlBreadcrumbHash.length,
+                                boolHash = false;
+                                
                             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;
+                            for (i = 0; i < hashLength; i++ ) {
+                                if (this.application.ninja.currentDocument.tlBreadcrumbHash[i].containerUuid === this.currentDocument.model.domContainer.uuid) {
+                                        this.application.ninja.currentDocument.tlBreadcrumbHash[i].arrLayers = this.arrLayers;
+                                        boolHash = true;
+                                }
+                            }
+                            if (boolHash === false) {
+                                    var newHash = {};
+                                    newHash.containerUuid = this.currentDocument.model.domContainer.uuid;
+                                    newHash.arrLayers = this.arrLayers;
+                                    this.application.ninja.currentDocument.tlBreadcrumbHash.push(newHash);
+                            }
                 }
                         this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected;
                         }
@@ -748,6 +789,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
                 this.application.ninja.currentDocument.tlCurrentElementsSelected = [];
             this.application.ninja.currentDocument.lockedElements = [];
+                this.application.ninja.currentDocument.tlBreadcrumbHash = [];
         }
     },
     
@@ -868,6 +910,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
                         this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
             this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
+            this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
             
             this.addPropertyChangeListener("currentDocument.model.domContainer", this);
             
@@ -891,7 +934,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.drawTimeMarkers();
             // Document switching
             // Check to see if we have saved timeline information in the currentDocument.
-            //console.log("TimelinePanel.initTimelineForDocument");
+            // console.log("TimelinePanel.initTimelineForDocument");