1 files changed, 314 insertions, 29 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index efeeba00..6066066a 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -31,6 +31,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 }
         }
     },
+    
+    _isFirstDraw: {
+        value: true
+    },
+    
     _isVisible:{
         value: true
     },
@@ -136,6 +141,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value: null
     },
     styleTracksRepetition : {
+        serializable:true,
         get: function() {
                 return this._styleTracksRepetition;
         },
@@ -185,17 +191,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:[]
@@ -218,10 +213,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;
         }
     },
 
@@ -326,6 +321,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    animationNamesString:{
+        value:""
+    },
+
     ninjaStylesContoller:{
         value:null
     },
@@ -343,6 +342,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value:null
     },
 
+        // 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
     },
@@ -371,7 +406,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;
@@ -419,6 +454,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);
         }
     },
 
@@ -432,6 +473,41 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                     }
             }
 
+                // 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;
+                        }
+                    }
+                }
+
         }
     },
 
@@ -443,11 +519,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                     if (selectedIndex !== false) {
                             if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
                                 this.retrieveStoredTweens();
-
                             }
                     }
                 }
             }
+            
+                if (this._isFirstDraw === true) {
+                        
+                        if (this.isMainCollapsed === false) {
+                                        this._mainCollapser.myContent.style.height = "auto";
+                                        this._mainCollapser.myContent.classList.remove(this._mainCollapser.collapsedClass);
+                                        this._