3 files changed, 47 insertions, 14 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 452d09f1..ea5fe4af 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,7 +11,18 @@ exports.ElementController = Montage.create(Component, {
 
     addElement: {
         value: function(el, styles) {
-            this.application.ninja.currentDocument.documentRoot.appendChild(el);
+            if(this.application.ninja.timeline.currentLayerSelected) {
+                var selectedLayerIndex = this.application.ninja.timeline.getLayerIndexByID(this.application.ninja.timeline.currentLayerSelected.layerData.layerID);
+
+                if(selectedLayerIndex === 0) {
+                    this.application.ninja.currentDocument.documentRoot.appendChild(el);
+                } else {
+                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0];
+                    element.parentNode.insertBefore(el, element.nextSibling);
+                }
+            } else {
+                this.application.ninja.currentDocument.documentRoot.appendChild(el);
+            }
             // Nested elements - TODO make sure the CSS is correct before nesting elements
             // this.application.ninja.currentSelectedContainer.appendChild(el);
             if(styles) {
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 919aaec1..06514076 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -514,11 +514,33 @@ exports.ElementMediator = Montage.create(Component, {
             var str = this.getProperty(el, "-webkit-transform");
             return str && str.length;
         }
-    }
-
+    },
 
+    reArrangeDOM:{
+        value: function(layersDraggedArray, layerDroppedAfter) {
+            var documentRoot,length;
 
+            documentRoot = this.application.ninja.currentDocument.documentRoot;
+            length = layersDraggedArray.length;
 
-    //--------------------------------------------------------------------------------------------------------
+            for(var i=0; documentRoot.children[i]; i++) {
+                if(documentRoot.children[i] === layerDroppedAfter.layerData.elementsList[0]) {
+                    if(length >0){
+                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0], 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++;
+                        //}
+                    //}
+                }
+            }
+        }
+    }
 });
\ No newline at end of file
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 70e04b4c..66ef1b97 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -278,6 +278,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     _dragLayerID : {
         value: null
     },
+
+    layersDragged:{
+           value:[],
+           writable:true
+    },
+
     dragLayerID : {
         get: function() {
                 return this._dragLayerID;
@@ -302,6 +308,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
                                 dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
                                 dragLayer = this.arrLayers[dragLayerIndex];
+                    this.layersDragged.push(dragLayer);
+                    this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
 
                         this.arrLayers.splice(dragLayerIndex, 1);
                         this.arrLayers.splice(dropLayerIndex, 0, dragLayer);
@@ -403,6 +411,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 this._deleteHelper = false;
                         }
                     }
+                this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
+                this.layersDragged =[];
                 }
         }
     },
@@ -903,15 +913,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-
-
-
-
-
-
-
-
-
     deselectTweens:{
         value:function () {
             for (var i = 0; i < this.selectedTweens.length; i++) {
@@ -1038,7 +1039,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
             this._openDoc = false;
 
-
         }
     },