1 files changed, 92 insertions, 45 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a82d3373..110f0336 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -305,9 +305,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // Clear for future DnD
                         this._dropLayerID = null;
                         this._dragLayerID = null;
+                        
+                        // Sometimes, just to be fun, the drop and dragend events don't fire.
+                        // So just in case, set the draw routine to delete the helper.
+                        this._deleteHelper = true;
+                        this.needsDraw = true;
                 }
         }
     },
+    _appendHelper: {
+        value: false
+    },
+    _deleteHelper: {
+        value: false
+    },
+    _scrollTracks: {
+        value: false
+    },
     /* === END: Models === */
     /* === BEGIN: Draw cycle === */
     prepareForDraw:{
@@ -329,7 +343,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     willDraw:{
         value:function () {
             if (this._isLayer) {
-              //  this.createNewLayer();
                 this._isLayer = false;
             }
         }
@@ -351,6 +364,31 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         }
                         this._dragAndDropHelperCoords = false;
                 }
+                // Do we need to scroll the tracks?
+                if (this._scrollTracks !== false) {
+                        this.layout_tracks.scrollTop = this._scrollTracks;
+                        this._scrollTracks = 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.container_layers.querySelector(".timeline-dnd-helper");
+                                if (myHelper != null) {
+                                        this._dragAndDropHelper = myHelper;
+                                }
+                        }
+                    if (this._dragAndDropHelper !== null) {
+                        // We need to delete the helper.  Can we delete it from container_layers?
+                        if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
+                                this.container_layers.removeChild(this._dragAndDropHelper);
+                                this._dragAndDropHelper = null;
+                                this._deleteHelper = false;
+                        }
+                    } 
+                    
+                }
         }
     },
     /* === END: Draw cycle === */
@@ -702,41 +740,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     createNewLayer:{
         value:function (object) {
-            var hashVariable = 0;
+            var hashVariable = 0,
+                newLayerName = "",
+                thingToPush = this.createLayerTemplate(),
+                myIndex = 0,
+                i = 0,
+                arrLayersLength = this.arrLayers.length;
 
-                var newLayerName = "",
-                    thingToPush = this.createLayerTemplate(),
-                    myIndex = 0;
+            this.currentLayerNumber = this.currentLayerNumber + 1;
+            newLayerName = "Layer " + this.currentLayerNumber;
+            thingToPush.layerData.layerName = newLayerName;
+            thingToPush.layerData.layerID = this.currentLayerNumber;
+            thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
+            thingToPush.layerData.isSelected = true;
+            thingToPush.layerData._isFirstDraw = true;
+            thingToPush.layerData.created = true;
+
+            for (i = 0; i < this.arrLayersLength; i++) {
+                this.arrLayers[i].layerData.isSelected = false;
+                this.arrLayers[i].layerData._isFirstDraw = false;
+            }
 
-                this.currentLayerNumber = this.currentLayerNumber + 1;
-                newLayerName = "Layer " + this.currentLayerNumber;
-                thingToPush.layerData.layerName = newLayerName;
-                thingToPush.layerData.layerID = this.currentLayerNumber;
-                thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
-                thingToPush.layerData.isSelected = true;
-                thingToPush.layerData._isFirstDraw = true;
-                thingToPush.layerData.created = true;
+            if (this.layerRepetition.selectedIndexes) {
+                // There is a selected layer, so we need to splice the new layer on top of it.
+                myIndex = this.layerRepetition.selectedIndexes[0];
+                thingToPush.layerData.layerPosition = myIndex;
+                thingToPush.layerData.trackPosition = myIndex;
+                this.arrLayers.splice(myIndex, 0, thingToPush);
 
-                for (var i = 0; i < this.arrLayers.length; i++) {
-                    this.arrLayers[i].layerData.isSelected = false;
-                    this.arrLayers[i].layerData._isFirstDraw = false;
-                }
+            } else {
+                thingToPush.layerData.layerPosition = myIndex;
+                this.arrLayers.splice(myIndex, 0, thingToPush);
 
-                if (this.layerRepetition.selectedIndexes) {
-                    // There is a selected layer, so we need to splice the new layer on top of it.
-                    myIndex = this.layerRepetition.selectedIndexes[0];
-                    thingToPush.layerData.layerPosition = myIndex;
-                    thingToPush.layerData.trackPosition = myIndex;
-                    this.arrLayers.splice(myIndex, 0, thingToPush);
+            }
 
-                } else {
-                    thingToPush.layerData.layerPosition = myIndex;
-                    this.arrLayers.splice(myIndex, 0, thingToPush);
+            this.selectLayer(myIndex);
 
-                }
-
-                this.selectLayer(myIndex);
-//            }
         }
     },
 
@@ -1032,6 +1071,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             // Get the offset 
                 var findYOffset = function(obj) {
                                 var curleft = curtop = 0;
+                                
                                 if (obj.offsetParent) {
                                         do {
                                                         curleft += obj.offsetLeft;
@@ -1043,37 +1083,44 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
                 this._dragAndDropHelperOffset = findYOffset(this.container_layers);
                 this._appendHelper = true;
-            // this.container_layers.appendChild(this._dragAndDropHelper);
+                this._deleteHelper = false;
         }
     },
     handleLayerDragover: {
         value: function(event) {
-                var currPos = 0;
-                currPos = event.y - this._dragAndDropHelperOffset -28;
+                var currPos = 0,
+                        myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
+                if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
+                        this._scrollTracks = (this.user_layers.scrollTop - 10)
+                }
+                if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
+                        this._scrollTracks = (this.user_layers.scrollTop - 20)
+                }
+                if ((myScrollTest > (this.user_layers.clientHeight + 10))) {
+                        this._scrollTracks = (this.user_layers.scrollTop + 10)
+                }
+                if ((myScrollTest > (this.user_layers.clientHeight + 20))) {
+                        this._scrollTracks = (this.user_layers.scrollTop + 20)
+                        
+                }
+                currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
                 this._dragAndDropHelperCoords = currPos + "px";
                 this.needsDraw = true;
         }
     },
     handleLayerDragEnd : {
         value: function(event) {
-            // Delete the helper and clean up
-            if (this._dragAndDropHelper !== null) {
-                this.container_layers.removeChild(this._dragAndDropHelper);
-                                this._dragAndDropHelper = null;
-            }
+                this._deleteHelper = true;
+                this.needsDraw = true;
+           
         }
     },
     handleLayerDrop : {