2 files changed, 96 insertions, 104 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 1cc05f4e..7e9b8a21 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -32,44 +32,9 @@
                                         "element":{"#": "track_lane"}
                                 },
                                                 "bindings" : {
-                           "spanWidth" : {
+                           "tweenData" : {
                                "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.spanWidth",
-                               "oneway" : false
-                           },
-                           "keyFramePosition" : {
-                               "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFramePosition",
-                               "oneway" : false
-                           },
-                           "spanPosition" : {
-                               "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition",
-                               "oneway" : false
-                           },
-                           "keyFrameMillisec" : {
-                               "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec",
-                               "oneway" : false
-                           },
-                           "tweenID" : {
-                               "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID",
-                               "oneway" : false
-                           },
-                           "tweenedProperties" : {
-                               "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties",
-                               "oneway" : false
-                           },
-                           "isTweenAnimated" : {
-                               "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated",
-                               "oneway" : false
-                           },
-                           "isClearing" : {
-                               "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing",
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData",
                                "oneway" : false
                            }
                        }
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 669dabef..c6b67c9c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -27,7 +27,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set:function (value) {
             this._trackID = value;
-            this.needsDraw = true;
+            //this.needsDraw = true;
         }
     },
 
@@ -114,7 +114,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrStyleTracks = newVal;
-                this.needsDraw = true;
+                //this.needsDraw = true;
         }
     },
     _styleTracksRepetition: {
@@ -128,7 +128,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._styleTracksRepetition = newVal;
-                this.needsDraw = true;
+                //needsDraw = true;
         }
     },
     
@@ -146,7 +146,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrPositionTracks = newVal;
-                this.needsDraw = true;
+                //this.needsDraw = true;
         }
     },
     _positionTracksRepetition: {
@@ -160,7 +160,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._positionTracksRepetition = newVal;
-                this.needsDraw = true;
+                //this.needsDraw = true;
         }
     },
     
@@ -179,7 +179,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrTransformTracks = newVal;
-                this.needsDraw = true;
+                //this.needsDraw = true;
         }
     },
     _transformTracksRepetition: {
@@ -193,7 +193,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._transformTracksRepetition = newVal;
-                this.needsDraw = true;
+                //this.needsDraw = true;
         }
     },
 
@@ -209,7 +209,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set:function (newVal) {
             this._tweens = newVal;
-            this.needsDraw=true;
+            //this.needsDraw=true;
         }
     },
 
@@ -345,6 +345,44 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     _styleCollapser:{
         value:null
     },
+
+    _trackData:{
+
+    },
+
+    trackData:{
+        serializable:true,
+        get:function(){
+            return this._trackData;
+        },
+        set:function(val){
+            this._trackData = val;
+            if(this._trackData){
+                this.setData();
+            }
+        }
+    },
+
+    setData:{
+        value:function(){
+            this.trackID = this.trackData.layerID;
+            this.tweens = this.trackData.tweens;
+            this.animatedElement = this.trackData.animatedElement;
+            this.arrStyleTracks = this.trackData.arrStyleTracks;
+            this.isTrackAnimated = this.trackData.isTrackAnimated;
+            this.trackDuration = this.trackData.trackDuration;
+            this.animationName = this.trackData.animationName;
+            this.currentKeyframeRule = this.trackData.currentKeyframeRule;
+            this.isMainCollapsed = this.trackData.isMainCollapsed;
+            this.isPositionCollapsed = this.trackData.isPositionCollapsed;
+            this.isTransformCollapsed = this.trackData.isTransformCollapsed;
+            this.bypassAnimation = this.trackData.bypassAnimation;
+            this.isStyleCollapsed = this.trackData.isStyleCollapsed;
+            this.trackPosition = this.trackData.trackPosition;
+            this.needsDraw = true;
+        }
+    },
+
     prepareForDraw:{
         value:function () {
             this.init();
@@ -356,20 +394,10 @@ 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);
-            }
-            if (this._positionCollapser.isCollapsed !== this.isPositionCollapsed) {
-                this._positionCollapser.toggle(false);
-            }
-            if (this._transformCollapser.isCollapsed !== this.isTransformCollapsed) {
-                this._transformCollapser.toggle(false);
-            }
-            if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) {
-                this._styleCollapser.toggle(false);
+            var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+            if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){
+                this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];