11 files changed, 682 insertions, 478 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index c4571e9d..de2e5bb5 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -9,26 +9,14 @@ var Component = require("montage/ui/component").Component;
 
 var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
-    /* ===- Begin Models ==== */
     hasTemplate:{
         value: true
     },
 
-    trackEditorProperty:{
-        value:""
-    },
-
-    animatedElement:{
-        value:null
-    },
-
-    isSubproperty:{
-        value:true
-    },
-
     _propTweenRepetition:{
         value:null
     },
+
     propTweenRepetition:{
         get:function () {
             return this._propTweenRepetition;
@@ -41,6 +29,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _propTweens:{
         value:[]
     },
+
     propTweens:{
         serializable:true,
         get:function () {
@@ -54,6 +43,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _propTrackData:{
         value:false
     },
+
     propTrackData:{
         serializable:true,
         get:function () {
@@ -66,30 +56,10 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             }
         }
     },
-
-    nextKeyframe:{
-        value:1
-    },
-
-    ninjaStylesContoller:{
-        value:null
-    },
-
-    animationName:{
-        value:null
-    },
-
-    currentKeyframeRule:{
-        value:null
-    },
-
-    trackDuration:{
-        value:0
-    },
-
     _trackID:{
         value:null
     },
+
     trackID:{
         serializable:true,
         get:function () {
@@ -105,6 +75,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _trackType:{
         value:null
     },
+
     trackType:{
         serializable:true,
         get:function () {
@@ -120,6 +91,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _styleIndex:{
         value:null
     },
+
     styleIndex:{
         serializable:true,
         get:function () {
@@ -132,6 +104,42 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
+    trackEditorProperty:{
+        value:""
+    },
+
+    animatedElement:{
+        value:null
+    },
+
+    isSubproperty:{
+        value:true
+    },
+
+    nextKeyframe:{
+        value:1
+    },
+
+    ninjaStylesContoller:{
+        value:null
+    },
+
+    animationName:{
+        value:null
+    },
+
+    currentKeyframeRule:{
+        value:null
+    },
+
+    trackDuration:{
+        value:0
+    },
+
+    timelineTrack:{
+        value:null
+    },
+
     setData:{
         value:function () {
             if (typeof(this.propTrackData) === "undefined") {
@@ -146,40 +154,42 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
-    /* ===- End Models ==== */
 
-    /* ===- Begin Draw Cycle ==== */
     prepareForDraw:{
-        value:function () {
+        value:function(){
             this.element.addEventListener("click", this, false);
-            this.trackID = this.parentComponent.parentComponent.parentComponent.parentComponent.trackID;
-            this.animatedElement = this.parentComponent.parentComponent.parentComponent.parentComponent.animatedElement;
+            this.timelineTrack = this.parentComponent.parentComponent.parentComponent.parentComponent;
+            this.trackID = this.timelineTrack.trackID;
+            this.animatedElement = this.timelineTrack.animatedElement;
             this.ninjaStylesContoller = this.application.ninja.stylesController;
         }
     },
 
     didDraw:{
         value:function () {
-            if (this.currentKeyframeRule) {
+            if(this.currentKeyframeRule){
                 this.retrieveStoredStyleTweens();
             }
         }
     },
-    /* ===- End Draw Cycle ==== */
 
-    /* ===- Begin Event Handlers ==== */
     handleClick:{
         value:function (ev) {
+
+            var selectIndex , currentSelectedStyleIndex;
             if (ev.shiftKey) {
+
                 if (this.trackType == "position") {
-                    this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
+                    this.timelineTrack.handleNewTween(ev);
                 }