10 files changed, 230 insertions, 645 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 33029e9e..b2683d30 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -33,26 +33,17 @@ 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
-    },
+    /* Begin: Models */
 
     _propTweenRepetition:{
         value:null
     },
+
     propTweenRepetition:{
         get:function () {
             return this._propTweenRepetition;
@@ -65,6 +56,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _propTweens:{
         value:[]
     },
+
     propTweens:{
         serializable:true,
         get:function () {
@@ -78,6 +70,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _propTrackData:{
         value:false
     },
+
     propTrackData:{
         serializable:true,
         get:function () {
@@ -90,30 +83,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 () {
@@ -129,6 +102,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _trackType:{
         value:null
     },
+
     trackType:{
         serializable:true,
         get:function () {
@@ -144,6 +118,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _styleIndex:{
         value:null
     },
+
     styleIndex:{
         serializable:true,
         get:function () {
@@ -156,6 +131,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") {
@@ -170,40 +181,51 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
-    /* ===- End Models ==== */
 
-    /* ===- Begin Draw Cycle ==== */
+    /* 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 ==== */
+    /* End: Draw Cycle */
+
+    /* Begin: Event Handlers */
+
     handleClick:{
         value:function (ev) {
+
+            var selectIndex ,
+                currentSelectedStyleIndex;
+
             if (ev.shiftKey) {
+