17 files changed, 371 insertions, 148 deletions

diff --git a/js/document/templates/banner/index.html b/js/document/templates/banner/index.html
index 626dc0bc..037c1197 100755
--- a/js/document/templates/banner/index.html
+++ b/js/document/templates/banner/index.html
@@ -18,9 +18,11 @@
         
         <style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
                 * {
+                -webkit-animation: none !important;
                         -webkit-transition-duration: 0s !important;
                         -webkit-animation-duration: 0s !important;
                         -webkit-animation-name: none !important;
+                -webkit-animation-fill-mode: none !important;
                         }
                         
                         body {
diff --git a/js/document/templates/html/index.html b/js/document/templates/html/index.html
index 8fc0d82f..ef68a3c0 100755
--- a/js/document/templates/html/index.html
+++ b/js/document/templates/html/index.html
@@ -21,9 +21,11 @@
         
         <style type="text/css" id="nj-stage-stylesheet" data-ninja-template="true">
                 * {
+                -webkit-animation: none !important;
                         -webkit-transition-duration: 0s !important;
                         -webkit-animation-duration: 0s !important;
                         -webkit-animation-name: none !important;
+                -webkit-animation-fill-mode: none !important;
                         }
                         
                         body {
diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index ba6952aa..f7c936f7 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -76,9 +76,20 @@ 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;
+                var mainTrack = this.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent.parentComponent;
+                mainTrack.childComponents[0].childComponents[tweenID].childComponents[0].selectKeyframe();
+                return;
+            }
+
             this.isSelected=true;
             this.element.style.left = (this.position - 6) + "px";
-            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty
+            this.application.ninja.timeline.selectedStyle = this.parentComponent.parentComponent.parentComponent.trackEditorProperty;
             this.parentComponent.selectTween();
         }
     },
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/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 66f39b5a..72d26e78 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -16,8 +16,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     prepareForDraw:{
         value:function(){
             this.element.addEventListener("click", this, false);
-            this.trackID = this.parentComponent.parentComponent.parentComponent.trackID;
-            this.animatedElement = this.parentComponent.parentComponent.parentComponent.animatedElement;
+            this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
+            this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
             this.ninjaStylesContoller = this.application.ninja.stylesController;
         }
     },
@@ -442,12 +442,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
             for (var i = 0; i < this.propTweens.length; i++) {
                 var keyMill = parseInt(this.propTweens[i].tweenData.keyFrameMillisec);
-                // TODO - trackDur should be parseFloat rounded to significant digits
+                // trackDur should be parseFloat rounded to significant digits
                 var trackDur = parseInt(this.trackDuration);
                 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
                 var keyframePropertyString = " " + keyframePercent + " {";
                 for(var prop in this.propTweens[i].tweenData.tweenedProperties){
-                    keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop];
+                    keyframePropertyString += prop + ": " + this.propTweens[i].tweenData.tweenedProperties[prop] + ";";