5 files changed, 124 insertions, 18 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 95a94b36..f7c936f7 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,6 +76,9 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     selectKeyframe:{
         value:function(){
+            if(this.isSelected){
+                return;
+            }
 
             if(this.parentComponent.parentComponent.parentComponent.trackType == "position"){
                 var tweenID = this.parentComponent.tweenID;
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 776d5ec8..b4833fa2 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -325,6 +325,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         value: false
     },
     isActive: {
+        serializable:true,
         get: function() {
                 return this._isActive;
         },
@@ -752,12 +753,20 @@ var Layer = exports.Layer = Montage.create(Component, {
                         //defaultEventManager.dispatchEvent(newEvent);
                         
                         // Dispatch the event to the TimelineTrack component associated with this Layer.
-                        var myIndex = this.application.ninja.timeline.getActiveLayerIndex(),
+                        var myIndex = false,
+                                i = 0, 
+                                arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
                                 arrTracks = document.querySelectorAll('[data-montage-id="track"]');
-
+                        
+                        for (i = 0; i < arrLayersLength; i++) {
+                                if (this.stageElement == this.parentComponent.parentComponent.arrLayers[i].layerData.stageElement) {
+                                        myIndex = i;
+                                }
+                        }
+                        
                         if (myIndex !== false) {
                                 arrTracks[myIndex].dispatchEvent(newEvent);
-                        }
+                        } 
                 }
         },
 
@@ -945,12 +954,14 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 this.isMainCollapsed = false;
                         } else {
                                 this.isMainCollapsed = true;
+                                this.application.ninja.timeline.synchScrollbars(43);
                         }
                         this.triggerOutgoingBinding();
                 }
         },
         handlePositionCollapserClick : {
                 value: function(event) {
+                        var myHeight = this.positionCollapser.element.offsetHeight;
                         this.positionCollapser.bypassAnimation = false;
                         this.bypassAnimation = false;
                         this.layerData.bypassAnimation = false;
@@ -958,12 +969,14 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 this.isPositionCollapsed = false;
                         } else {
                                 this.isPositionCollapsed = true;
+                                this.application.ninja.timeline.synchScrollbars(myHeight);
                         }
                         this.triggerOutgoingBinding();
                 }
         },
         handleStyleCollapserClick : {
                 value: function(event) {
+                        var myHeight = this.styleCollapser.element.offsetHeight;
                         this.styleCollapser.bypassAnimation = false;
                         this.bypassAnimation = false;
                         this.layerData.bypassAnimation = false;
@@ -971,6 +984,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 this.isStyleCollapsed = false;
                         } else {
                                 this.isStyleCollapsed = true;
+                                this.application.ninja.timeline.synchScrollbars(myHeight);
                         }
                         this.triggerOutgoingBinding();
                 }
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 470062ba..12b481de 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -243,6 +243,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value: false
     },
     
+    _areTracksCollapsing: {
+        value: false
+    },
+    
     _currentOpenSpanMenu: {
         value: false
     },
@@ -687,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;
+                }
         }
     },
 
@@ -898,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);
             
@@ -1073,15 +1086,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    handlePlayButtonClick:{
+        value:function(ev){
+            this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
+
+            if (this.application.ninja.appModel.livePreview) {
+                this.play_button.classList.remove("playbutton");
+                this.play_button.classList.add("pausebutton");
+
+            } else {
+                this.play_button.classList.remove("pausebutton");
+                this.play_button.classList.add("playbutton");
+            }
+        }
+    },
+
     handleKeyframeShortcut:{
         value:function(action){