1 files changed, 390 insertions, 65 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 87a5e156..fc88b779 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -147,6 +147,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value: null
     },
     styleTracksRepetition : {
+        serializable:true,
         get: function() {
                 return this._styleTracksRepetition;
         },
@@ -200,17 +201,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.trackData.arrTransformTracks = newVal;
         }
     },
-    _transformTracksRepetition: {
-        value: null
-    },
-    transformTracksRepetition : {
-        get: function() {
-                return this._transformTracksRepetition;
-        },
-        set: function(newVal) {
-                this._transformTracksRepetition = newVal;
-        }
-    },
 
     _tweens:{
         value:[]
@@ -233,10 +223,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     tweenRepetition:{
         get:function () {
-            return this._spanRepetition;
+            return this._tweenRepetition;
         },
         set:function (newVal) {
-            this._spanRepetition = newVal;
+            this._tweenRepetition = newVal;
         }
     },
 
@@ -341,6 +331,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    _ruleList:{
+        value:[]
+    },
+
+    ruleList:{
+        get:function () {
+            return this._ruleList;
+        },
+        set:function (val) {
+            this._ruleList = val;
+        }
+    },
+
+    animationNamesString:{
+        value:""
+    },
+
     ninjaStylesContoller:{
         value:null
     },
@@ -394,6 +401,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+        // Drag and Drop properties
+    _dragAndDropHelper : {
+        value: false
+    },
+    _dragAndDropHelperCoords: {
+        value: false
+    },
+    dragAndDropHelperCoords: {
+        get: function() {
+                return this._dragAndDropHelperCoords;
+        },
+        set: function(newVal) {
+                this._dragAndDropHelperCoords = newVal;
+        }
+    },
+    _draggingIndex: {
+        value: false
+    },
+    draggingIndex: {
+        get: function() {
+                return this._draggingIndex;
+        },
+        set: function(newVal) {
+                this._draggingIndex = newVal;
+        }
+    },
+    _dragAndDropHelperOffset : {
+        value: false
+    },
+    _appendHelper: {
+        value: false
+    },
+    _deleteHelper: {
+        value: false
+    },
+
     _trackData:{
                 value: false
     },
@@ -423,7 +466,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.bypassAnimation = this.trackData.bypassAnimation;
             this.trackID = this.trackData.layerID;
             this.tweens = this.trackData.tweens;
-            this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction
+            this.animatedElement = this.trackData.animatedElement;
             this.arrStyleTracks = this.trackData.arrStyleTracks;
             this.isTrackAnimated = this.trackData.isTrackAnimated;
             this.trackDuration = this.trackData.trackDuration;
@@ -435,6 +478,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.isStyleCollapsed = this.trackData.isStyleCollapsed;
             this.trackPosition = this.trackData.trackPosition;
             this.isVisible = this.trackData.isVisible;
+            this.trackEditorProperty = "master";
             this.needsDraw = true;
         }
     },
@@ -488,6 +532,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.ninjaStylesContoller = this.application.ninja.stylesController;
             this.element.addEventListener("click", this, false);
             this.eventManager.addEventListener("tlZoomSlider", this, false);
+            
+            // Drag and Drop event handlers 
+                        //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+                        this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
+                        this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
+                        //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
         }
     },
 
@@ -496,11 +546,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.ninjaStylesContoller = this.application.ninja.stylesController;
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
             if (selectedIndex !== false) {
-                    if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){
-                        this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
+                    if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement){
+                        this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.stageElement;
                     }
             }
 
+                // Drag and Drop:
+                // Do we have a helper to append?
+            if (this._appendHelper === true) {
+                this.track_lanes.appendChild(this._dragAndDropHelper);
+                this._appendHelper = false;
+            }
+            // Do we need to move the helper?
+                if (this._dragAndDropHelperCoords !== false) {
+                        if (this._dragAndDropHelper !== null) {
+                                if (typeof(this._dragAndDropHelper.style) !== "undefined") {
+                                        this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
+                                }
+                        }
+                        this._dragAndDropHelperCoords = false;
+                }
+                // Do we have a helper to delete?
+                if (this._deleteHelper === true) {
+                        if (this._dragAndDropHelper === null) {
+                                // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
+                                // Try and recover the helper so we can delete it.
+                                var myHelper = this.element.querySelector(".track-dnd-helper");
+                                if (myHelper != null) {
+                                        this._dragAndDropHelper = myHelper;
+                                }
+                        }
+                    if (this._dragAndDropHelper !== null) {
+                        // We need to delete the helper.  Can we delete it from track_lanes?
+                        if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
+                                this.track_lanes.removeChild(this._dragAndDropHelper);
+                                this._dragAndDropHelper = null;
+                                this._deleteHelper = false;
+                        }
+                    }
+                }
+
         }
     },
 
@@ -512,11 +597,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {