8 files changed, 574 insertions, 503 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 20225c61..675176e9 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,13 +11,32 @@ exports.ElementController = Montage.create(Component, {
 
     addElement: {
         value: function(el, styles) {
+                // Updated to use new methods in TimelinePanel. JR.
+                var insertionIndex = this.application.ninja.timeline.getInsertionIndex();
+                if (insertionIndex === false) {
+                        this.application.ninja.currentSelectedContainer.appendChild(el);
+                } else {
+                        if (insertionIndex === 0) {
+                                this.application.ninja.currentSelectedContainer.appendChild(el);
+                        } else {
+                    var element = this.application.ninja.timeline.arrLayers[insertionIndex].layerData.stageElement;
+                    element.parentNode.insertBefore(el, element.nextSibling);
+                        }
+                }
+                
+            if(styles) {
+                this.application.ninja.stylesController.setElementStyles(el, styles);
+            }
+                
+                /*
+                        // Old methods. Kept for reference. Delete if not needed. JR.
             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.currentSelectedContainer.appendChild(el);
                 } else {
-                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.elementsList[0];
+                    var element = this.application.ninja.timeline.arrLayers[selectedLayerIndex].layerData.stageElement;
                     element.parentNode.insertBefore(el, element.nextSibling);
                 }
             } else {
@@ -27,6 +46,7 @@ exports.ElementController = Montage.create(Component, {
             if(styles) {
                 this.application.ninja.stylesController.setElementStyles(el, styles);
             }
+            */
         }
     },
 
diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js
index 06514076..9c8a9ac4 100755
--- a/js/mediators/element-mediator.js
+++ b/js/mediators/element-mediator.js
@@ -524,9 +524,9 @@ exports.ElementMediator = Montage.create(Component, {
             length = layersDraggedArray.length;
 
             for(var i=0; documentRoot.children[i]; i++) {
-                if(documentRoot.children[i] === layerDroppedAfter.layerData.elementsList[0]) {
+                if(documentRoot.children[i] === layerDroppedAfter.layerData.stageElement) {
                     if(length >0){
-                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.elementsList[0], documentRoot.children[i]);
+                        documentRoot.children[i].parentNode.insertBefore(layersDraggedArray[length-1].layerData.stageElement, documentRoot.children[i]);
                     }
 
                     /* Will require for Multiple Drag n Drop */
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b0f6d220..4fb3e43c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -133,6 +133,20 @@ var Layer = exports.Layer = Montage.create(Component, {
         }
     },
     
+    _stageElement: {
+        value: null
+    },
+    
+    stageElement: {
+        get: function() {
+                return this._stageElement;
+        },
+        set: function(newVal) {
+                this._stageElement = newVal;
+                this.layerData.stageElement = newVal;
+        }
+    },
+    
     
     _elementsList : {
         value: []
@@ -398,6 +412,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                 
             this.layerName = this.layerData.layerName;
             this.layerID = this.layerData.layerID;
+            this.stageElement = this.layerData.stageElement
             this.arrLayerStyles = this.layerData.arrLayerStyles;
             this.isMainCollapsed = this.layerData.isMainCollapsed;
             this.isPositionCollapsed = this.layerData.isPositionCollapsed;
@@ -485,19 +500,18 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.element.addEventListener("dragleave", this.handleDragleave.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
                         this.element.addEventListener("drop", this.handleDrop.bind(this), false);
-
-            this.eventManager.addEventListener("updatedID", this, false);
-                        
-
-
         }
     },
     draw: {
         value: function() {
-            if (this.isSelected) {
-                this.element.classList.add("selected");
-            } else {
-                this.element.classList.remove("selected");
+                var boolHasClass = this.element.classList.contains("layerSelected");
+            if (this.isSelected && !boolHasClass) {
+                //console.log('Layer.draw, adding selection for layer ', this.layerName)
+                this.element.classList.add("layerSelected");
+            }
+                        if (!this.isSelected && boolHasClass) {
+                //console.log('Layer.draw, removing selection for layer ', this.layerName)
+                this.element.classList.remove("layerSelected");
             }
         }
     },
@@ -505,14 +519,6 @@ var Layer = exports.Layer = Montage.create(Component, {
         value: function() {
                 // console.log("Layer.didDraw: Layer "+ this.layerID );
                 if (this._isFirstDraw === true) {
-                        if (this.isSelected === true) {
-                                if (this.application.ninja.currentDocument._uuid === this._docUUID) {
-                                        // Once we're done drawing the first time we need to tell the TimelinePanel if
-                                        // this layer is supposed to be selected.
-                                        //console.log('layerName ' +  this.layerName);
-                                        this.parentComponent.parentComponent.selectedLayerID = this.layerID;
-                                        }
-                        }
                         this._isFirstDraw = false;
                         this.layerData._isFirstDraw = false;
                         
@@ -520,7 +526,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                                         this.mainCollapser.myContent.style.height = "auto";
                                         this.mainCollapser.myContent.classList.remove(this.mainCollapser.collapsedClass);
                                         this.mainCollapser.clicker.classList.remove(this.mainCollapser.collapsedClass);
-
                         }
                         if (this.isPositionCollapsed === false) {
                                         this.positionCollapser.myContent.style.height = "auto";
@@ -534,9 +539,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                         }
                         
                 }
-                
-
-                
         }
     },
         /* End: Draw cycle */
@@ -674,7 +676,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         this.dynamicLayerName.value = this._layerEditable.value;
                         this.needsDraw = true;
                         this.application.ninja.documentController.activeDocument.needsSave = true;
-            this.layerData.elementsList[0].setAttribute("id",this.dynamicLayerName.value);
+            this.layerData.stageElement.setAttribute("id",this.dynamicLayerName.value);
                 }
         },
         handleAddStyleClick: {
@@ -786,7 +788,7 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleDragstart: {
                 value: function(event) {
-                        this.parentComponent.parentComponent.dragLayerID = this.layerID;
+                        //this.parentComponent.parentComponent.dragLayerID = this.layerID;
             event.dataTransfer.setData('Text', 'Layer');
             this.parentComponent.parentComponent.draggingType = "layer";
                 }
@@ -847,23 +849,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                         }
         }
     },
-
-    handleUpdatedID:{
-        value:function(event){
-            var i= this.application.ninja.timeline.arrLayers.length;
-            if(event.detail.id){