2 files changed, 177 insertions, 61 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 7e9b8a21..2d508b3c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -200,7 +200,7 @@
                                                 "properties" : {
                                                         "element" : {"#" : "content-styles"},
                                                         "myContent" : {"#":"content-styles"},
-                                                        "contentHeight" : 40,
+                                                        "contentHeight" : 0,
                                                         "isLabelClickable" : false,
                                                         "clicker" : {"#" : "label-styles"},
                                                         "isCollapsed" : true,
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index c6b67c9c..e46a5eb0 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -26,8 +26,32 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._trackID;
         },
         set:function (value) {
-            this._trackID = value;
-            //this.needsDraw = true;
+                if (value !== this._trackID) {
+                        this._trackID = value;
+                this.trackData.layerID = value;
+                }
+        }
+    },
+    _isVisible:{
+        value: true
+    },
+
+    isVisible:{
+        get:function(){
+            return this._isVisible;
+        },
+        set:function(value){
+                if (this._isVisible !== value) {
+                        this._isVisible = value;
+                        if (this.element !== null) {
+                                if (value === true) {
+                                        this.element.classList.remove("layer-hidden");
+                                } else {
+                                        this.element.classList.add("layer-hidden");
+                                }
+                        }
+                }
+                this.trackData.isVisible = value;
         }
     },
 
@@ -40,11 +64,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isMainCollapsed;
         },
         set:function (newVal) {
-                this.log('TimelineTrack.js: isMainCollapsed: ', newVal);
-            if (newVal !== this._isMainCollapsed) {
-                this._isMainCollapsed = newVal;
-            }
-
+            this._isMainCollapsed = newVal;
+            this.trackData.isMainCollapsed = newVal;
         }
     },
     _isTransformCollapsed:{
@@ -55,9 +76,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isTransformCollapsed;
         },
         set:function (newVal) {
-            if (newVal !== this._isTransformCollapsed) {
-                this._isTransformCollapsed = newVal;
-            }
+            this._isTransformCollapsed = newVal;
+            this.trackData.isTransformCollapsed = newVal;
         }
     },
     _isPositionCollapsed:{
@@ -68,9 +88,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isPositionCollapsed;
         },
         set:function (newVal) {
-            if (newVal !== this._isPositionCollapsed) {
-                this._isPositionCollapsed = newVal;
-            }
+            this._isPositionCollapsed = newVal;
+            this.trackData.isPositionCollapsed = newVal;
         }
     },
     _isStyleCollapsed:{
@@ -81,9 +100,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             return this._isStyleCollapsed;
         },
         set:function (newVal) {
-            if (newVal !== this._isStyleCollapsed) {
-                this._isStyleCollapsed = newVal;
-            }
+            this._isStyleCollapsed = newVal;
+            this.trackData.isStyleCollapsed = newVal;
         }
     },
     _bypassAnimation : {
@@ -96,8 +114,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 return this._bypassAnimation;
         },
         set: function(newVal) {
-                //console.log("timelinetrack bypassAnimation setter " + newVal)
-                this._bypassAnimation = newVal;
+                if (typeof(this.trackData) !== "undefined") {
+                        this._bypassAnimation = newVal;
+                this.trackData.bypassAnimation = newVal;
+                }
         }
     },
     
@@ -114,7 +134,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrStyleTracks = newVal;
-                //this.needsDraw = true;
+            this.trackData.arrStyleTracks = newVal;
         }
     },
     _styleTracksRepetition: {
@@ -128,7 +148,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._styleTracksRepetition = newVal;
-                //needsDraw = true;
         }
     },
     
@@ -146,7 +165,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrPositionTracks = newVal;
-                //this.needsDraw = true;
+            this.trackData.arrPositionTracks = newVal;
         }
     },
     _positionTracksRepetition: {
@@ -160,7 +179,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._positionTracksRepetition = newVal;
-                //this.needsDraw = true;
         }
     },
     
@@ -179,7 +197,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrTransformTracks = newVal;
-                //this.needsDraw = true;
+            this.trackData.arrTransformTracks = newVal;
         }
     },
     _transformTracksRepetition: {
@@ -193,7 +211,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._transformTracksRepetition = newVal;
-                //this.needsDraw = true;
         }
     },
 
@@ -209,7 +226,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set:function (newVal) {
             this._tweens = newVal;
-            //this.needsDraw=true;
+            this.trackData.tweens = newVal;
         }
     },
 
@@ -243,6 +260,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             if(this._trackDuration > this.application.ninja.timeline.masterDuration){
                 this.application.ninja.timeline.masterDuration = this._trackDuration;
             }
+            this.trackData.trackDuration = val;