Timeline: Fix element insertion to use new TimelinePanel properties and

multiselect. Fix Property Panel so changing an ID there will actually change
an ID on the element (broken by switch from id to data-montage-id change).

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 ElementContr