5 files changed, 2204 insertions, 155 deletions

diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index bd0ae3cb..99d2f822 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -483,30 +483,25 @@ exports.ElementMediator = Montage.create(Component, {
     },
 
     reArrangeDOM:{
-        value: function(layersDraggedArray, layerDroppedAfter) {
-            var documentRoot,length;
-
-            documentRoot = this.application.ninja.currentDocument.model.documentRoot;
-            length = layersDraggedArray.length;
-
-            for(var i=0; documentRoot.children[i]; i++) {
-                if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) {
-                    if(length >0){
-                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]);
-                    }
-
-                    /* Will require for Multiple Drag n Drop */
-                    //length = length-1;
-                    //index = i;
-                    //if(length>0) {
-                        //while(layersDraggedArray[length]) {
-                            //documentRoot.children[index].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0],documentRoot.children[k].nextSibling);
-                            //length--;
-                            //index++;
-                        //}
-                    //}
-                }
-            }
+        value: function(arrLayersDragged, dropTargetElement) {
+                        var i = 0,
+                                arrLayersDraggedLength = arrLayersDragged.length,
+                                targetParentNode,
+                                targetElement;
+
+                        if (arrLayersDraggedLength === 0) {
+                                // Nothing was dragged, so return.
+                                return;
+                        }
+                        
+                        // Get the target parent node (this will be the parentNode of any of the dragging items)
+                        targetParentNode = arrLayersDragged[0].parentNode;
+
+                        
+                        // Loop through arrLayersDragged and insertBefore the drop target element
+                        for (i = 0; i < arrLayersDraggedLength; i++) {
+                                targetParentNode.insertBefore(arrLayersDragged[i], dropTargetElement);
+                        }
         }
     }
 });
\ No newline at end of file
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 9971933f..c75e105d 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -302,46 +302,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
-    splitPropTween:{
-        value:function (ev) {
-            console.log("splitting sub prop tween with new keyframe");
-            var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;
-            var i;
-            var tweensLength = this.propTweens.length - 1;
-            var prevTween, nextTween, splitTweenIndex;
-            for (i = 0; i < tweensLength; i++) {
-                prevTween = this.propTweens[i].tweenData.keyFramePosition;
-                nextTween = this.propTweens[i + 1].tweenData.keyFramePosition;
-                if (clickPos > prevTween && clickPos < nextTween) {
-                    //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID);
-                    splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID;
-                    this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos;
-                    this.propTweens[i + 1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX;
-                    if (ev.target.className != "tween-span") {
-                        // don't set styles on timeline track if event is coming from the track
-                    } else {
-                        ev.target.style.width = this.propTweens[i + 1].tweenData.spanWidth + "px";
-                        ev.target.parentElement.style.left = clickPos + "px";
-                        ev.target.parentElement.children[1].style.left = (this.propTweens[i + 1].tweenData.spanWidth - 3) + "px";
-                    }
-                    var newTweenToInsert = {};
-                    newTweenToInsert.tweenData = {};
-                    newTweenToInsert.tweenData.spanWidth = clickPos - prevTween;
-                    newTweenToInsert.tweenData.keyFramePosition = clickPos;
-                    newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos;
-                    newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1;
-                    newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth;
-                    newTweenToInsert.tweenData.tweenedProperties = [];
-                    newTweenToInsert.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
-                    this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert);
-                    break;
-                }
-            }
-            this.application.ninja.currentDocument.model.needsSave = true;
-        }
-    },
-
-    // splitTweenAt: Split a tween at a particular position (x coordinate)
     splitPropTweenAt:{
         value:function (position) {
             var i, j, nextComponentIndex,
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index e06fb422..2cbd9e2b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -459,10 +459,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this._draggingType = newVal;
         }
     },
-
-    layersDragged:{
-           value:[],
-           writable:true
+    
+    _elementsDragged: {
+        value: []
+    },
+    elementsDragged: {
+        get: function() {
+                return this._elementsDragged;
+        },
+        set: function(newVal) {
+                this._elementsDragged = newVal;
+        }
     },
 
     dragLayerID : {
@@ -475,9 +482,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
         }
     },
-    _dragLayerIndexes: {
-        value: []
-    },
+
     _dropLayerID : {
         value: null
     },
@@ -489,39 +494,59 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 if (newVal !== this._dropLayerID) {
                         this._dropLayerID = newVal;
                         
-                        var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
-                                arrDragLayers = [], 
+                        var dropLayerIndex = this.getLayerIndexByID(newVal),
                                 i = 0, 
-                                dragLayerIndexesLength = this._dragLayerIndexes.length;
+                                dragLayerIndexesLength = this.currentLayersSelected.length,
+                                dragAndDropDirection = 0,
+                                targetIndex;
                         
+                        if (dragLayerIndexesLength === 0) {
+                                // Nothing was dragged, so do nothing.
+                                return;
+                        }
+                        
+                        // Is this a move up or down?
+                        if (this.currentLayersSelected[0] > dropLayerIndex) {
+                                dragAndDropDirection = -1;
+                        } 
+                        targetIndex = dropLayerIndex + dragAndDropDirection;
+
                         // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order?
                         
+                        // Get the target DOM element.
+                        if (typeof(this.arrLayers[targetIndex]) !== "undefined") {
+                                this._layerDroppedInPlace = this.arrLayers[targetIndex].layerData.stageElement;
+                        } else {
+                                this._layerDroppedInPlace = null;
+                        }
+                        
+                                // Splice
                         for (i = 0; i < dragLayerIndexesLength; i++) {
-                                var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]];
-                                arrDragLayers.push(myDraggingLayer);
+                                        var myDraggingLayer = this.arrLayers[this.currentLayersSelected[i]];
                                 // Splice arrLayers
-                                this.arrLayers.splice(this._dragLayerIndexes[i], 1);
+                                this.arrLayers.splice(this.currentLayersSelected[i], 1);
                                 this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer);
                         }
-                        this.layersDragged = arrDragLayers;
-                        this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
+                        this.elementsDragged = this.currentElementsSelected;
                         
                         // Cache the new info
                         this.cacheTimeline();
                         
                         // Clear drag and drop variables for future re-use
                         this._dropLayerID = null;
-                        this.dragLayerIndexes = [];
-                        this._dragLayerIndexes = [];
                         this.lastLayerClicked = 0;
 
                         // 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;