2 files changed, 30 insertions, 8 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index d416de5f..dc32d44d 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -53,7 +53,6 @@
                                }
                            }
                    },
-
                    "styleTrackRepetition": {
                        "prototype": "montage/ui/repetition.reel",
                            "properties": {
@@ -68,6 +67,19 @@
                                }
                            }
                    },
+                   "stylePropertyTrack" : {
+                        "prototype" : "js/panels/Timeline/PropertyTrack.reel",
+                                "properties" : {
+                                        "element":{"#": "style-track-base"}
+                                },
+                        "bindings" : {
+                            "propTrackData" : {
+                                    "boundObject" : {"@" : "styleTrackRepetition"},
+                                    "boundObjectPropertyPath" : "objectAtCurrentIteration.propTrackData",
+                                    "oneway" : false
+                                }
+                        }
+                   },
                    "positionTracksRepetition": {
                        "prototype": "montage/ui/repetition.reel",
                            "properties": {
@@ -237,7 +249,7 @@
                         
                 </div>
                 <div data-montage-id="content-styles" class="content-styles collapsible-content collapsible-collapsed">
-                        <div class="timeline-track"></div>
+                        <div data-montage-id="style-track-base"></div>
                 </div>
             </div>
         </div>
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 836bb60f..63f2f957 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -223,10 +223,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     tweenRepetition:{
         get:function () {
-            return this._spanRepetition;
+            return this._tweenRepetition;
         },
         set:function (newVal) {
-            this._spanRepetition = newVal;
+            this._tweenRepetition = newVal;
         }
     },
 
@@ -393,7 +393,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.bypassAnimation = this.trackData.bypassAnimation;
             this.trackID = this.trackData.layerID;
             this.tweens = this.trackData.tweens;
-            this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction
+            this.animatedElement = this.trackData.animatedElement;
             this.arrStyleTracks = this.trackData.arrStyleTracks;
             this.isTrackAnimated = this.trackData.isTrackAnimated;
             this.trackDuration = this.trackData.trackDuration;
@@ -518,7 +518,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                     if (selectedIndex !== false) {
                             if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
                                 this.retrieveStoredTweens();
-
                             }
                     }
                 }
@@ -609,6 +608,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                         this.updateKeyframeRule();
                     }
                 } else {
+                    // TEMP error check
                     console.log("There must be exactly one element in an animated layer.");
                 }
             }
@@ -630,7 +630,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     insertTween:{
         value:function (clickPos) {
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
-                        this.application.ninja.timeline.selectLayer(selectedIndex, true);
+            this.application.ninja.timeline.selectLayer(selectedIndex, true);
 
             var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
             var currentMillisec = currentMillisecPerPixel * clickPos;
@@ -813,7 +813,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             }
             if (layerEvent.layerEventType === "newStyle") {
                 // TODO: Add a real track of tweens.  Probably need a method for that.
-                this.arrStyleTracks.push("1");
+
+                var newStyleTrack = {};
+                newStyleTrack.propTrackData = {};
+                newStyleTrack.propTrackData.styleSelection = layerEvent.styleSelection;
+                newStyleTrack.propTrackData.propTweens = [];
+                newStyleTrack.propTrackData.styleIndex = layerEvent.styleIndex;
+                console.log(layerEvent.styleSelection);
+                console.log(layerEvent.styleIndex);
+
+                this.arrStyleTracks.push(newStyleTrack);
+
             } else if (layerEvent.layerEventType === "deleteStyle") {
                 // TODO: Delete the right track.  Index can be passed in event object, use that for splice().
                 this.arrStyleTracks.pop();