4 files changed, 188 insertions, 129 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index b0d191c2..4808e4d8 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -11,7 +11,8 @@
                        "properties": {
                            "element": {"#": "track"},
                            "tweenRepetition" : {"@" : "tweenRepetition"},
-                           "track_lane": {"#": "track_lanes"}
+                           "styleTracksRepetition" : {"@" : "styleTracksRepetition"},
+                           "tween": {"@" : "tween"}
                        }
                    },
 
@@ -37,19 +38,24 @@
                                "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition",
                                "oneway" : false
                            },
-                           "timelineTrack" : {
+                           "keyFrameMillisec" : {
                                "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.timelineTrack",
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec",
                                "oneway" : false
                            },
-                           "keyFrameMillisec" : {
+                           "tweenID" : {
                                "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec",
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID",
                                "oneway" : false
                            },
-                           "keyframeID" : {
+                           "tweenedProperties" : {
                                "boundObject" : {"@": "tweenRepetition"},
-                               "boundObjectPropertyPath" : "objectAtCurrentIteration.keyframeID",
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties",
+                               "oneway" : false
+                           },
+                           "isTweenAnimated" : {
+                               "boundObject" : {"@": "tweenRepetition"},
+                               "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated",
                                "oneway" : false
                            }
                        }
@@ -69,7 +75,25 @@
                                    "oneway": false
                                }
                            }
+                   },
+
+                   "styleTrackRepetition": {
+                       "module": "montage/ui/repetition.reel",
+                           "name": "Repetition",
+                           "properties": {
+                               "element": {"#": "content-styles"},
+                               "isSelectionEnabled" : false
+                           },
+                           "bindings": {
+                               "objects": {
+                                   "boundObject": {"@": "owner"},
+                                   "boundObjectPropertyPath": "arrStyleTracks",
+                                   "oneway": false
+                               }
+                           }
                    }
+                   
+                   
                }
            </script>
         </head>
@@ -102,8 +126,8 @@
                 <div class="label-styles collapsible-label collapsible-collapsed">
                         
                 </div>
-                <div class="content-styles collapsible-content collapsible-collapsed">
-                        
+                <div id="content-styles" class="content-styles collapsible-content collapsible-collapsed">
+                        <div class="timeline-track"></div>
                 </div>
             </div>
         </div>
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 62688825..1c33a040 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -10,10 +10,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     },
 
     _trackID:{
-        value:null,
-        writable:true,
         serializable:true,
-        enumerable:true
+        value:null
     },
 
     trackID:{
@@ -85,21 +83,50 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             }
         }
     },
-
-    _tweens:{
+    
+    _arrStyleTracks : {
         serializable:true,
         enumerable:true,
+        value: []
+    },
+    arrStyleTracks: {
+        serializable:true,
+        enumerable:true,
+        get: function() {
+                return this._arrStyleTracks;
+        },
+        set: function(newVal) {
+                this._arrStyleTracks = newVal;
+                this.needsDraw = true;
+        }
+    },
+    _styleTracksRepetition: {
+        serializable: true,
+        value: null
+    },
+    styleTracksRepetition : {
+        serializable: true,
+        get: function() {
+                return this._styleTracksRepetition;
+        },
+        set: function(newVal) {
+                this._styleTracksRepetition = newVal;
+                this.needsDraw = true;
+        }
+    },
+
+    _tweens:{
+        enumerable: false,
         value:[]
     },
 
     tweens:{
         serializable:true,
-        enumerable:true,
         get:function () {
-            return this._spans;
+            return this._tweens;
         },
         set:function (newVal) {
-            this._spans = newVal;
+            this._tweens = newVal;
         }
     },
 
@@ -118,14 +145,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    _trackDuration:{
+        serializable: true,
+        value:0
+    },
+
     trackDuration:{
+        serializable:true,
+        get:function () {
+            return this._trackDuration;
+        },
+        set:function (val) {
+            this._trackDuration = val;
+        }
+    },
+
+    _trackPosition:{
+        serializable:true,
         value:0
     },
 
-    currentKeyframeRule:{
+    trackPosition:{
+        serializable:true,
+        get:function () {
+            return this._trackPosition;
+        },
+        set:function (val) {