4 files changed, 87 insertions, 50 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index eecf319e..925fc959 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -11,6 +11,33 @@ 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();
+                console.log("elementcontroller.addElement, insertionIndex = ", insertionIndex);
+                //debugger;
+                if (insertionIndex === false) {
+                        this.application.ninja.currentSelectedContainer.appendChild(el);
+                } else {
+                        if (insertionIndex === 0) {
+                                this.application.ninja.currentSelectedContainer.appendChild(el);
+                        } else {
+                                /*
+                                if (insertionIndex === this.application.ninja.timeline.arrLayers.length-1) {
+                                        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);
 
@@ -27,6 +54,7 @@ exports.ElementController = Montage.create(Component, {
             if(styles) {
                 this.application.ninja.stylesController.setElementStyles(el, styles);
             }
+            */
         }
     },
 
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 48b2dfdf..4fb3e43c 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -500,11 +500,6 @@ 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: {
@@ -854,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){
-                for(var k=0;k<i;k++){
-                    if(this.application.ninja.timeline.arrLayers[k].layerData.layerID=== this.application.ninja.timeline.currentLayerSelected.layerData.layerID){
-                        this.application.ninja.timeline.currentLayerSelected.layerData.layerName = event.detail.id;
-                        this.application.ninja.timeline.triggerLayerBinding(k);
-                        this.needsDraw=true;
-                    }
-                }
-
-            }
-        }
-    }
-
         /* End: Logging routines */
 
 });
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index d1f51d16..6155ce3b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -62,11 +62,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value: false
     },
 
-    // Set to false to skip array caching array sets in current document
+    // Set to false to skip array caching array sets in currentDocument
     _boolCacheArrays:{
         value:true
     },
 
+        // Current layer number: iterated and used to assign layer IDs.
     _currentLayerNumber:{
         value:0
     },
@@ -633,6 +634,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
             document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false);
             document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false);
+            this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
             
             // Bind some bindings
             Object.defineBinding(this, "currentSelectedContainer", {
@@ -926,7 +928,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             // Loop through arrLayers and do the selection.
             for (i = 0; i < arrLayersLength; i++) {
                 if (arrSelectedIndexes.indexOf(i) > -1) {
-                        //console.log('TimelinePanel.selectLayers, selecting layer at index ', i)
                         this.arrLayers[i].layerData.isSelected = true;
                         this.arrLayers[i].isSelected = true;
                         this.triggerLayerBinding(i);
@@ -944,7 +945,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
             // Finally, reset the master duration.
             this.resetMasterDuration();
-                
         }
     },
     
@@ -1169,35 +1169,27 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if (this.checkable_animated.classList.contains("checked")) {
                 thingToPush.layerData.isVisible = false;
             }
-                        
-            if (this.layerRepetition.selectedIndexes) {
-                // There is a selected layer, so we need to splice the new layer on top of it.
-                myIndex = this.layerRepetition.selectedIndexes[0];
-                if (typeof(myIndex) === "undefined") {
-                        // Edge case: sometimes there's nothing selected, so this will be "undefined"
-                        // In that case, set it to 0, the first layer.
-                        myIndex = 0;
-                }
-                for (var i = 0; i < this.layerRepetition.selectedIndexes.length; i++) {
-                        if (myIndex > this.layerRepetition.selectedIndexes[i]) {
-                                myIndex = this.layerRepetition.selectedIndexes[i];
-                        }
-                }
-                thingToPush.layerData.layerPosition = myIndex;
-                thingToPush.layerData.trackPosition = myIndex;
-                this.arrLayers.splice(myIndex, 0, thingToPush);
-            } else {
-                thingToPush.layerData.layerPosition = myIndex;
-                this.arrLayers.splice(myIndex, 0, thingToPush);
-
+            
+            // Determine where the new array should be inserted in arrLayers.
+            // Ordinarily we could use this.getInsertionIndex BUT the new element
+            // insertion and selection has already fired, so getInsertionIndex will return 
+            // incorrect info. So we need to look at the DOM.
+            var childrenLength = this.application.ninja.currentSelectedContainer.children.length,
+                newIndex = childrenLength -1;
+            for (i = 0; i < childrenLength; i++) {
+                var currTest = this.application.ninja.currentSelectedContainer.children[i];
+                if (object == currTest) {
+                        myIndex = newIndex - i;
+                }
             }
+
+            this.arrLayers.splice(myIndex, 0, thingToPush);
             this.selectLayers([myIndex]);
         }
     },
 
     restoreLayer:{
         value:function (ele) {
-
             var stageElementName, 
                 thingToPush = this.createLayerTemplate();
 
@@ -1406,6 +1398,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+        // Get the index where a layer should be inserted based on selection.
+        // If nothing is selected, returns false.
+        // Used by ElementController.addElement.
+        getInsertionIndex: {
+                value: function() {
+                        var i = 0,