1 files changed, 58 insertions, 80 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 9894e6f9..669dabef 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;
             }
 
         }
@@ -57,7 +57,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         set:function (newVal) {
             if (newVal !== this._isTransformCollapsed) {
                 this._isTransformCollapsed = newVal;
-                this.needsDraw = true;
             }
         }
     },
@@ -71,7 +70,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         set:function (newVal) {
             if (newVal !== this._isPositionCollapsed) {
                 this._isPositionCollapsed = newVal;
-                this.needsDraw = true;
             }
         }
     },
@@ -85,10 +83,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         set:function (newVal) {
             if (newVal !== this._isStyleCollapsed) {
                 this._isStyleCollapsed = newVal;
-                this.needsDraw = true;
             }
         }
     },
+    _bypassAnimation : {
+        serializable: true,
+        value: false
+    },
+    bypassAnimation : {
+        serializable: true,
+        get: function() {
+                return this._bypassAnimation;
+        },
+        set: function(newVal) {
+                //console.log("timelinetrack bypassAnimation setter " + newVal)
+                this._bypassAnimation = newVal;
+        }
+    },
     
     _arrStyleTracks : {
         serializable:true,
@@ -345,6 +356,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);
             }
@@ -390,7 +402,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.");
                 }
             }
         }
@@ -439,7 +451,7 @@ 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;
             }
@@ -449,15 +461,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     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
-            var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingInt,trackTiming,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;
@@ -490,12 +501,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                             newTween.tweenedProperties["top"] = tempTopOffset;
                             newTween.tweenedProperties["left"] = tempLeftOffset;
                             this.tweens.push(newTween);
-
                         }
                         else {
                             tempTiming = trackTiming.split("s");
-                            tempTimingInt = parseInt(tempTiming[0]);
-                            this.trackDuration = tempTimingInt *1000;
+                            tempTimingFloat = parseFloat(tempTiming[0]);
+                            this.trackDuration = tempTimingFloat *1000;
                             percentValue = this.currentKeyframeRule[i].keyText;
                             splitValue = percentValue.split("%");
                             fraction = splitValue[0] / 100;
@@ -511,8 +521,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                             newTween.tweenedProperties["top"] = tempTopOffset;
                             newTween.tweenedProperties["left"] = tempLeftOffset;
                             this.tweens.push(newTween);
-
-
                         }
                         this.nextKeyframe += 1;
                     }
@@ -554,8 +562,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 var trackDur = parseInt(this.trackDuration);
                 var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%";
                 var keyframePropertyString = " " + keyframePercent + " {";
-                keyframePropertyString += "top: " + this.tweens[i].tweenedProperties["top"] + "px;";
-                keyframePropertyString += " left: " + this.tweens[i].tweenedProperties["left"] + "px;";
+                for(var prop in this.tweens[i].tweenedProperties){
+                    keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;";
+                }
                 keyframePropertyString += "}";
                 keyframeString += keyframePropertyString;
             }
@@ -573,70 +582,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             
             this.arrPositionTracks = [0, 1];
             this.arrTransformTracks = [0, 1, 2, 3, 4];
-            
-            this.label = this.element.querySelector(".label-main");
-            this.myContent = this.element.querySelector(".content-main");
-            this.labelPosition = this.element.querySelector(".label-position");
-            this.contentPosition = this.element.querySelector(".content-position");
-            this.labelTransform = this.element.querySelector(".label-transform");
-            this.contentTransform = this.element.querySelector(".content-transform");
-            this.labelStyles = this.element.querySelector(".label-styles");
-            this.contentStyles = this.element.querySelector(".content-styles");
-
-            this._mainCollapser = Collapser.create();
-            this._mainCollapser.clicker = this.label;
-            this._mainCollapser.myContent = this.myContent;
-            this._mainCollapser.contentHeight = 60;
-            this._mainCollapser.isLabelClickable = false;
-            this._mainCollapser.element = this.myContent;
-            this._mainCollapser.isCollapsed = this.isMainCollapsed;
-            this._mainCollapser.isAnimated = true;
-            this._mainCollapser.labelClickEvent = function () {
-                that.isMainCollapsed = that._mainCollapser.isCollapsed;
-            };
-            //this._mainCollapser.needsDraw = true;
-