2 files changed, 190 insertions, 45 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 8ddc81cd..5c957619 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -20,6 +20,7 @@
                         "track_container": {"#": "right_inside"},
                         "timeline_leftpane" : {"#" : "leftpane_inside"},
                         "layer_tracks": {"#": "layer_tracks"},
+                        "layout_tracks": {"#": "layout_tracks"},
                         "master_track": {"#": "master_track"},
                         "time_markers" : {"#": "timeline_markers"},
                         "layerRepetition" : {"@": "repetition1"},
@@ -211,7 +212,7 @@
 
 
                         <div data-montage-id="layer_tracks" class="tl_layertracks">
-                                <div class="layout-tracks">
+                                <div class="layout-tracks" data-montage-id="layout_tracks">
                                     <div data-montage-id="playhead_marker" class="playheadmarker"></div>
                                     <div data-montage-id="master_track" class="mastertrack">
                                     <div data-montage-id="time_bar" class="timebar"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 03db7880..8859e115 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -259,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     timeMarkerHolder:{
         value:null
     },
+    
+    // Drag and Drop properties
     _dragAndDropHelper : {
         value: false
     },
@@ -271,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     _dragLayerID : {
         value: null
     },
+    _draggingType: {
+        value: false
+    },
+    draggingType: {
+        get: function() {
+                return this._draggingType;
+        },
+        set: function(newVal) {
+                this._draggingType = newVal;
+        }
+    },
 
     layersDragged:{
            value:[],
@@ -328,6 +341,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     _scrollTracks: {
         value: false
     },
+    
+    // Keyframe drag and drop properties
+    _draggingTrackId: {
+        value: false
+    },
+    draggingTrackId: {
+        get: function() {
+                return this._draggingTrackId;
+        },
+        set: function(newVal) {
+                this._draggingTrackId = newVal;
+        }
+    },
+    
+    
     useAbsolutePosition:{
         value:true
     },
@@ -352,8 +380,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
             this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
             this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
-            //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
             this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
+            this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+            this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
             
             // Bind the handlers for the config menu
             this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
@@ -375,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     
     draw: {
         value: function() {
+                
                 // Drag and Drop:
-                // Do we have a helper to append?
-            if (this._appendHelper === true) {
-                this.container_layers.appendChild(this._dragAndDropHelper);
-                this._appendHelper = false;
-            }
-            // Do we need to move the helper?
-                if (this._dragAndDropHelperCoords !== false) {
-                        if (this._dragAndDropHelper !== null) {
-                                this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
-                        }
-                        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;
-                        }
+                if (this.draggingType === "layer") {
+                        
+                        // Do we have a helper to append?
+                    if (this._appendHelper === true) {
+                        this.container_layers.appendChild(this._dragAndDropHelper);
+                        this._appendHelper = false;
                     }
-                this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
-                this.layersDragged =[];
+                    // Do we need to move the helper?
+                        if (this._dragAndDropHelperCoords !== false) {
+                                if (this._dragAndDropHelper !== null) {
+                                        this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
+                                }
+                                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;
+                                }
+                            }
+                        this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
+                        this.layersDragged =[];
+                        }
+                } else if (this.draggingType === "keyframe") {
+                        // Do we need to scroll the tracks?
+                        if (this._scrollTracks !== false) {
+                                this.layout_tracks.scrollLeft = this._scrollTracks;
+                                this._scrollTracks = false;
+                        }
                 }
+
         }
     },
     /* === END: Draw cycle === */
@@ -668,7 +708,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
                 //debugger;
                 if (typeof(this.application.ninja.currentDocument.tlCurrentSelectedContainer) !== "undefined") {
-                        this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer;
+//                      this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer;