7 files changed, 252 insertions, 154 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 2d3ab72f..a4f957cf 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -80,7 +80,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
                 value: function(event) {
                         //this.parentComponent.parentComponent.dragLayerID = this.layerID;
             event.dataTransfer.setData('Text', 'Keyframe');
-            this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID;
+            
+            // Get my index in my track's tween array
+            var i = 0,
+                tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
+                myIndex = null;
+            for (i = 0; i < tweenRepetitionLength; i++) {
+                if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
+                        myIndex = i;
+                }
+            }
+            this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
                 }
         },
         handleDragend: {
diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index ba7c18c3..c7e7b575 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -17,13 +17,11 @@
                                                 "styleRepetition" : {"@":"repetition1"},
                                                 "dynamicLayerName" : {"@":"dtext1"},
                                                 "dynamicLayerTag" : {"@": "dtext2"},
-                                                "slotStyle" : {"@":"slot1"},
                                                 "mainCollapser" : {"@" : "mainCollapser"},
                                                 "positionCollapser" : {"@" : "positionCollapser"},
                                                 "styleCollapser" : {"@" : "styleCollapser"},
                                                 "clickerMain" : {"#" : "clicker-main"},
-                                                "myLabel" : {"#" : "myLabel"},
-                                                "dragDrop" : {"@" : "DragDrop"}
+                                                "myLabel" : {"#" : "myLabel"}
                     }
                 },
                     "dtext1" : {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 245aabd4..130dd044 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -777,6 +777,9 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleDragleave: {
                 value: function(event) {
+                        if (this.parentComponent.parentComponent.draggingType !== "layer") {
+                                return;
+                        }
                         this.element.classList.remove("dragOver");
                 }
         },
@@ -784,10 +787,14 @@ var Layer = exports.Layer = Montage.create(Component, {
                 value: function(event) {
                         this.parentComponent.parentComponent.dragLayerID = this.layerID;
             event.dataTransfer.setData('Text', 'Layer');
+            this.parentComponent.parentComponent.draggingType = "layer";
                 }
         },
         handleDragover: {
                 value: function(event) {
+                        if (this.parentComponent.parentComponent.draggingType !== "layer") {
+                                return;
+                        }
                         event.preventDefault();
                         this.element.classList.add("dragOver");
                         event.dataTransfer.dropEffect = "move";
@@ -797,6 +804,9 @@ var Layer = exports.Layer = Montage.create(Component, {
         
         handleDrop : {
                 value: function(event) {
+                        if (this.parentComponent.parentComponent.draggingType !== "layer") {
+                                return;
+                        }
                         event.stopPropagation();
                         this.element.classList.remove("dragOver");
                         if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
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.draggingType === "layer") {