1 files changed, 245 insertions, 139 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index a12128ff..35aa1dc5 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -34,44 +34,12 @@ var Component = require("montage/ui/component").Component;
 
 var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
+
     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:""
-    },
-
-    animatedElement:{
-        value:null
-    },
-
-    isSubproperty:{
-        value:true
-    },
+    /* Begin: Models */
 
     _propTweenRepetition:{
         value:null
@@ -116,27 +84,6 @@ 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
     },
@@ -185,6 +132,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") {
@@ -200,35 +183,72 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
+    /* End: Models */
+
+    /* Begin: Draw Cycle */
+    prepareForDraw:{
+        value:function(){
+            this.element.addEventListener("click", this, false);
+            this.timelineTrack = this.parentComponent.parentComponent.parentComponent.parentComponent;
+            this.trackID = this.timelineTrack.trackID;
+            this.animatedElement = this.timelineTrack.animatedElement;
+            this.ninjaStylesContoller = this.application.ninja.stylesController;
+            this.eventManager.addEventListener("tlZoomSlider", this, false);
+            
+                        // Drag and Drop event handlers
+            this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
+            this.element.addEventListener("dragend", this.handleKeyframeDragstart.bind(this), false);
+            this.element.addEventListener("drop", this.handleKeyframeDragstart.bind(this), false);
+        }
+    },
+
+    didDraw:{
+        value:function () {
+            if(this.currentKeyframeRule){
+                this.retrieveStoredStyleTweens();
+            }
+        }
+    },
+
+    /* End: Draw Cycle */
+
+    /* Begin: Event Handlers */
+   
+    handleKeyframeDragstart: {
+        value: function(event) {
+            event.stopPropagation();
+            return false;
+        }
+    },
+
     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);
                 }
 
                 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);
+                    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) {
                             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();