3 files changed, 52 insertions, 12 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 452d09f1..a7d99466 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,7 +11,19 @@ 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..49a8e369 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -514,7 +514,35 @@ 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(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++;
+    //                        }
+    //                    }
+                    }
+                }
+            }
+        }
 
 
 
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;
 
-
         }
     },