2 files changed, 146 insertions, 58 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 158d666e..26d045d6 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -62,6 +62,11 @@
                                "boundObject" : {"@": "tweenRepetition"},
                                "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated",
                                "oneway" : false
+                           },
+                           "isClearing" : {
+                               "boundObject" : {"@": "tweenRepetition"},
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing",
+                               "oneway" : false
                            }
                        }
                    },
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 55c84dce..7120298c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -33,16 +33,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     // Are the various collapsers collapsed or not
     _isMainCollapsed:{
-        value:""
+        value: true
     },
     isMainCollapsed:{
         get:function () {
             return this._isMainCollapsed;
         },
         set:function (newVal) {
+                this.log('TimelineTrack.js: isMainCollapsed: ', newVal);
             if (newVal !== this._isMainCollapsed) {
                 this._isMainCollapsed = newVal;
-                this.needsDraw = true;
             }
 
         }
@@ -89,6 +89,19 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             }
         }
     },
+    _animateCollapser : {
+        serializable: true,
+        value: false
+    },
+    animateCollapser : {
+        serializable: true,
+        get: function() {
+                return this._animateCollapser;
+        },
+        set: function(newVal) {
+                this._animateCollapser = newVal;
+        }
+    },
     
     _arrStyleTracks : {
         serializable:true,
@@ -229,6 +242,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set:function (val) {
             this._trackDuration = val;
+            if(this._trackDuration > this.application.ninja.timeline.masterDuration){
+                this.application.ninja.timeline.masterDuration = this._trackDuration;
+            }
         }
     },
 
@@ -342,6 +358,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     draw:{
         value:function () {
             this.ninjaStylesContoller = this.application.ninja.stylesController;
+            return;
             if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) {
                 this._mainCollapser.toggle(false);
             }
@@ -377,7 +394,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             // This needs to move to a keyboard shortcut that is TBD
 
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
-            //this.application.ninja.timeline.selectLayer(selectIndex);
 
             if (ev.shiftKey) {
                 if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) {
@@ -388,7 +404,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                         this.handleNewTween(ev);
                     }
                 } else {
-                    alert("There must be exactly one element in an animated layer.")
+                    console.log("There must be exactly one element in an animated layer.");
                 }
             }
         }
@@ -406,18 +422,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     insertTween:{
         value:function (clickPos) {
-
             // calculate new tween's keyframe milliseconds by clickPos
             var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
             var currentMillisec = currentMillisecPerPixel * clickPos;
 
             // need to check timeline master duration if greater than this track duration
             this.trackDuration = currentMillisec;
-
-            if(this.trackDuration > this.application.ninja.timeline.masterDuration){
-                this.application.ninja.timeline.masterDuration = this.trackDuration;
-            }
-
             var newTween = {};
 
             if (clickPos == 0) {
@@ -443,24 +453,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.tweens.push(newTween);
 
                 // update the animation duration
-                var animationDuration = Math.round(this.trackDuration / 1000) + "s";
+                var animationDuration = (this.trackDuration / 1000) + "s";
                 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
-
                 this.nextKeyframe += 1;
             }
+            this.application.ninja.documentController.activeDocument.needsSave = true;
         }
     },
 
     splitTween:{
         value:function (ev) {
-            alert("Splitting an existing span with a new keyframe is not yet supported.");
-            //console.log("splitting tween at span offsetX: " + ev.offsetX);
+            console.log("Splitting an existing span with a new keyframe is not yet supported.");
         }
     },
 
     retrieveStoredTweens:{
         value:function () {
-            var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute, i = 0;
+            var percentValue, fraction, splitValue,offsetAttribute,topOffSetAttribute,leftOffsetAttribute;
+            var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0;
 
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
             this.application.ninja.timeline.arrLayers[selectedIndex].created=true;
@@ -468,23 +478,20 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             if(this.animatedElement!==undefined){
                 this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name");
                 if(this.animationName){
-                    this.animationDuration = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
-                    this.trackDuration = this.animationDuration.split("s");
-                    this.currentMilliSec = this.trackDuration[0] * 1000;
-                    this.currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
-                    this.clickPos = this.currentMilliSec / this.currentMillisecPerPixel;
+                    trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
                     this.nextKeyframe = 0;
 
                     this.currentKeyframeRule = this.application.ninja.stylesController.getAnimationRuleWithName(this.animationName, this.application.ninja.currentDocument._document);
-                    while (this.currentKeyframeRule[i]) {
+
+                    for (i =0; this.currentKeyframeRule[i] ;i++) {
                         var newTween = {};
 
                         offsetAttribute = this.currentKeyframeRule[i].cssText.split(" ");
                         topOffSetAttribute = offsetAttribute[3].split("px");
                         leftOffsetAttribute = offsetAttribute[5].split("px");
 
-                        parseInt(topOffSetAttribute[0]);
+                        var tempTopOffset = parseInt(topOffSetAttribute[0]);