1 files changed, 42 insertions, 78 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 72d26e78..c4571e9d 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -9,33 +9,11 @@ var Component = require("montage/ui/component").Component;
 
 var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
+    /* ===- Begin Models ==== */
     hasTemplate:{
         value: true
     },
 
-    prepareForDraw:{
-        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.ninjaStylesContoller = this.application.ninja.stylesController;
-        }
-    },
-
-    draw:{
-        value:function(){
-
-        }
-    },
-
-    didDraw:{
-        value:function () {
-            if(this.currentKeyframeRule){
-                this.retrieveStoredStyleTweens();
-            }
-        }
-    },
-
     trackEditorProperty:{
         value:""
     },
@@ -51,7 +29,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _propTweenRepetition:{
         value:null
     },
-
     propTweenRepetition:{
         get:function () {
             return this._propTweenRepetition;
@@ -64,7 +41,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _propTweens:{
         value:[]
     },
-
     propTweens:{
         serializable:true,
         get:function () {
@@ -78,7 +54,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _propTrackData:{
         value:false
     },
-
     propTrackData:{
         serializable:true,
         get:function () {
@@ -115,7 +90,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _trackID:{
         value:null
     },
-
     trackID:{
         serializable:true,
         get:function () {
@@ -131,7 +105,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _trackType:{
         value:null
     },
-
     trackType:{
         serializable:true,
         get:function () {
@@ -147,7 +120,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     _styleIndex:{
         value:null
     },
-
     styleIndex:{
         serializable:true,
         get:function () {
@@ -174,36 +146,50 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
+    /* ===- End Models ==== */
+
+    /* ===- Begin Draw Cycle ==== */
+    prepareForDraw:{
+        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.ninjaStylesContoller = this.application.ninja.stylesController;
+        }
+    },
+
+    didDraw:{
+        value:function () {
+            if (this.currentKeyframeRule) {
+                this.retrieveStoredStyleTweens();
+            }
+        }
+    },
+    /* ===- End Draw Cycle ==== */
 
+    /* ===- Begin Event Handlers ==== */
     handleClick:{
         value:function (ev) {
             if (ev.shiftKey) {
-
                 if (this.trackType == "position") {
                     this.parentComponent.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
                 }
-
                 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),
                         currentSelectedStyleIndex = this.getCurrentSelectedStyleIndex(selectIndex);
 
                     if (this.trackType == "style") {
-                        //console.log("PropertyTrack.handleClick; selectIndex = ", selectIndex, "; styleIndex = ", currentSelectedStyleIndex)
-                        if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].editorProperty == null) {
+                        if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[currentSelectedStyleIndex].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[currentSelectedStyleIndex].editorProperty;
-                            //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
                         }
                         this.insertPropTween(0);
                         this.addPropAnimationRuleToElement(ev);
                         this.updatePropKeyframeRule();
                     } else if (this.trackType == "position") {
-                        //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
+
                     }
                 } else {
                     this.handleNewPropTween(ev);
@@ -214,31 +200,12 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             }
         }
     },
-    
-    getCurrentSelectedStyleIndex: {
-        value: function(layerIndex) {
-                var returnVal = false,
-                        i = 0,
-                        arrLayerStylesLength = this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles.length;
-                for (i = 0; i < arrLayerStylesLength; i++) {
-                        var currItem =  this.application.ninja.timeline.arrLayers[layerIndex].layerData.arrLayerStyles[i];
-                        if (currItem.isSelected === true) {
-                                returnVal = i;
-                        }
-                }
-                return returnVal;
-        }
-    },
 
     handleNewPropTween:{
         value:function (ev) {
             if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) {
                 this.insertPropTween(ev.offsetX);
             } else {
-                // We will be splitting a tween.  Get the x-coordinate of the mouse click within the target element.
-                // You'd think you could use the event.x info for that, right? NO. We must use page values, calculating offsets and scrolling.
-
-                // Here's an easy function that adds up offsets and scrolls and returns the page x value of an element
                 var findXOffset = function (obj) {
                     var curleft = 0;
                     if (obj.offsetParent) {
@@ -256,6 +223,23 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {