3 files changed, 319 insertions, 45 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 418d2226..4a737490 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;
@@ -678,7 +693,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: {
@@ -790,7 +805,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";
                 }
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index f6e0e252..1ddb3977 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -326,6 +326,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
         }
     },
+    _dragLayerIndexes: {
+        value: []
+    },
     _dropLayerID : {
         value: null
     },
@@ -337,6 +340,38 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 if (newVal !== this._dropLayerID) {
                         this._dropLayerID = newVal;
                         
+                        var dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
+                                arrDragLayers = [], 
+                                i = 0, 
+                                dragLayerIndexesLength = this._dragLayerIndexes.length;
+                        
+                        // TODO: possibly we'll need to sort dragLayerIndexes so things don't get out of order?
+                        
+                        for (i = 0; i < dragLayerIndexesLength; i++) {
+                                var myDraggingLayer = this.arrLayers[this._dragLayerIndexes[i]];
+                                arrDragLayers.push(myDraggingLayer);
+                                this.arrLayers.splice(this._dragLayerIndexes[i], 1);
+                                this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer);
+                        }
+                                console.log(arrDragLayers);
+                        //this.arrLayers.splice(dropLayerIndex, 0, arrDragLayers);
+                        this.layersDragged = arrDragLayers;
+                        console.log(this.layersDragged);
+                        console.log(this.arrLayers);
+                        this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
+                        this.cacheTimeline();
+                        
+                        this._dropLayerID = null;
+                        this.dragLayerIndexes = [];
+                        this._dragLayerIndexes = [];
+                        this.lastLayerClicked = 0;
+
+                        // Sometimes, just to be fun, the drop and dragend events don't fire.
+                        // So just in case, set the draw routine to delete the helper.
+                        this._deleteHelper = true;
+                        this.needsDraw = true;
+
+/*
                         var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
                                 dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
                                 dragLayer = this.arrLayers[dragLayerIndex];
@@ -355,6 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         // So just in case, set the draw routine to delete the helper.
                         this._deleteHelper = true;
                         this.needsDraw = true;
+*/
                 }
         }
     },
@@ -480,6 +516,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             returnObj.layerData = {};
             returnObj.layerData.layerName = null;
             returnObj.layerData.layerID = null;
+            returnObj.layerData.stageElement = null;
             returnObj.layerData.isMainCollapsed = true;
             returnObj.layerData.isPositionCollapsed = true;
             returnObj.layerData.isTransformCollapsed = true;
@@ -584,7 +621,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Bind all document-specific events (pass in true to unbind)
     _bindDocumentEvents : {
         value: function(boolUnbind) {
-            var arrEvents = [ "newLayer",
+            var arrEvents = [ "stageElement",
                              "deleteLayer",
                              "elementAdded",
                              "elementsRemoved",
@@ -895,13 +932,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
         
-    handleSelectionChange:{
-        value:function () {
+        // Event handler for changes in stage selection.
+    handleSelectionChange: {
+        value:function (event) {
+                this.updateLayerSelection();
+                /*
             var layerIndex, 
                 i = 0,
                 j = 0,
                 arrLayersLength = this.arrLayers.length,
-                intNumSelected = this.application.ninja.selectedElements.length,
+                intNumSelected = event.detail.elements.length,
                 checkIndex = 0;
 
             //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected)
@@ -919,12 +959,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // Build an array of indexes of selected layers to give to the selectLayers method
                 var arrSelectedIndexes = [];
                 //this.currentLayerSelected = false;
+
+                                //console.log(event.detail.elements);
+                                //console.log(this.layerRepetition.childComponents);
+
                 for (i = 0; i < intNumSelected; i++) {
-                        var currentCheck = this.application.ninja.selectedElements[i].uuid;
+                        var currentCheck = event.detail.elements[i];
                         //console.log("checking ", currentCheck);
                         for (j = 0; j < arrLayersLength; j++) {
-                                //console.log(".......... ", this.arrLayers[j].layerData.elementsList[0].uuid)
-                                if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) {
+                                //console.log(".......... ", this.arrLayers[j].layerData.stageElement)
+                                // if (currentCheck === this.arrLayers[j].layerData.elementsList[0].uuid) {
+                                if (currentCheck === this.arrLayers[j].layerData.stageElement) {
                                         //console.log("...............Yes!")
                                         arrSelectedIndexes.push(j);
                                 }
@@ -932,17 +977,120 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
                 this.selectLayers(arrSelectedIndexes);
             }
+            */
         }
     },