4 files changed, 72 insertions, 20 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b23da749..ef51886e 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -606,6 +606,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         newEvent.layerEventLocale = "styles";
                         newEvent.layerEventType = "newStyle";
                         newEvent.layerID = this.layerID;
+            newEvent.styleIndex = this._styleCounter;
                         newEvent.styleID = this.layerID + "@" + this._styleCounter;
                         
                         newStyle.styleID = newEvent.styleID;
@@ -629,7 +630,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         }
                         
                         // Set up the event info and dispatch the event
-
+            this._styleCounter += 1;
                         newEvent.styleSelection = mySelection;
                         defaultEventManager.dispatchEvent(newEvent);
 
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 60da4e71..f2dbd683 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -27,6 +27,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
+    trackEditorProperty:{
+        value:""
+    },
+
     _propTweenRepetition:{
         value:null
     },
@@ -68,6 +72,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     },
 
     propTrackData:{
+        serializable:true,
         get:function () {
             return this._propTrackData;
         },
@@ -79,19 +84,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
-    setData:{
-        value:function(){
-            if (typeof(this.propTrackData) === "undefined") {
-                return;
-            }
-
-
-            this.propTweens = this.propTrackData.propTweens;
-
-            this.needsDraw = true;
-        }
-    },
-
     nextKeyframe:{
         value:1
     },
@@ -108,16 +100,66 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         set:function (value) {
             if (value !== this._trackID) {
                 this._trackID = value;
-                this.propTrackData.layerID = value;
             }
         }
     },
 
+    _styleSelection:{
+        value:null
+    },
+
+    styleSelection:{
+        serializable:true,
+        get:function () {
+            return this._styleSelection;
+        },
+        set:function (value) {
+            if (value !== this._styleSelection) {
+                this._styleSelection = value;
+            }
+        }
+    },
+
+    _styleIndex:{
+        value:null
+    },
+
+    styleIndex:{
+        serializable:true,
+        get:function () {
+            return this._styleIndex;
+        },
+        set:function (value) {
+            if (value !== this._styleIndex) {
+                this._styleIndex = value;
+            }
+        }
+    },
+
+    setData:{
+        value:function () {
+            if (typeof(this.propTrackData) === "undefined") {
+                return;
+            }
+
+            this.styleIndex = this.propTrackData.styleIndex;
+            this.propTweens = this.propTrackData.propTweens;
+            this.styleSelection = this.propTrackData.styleSelection;
+            this.needsDraw = true;
+        }
+    },
+
     handleClick:{
         value:function(ev){
-            //console.log(this.application.ninja.timeline.arrLayers[selectedIndex].layerData);
             if (ev.shiftKey) {
                 if (this.propTweens.length < 1) {
+
+                    // check if there is an editor property assigned yet
+                    // get this property track's editor prop name from layer data arrays
+                    var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+                    console.log(this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles);
+                    console.log(this.styleIndex);
+
                     this.insertPropTween(0);
                     this.addPropAnimationRuleToElement(ev);
                     this.updatePropKeyframeRule();
@@ -137,8 +179,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     insertPropTween:{
         value:function(clickPos){
-            var parentTrackID = this.parentComponent.parentComponent.parentComponent.trackID;
-            var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(parentTrackID);
+            var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
             this.application.ninja.timeline.selectLayer(selectedIndex, true);
 
             var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index de2969bb..ed013505 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -72,7 +72,7 @@
                                         "element":{"#": "style-track-base"}
                                 },
                         "bindings" : {
-                            "trackData" : {
+                            "propTrackData" : {
                                     "boundObject" : {"@" : "styleTrackRepetition"},
                                     "boundObjectPropertyPath" : "objectAtCurrentIteration.propTrackData",
                                     "oneway" : false
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 000c81e2..8bb00990 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -710,7 +710,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();