16 files changed, 112 insertions, 160 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/Keyframe.reel/Keyframe.html b/js/panels/Timeline/Keyframe.reel/Keyframe.html
index 6f9a6d05..4b029874 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.html
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.html
@@ -22,7 +22,7 @@
        </head>
        <body>
-        <div id="keyframespace" class="tween_keyframe">
+        <div data-montage-id="keyframespace" class="tween_keyframe">
        </div>
    </body>
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index f2e20d41..b23da749 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -36,13 +36,10 @@ var Layer = exports.Layer = Montage.create(Component, {
    
    /* Style models: the array of styles, and the repetition that uses them */
    _arrLayerStyles : {
-        serializable: true,
-                enumerable: true,
            value: []
    },
    arrLayerStyles : {
        serializable: true,
-        enumerable: true,
        get: function() {
                return this._arrLayerStyles;
        },
@@ -142,8 +139,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    
    /* Position and Transform hottext values */
    _dtextPositionX : {
-        value:null,
+        value:null
-        serializable: true
    },
    dtextPositionX:{
@@ -161,8 +157,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    },
    
    _dtextPositionY : {
-        value:null,
+        value:null
-        serializable: true
    },
    dtextPositionY:{
@@ -180,8 +175,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    },
    
    _dtextScaleX : {
-        value:null,
+        value:null
-        serializable: true
    },
    dtextScaleX:{
@@ -199,8 +193,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    },
    
    _dtextScaleY : {
-        value:null,
+        value:null
-        serializable: true
    },
    dtextScaleY:{
@@ -218,8 +211,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    },
    
    _dtextSkewX : {
-        value:null,
+        value:null
-        serializable: true
    },
    dtextSkewX:{
@@ -237,8 +229,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    },
    
    _dtextSkewY : {
-        value:null,
+        value:null
-        serializable: true
    },
    dtextSkewY:{
@@ -256,8 +247,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    },
    
    _dtextRotate : {
-        value:null,
+        value:null
-        serializable: true
    },
    dtextRotate:{
@@ -276,10 +266,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    
    /* isSelected: whether or not the layer is currently selected. */
    _isSelected:{
-        value: false,
+        value: false
-        writable: true,
-        serializable: true,
-        enumerable: false
    },
    isSelected:{
@@ -319,9 +306,7 @@ var Layer = exports.Layer = Montage.create(Component, {
    
    
    _isAnimated:{
-        value: false,
+        value: false
-        writable: true,
-        enumerable: false
    },
    isAnimated:{
@@ -363,7 +348,6 @@ var Layer = exports.Layer = Montage.create(Component, {