4 files changed, 68 insertions, 20 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index c9dd5328..9fb33956 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -60,7 +60,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         }
     },
     _styleCounter : {
-        value: 0
+        value: 4
     },
     styleCounter:{
         serializable:true,
@@ -557,7 +557,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         // Or at the end, if no rule is selected.
 
                         var newLength = 0, 
-                                mySelection = 0,
+                                // mySelection = 0,
                                 // newStyle = LayerStyle.create(),
                                 newStyle = {},
                                 newEvent = document.createEvent("CustomEvent");
@@ -571,7 +571,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         newEvent.layerEventType = "newStyle";
                         newEvent.layerID = this.layerID;
             newEvent.styleIndex = this.styleCounter;
-                        newEvent.styleID = this.layerID + "@" + this.styleCounter;
+                        newEvent.styleID = this.layerID + "@" + this.styleCounter; // is this property needed?
                         
                         newStyle.styleID = newEvent.styleID;
                         newStyle.whichView = "hintable";
@@ -583,7 +583,7 @@ var Layer = exports.Layer = Montage.create(Component, {
 
                         // Set up the event info and dispatch the event
             this.styleCounter += 1;
-                        newEvent.styleSelection = mySelection;
+                        // 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 3c648642..8316540b 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -24,7 +24,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     draw:{
         value:function(){
-
+            console.log(this.trackType);
         }
     },
 
@@ -105,18 +105,18 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
-    _styleSelection:{
+    _trackType:{
         value:null
     },
 
-    styleSelection:{
+    trackType:{
         serializable:true,
         get:function () {
-            return this._styleSelection;
+            return this._trackType;
         },
         set:function (value) {
-            if (value !== this._styleSelection) {
-                this._styleSelection = value;
+            if (value !== this._trackType) {
+                this._trackType = value;
             }
         }
     },
@@ -145,7 +145,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
             this.styleIndex = this.propTrackData.styleIndex;
             this.propTweens = this.propTrackData.propTweens;
-            this.styleSelection = this.propTrackData.styleSelection;
+            this.trackType = this.propTrackData.trackType;
             this.needsDraw = true;
         }
     },
@@ -153,21 +153,29 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     handleClick:{
         value:function(ev){
             if (ev.shiftKey) {
+                console.log(this.trackType);
                 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);
 
-                    if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) {
-                        console.log("Please enter a style property for this track before adding keyframes.");
-                        return;
-                    } else {
-                        this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty;
-                        console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+                    if (this.trackType === "style") {
+                        if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) {
+                            console.log("Please enter a style property for this track before adding keyframes.");
+                            return;
+                        } else {
+                            this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty;
+                            console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+                        }
+                    } else if (this.trackType === "position") {
+                        console.log("clicking on position track");
+
+                        console.log(this.trackEditorProperty);
                     }
 
 
+
                     this.insertPropTween(0);
                     this.addPropAnimationRuleToElement(ev);
                     this.updatePropKeyframeRule();
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 3f3bf24a..b666f921 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -98,7 +98,14 @@
                                                 "prototype" : "js/panels/Timeline/PropertyTrack.reel",
                                                 "properties" : {
                                                         "element":{"#": "position-track-base"}
-                                                }
+                                                },
+                        "bindings" : {
+                            "propTrackData" : {
+                                 "boundObject" : {"@" : "positionTracksRepetition"},
+                                 "boundObjectPropertyPath" : "objectAtCurrentIteration.propTrackData",
+                                 "oneway" : false
+                            }
+                        }
                                         },
                                         
                                         "mainCollapser" : {
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 891feada..2ce1a637 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -801,8 +801,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
             // create track objects for position and transform tracks and push into arrays instead of dummy arrays
 
-            //this.createPositionTracks();
-            this.arrPositionTracks = [0, 1, 2, 3];
+            this.createPositionTracks();
+            //this.arrPositionTracks = [0, 1, 2, 3];
 
             // get rid of transform tracks
             //this.arrTransformTracks = [0, 1, 2, 3, 4];
@@ -816,6 +816,38 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     createPositionTracks:{
         value:function(){
             // create track objects for position and transform tracks and push into arrays
+
+            // create 'top' track
+            var newTopTrack = {};
+            newTopTrack.propTrackData = {};
+            newTopTrack.propTrackData.propTweens = [];
+            newTopTrack.propTrackData.styleIndex = 0;
+            newTopTrack.propTrackData.trackType = "position";
+            this.arrPositionTracks.push(newTopTrack);
+
+            // create 'left' track
+            var newLeftTrack = {};
+            newLeftTrack.propTrackData = {};
+            newLeftTrack.propTrackData.propTweens = [];
+            newLeftTrack.propTrackData.styleIndex = 1;
+            newLeftTrack.propTrackData.trackType = "position";
+            this.arrPositionTracks.push(newLeftTrack);
+
+            // create 'width' track
+            var newWidthTrack = {};
+            newWidthTrack.propTrackData = {};
+            newWidthTrack.propTrackData.propTweens = [];
+            newWidthTrack.propTrackData.styleIndex = 2;
+            newWidthTrack.propTrackData.trackType = "position";