1 files changed, 533 insertions, 157 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7f4fee89..1ddb3977 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -57,6 +57,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._layerRepetition = newVal;
         }
     },
+    
+    _areTracksScrolling: {
+        value: false
+    },
 
     // Set to false to skip array caching array sets in current document
     _boolCacheArrays:{
@@ -91,6 +95,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
+    _currentElementsSelected: {
+        value: []
+    },
+    currentElementsSelected: {
+        get: function() {
+                return this._currentElementsSelected;
+        },
+        set: function(newVal) {
+                this._currentElementsSelected = newVal;
+                this.cacheTimeline();
+        }
+    },
 
     _selectedLayerID:{
         value:false
@@ -135,6 +151,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
+    // The index of the last layer that was clicked on
+    // (used for shift-click multiselect)
+    _lastLayerClicked : {
+        value: 0
+    }, 
+    lastLayerClicked: {
+        serializable: true,
+        get: function() {
+                return this._lastLayerClicked;
+        },
+        set: function(newVal) {
+                this._lastLayerClicked = newVal
+        }
+    },
     
     _currentSelectedContainer: {
         value: null
@@ -240,10 +270,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    _isLayer:{
-        value:false
-    },
-
     _firstTimeLoaded:{
         value:true
     },
@@ -300,6 +326,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
         }
     },
+    _dragLayerIndexes: {
+        value: []
+    },
     _dropLayerID : {
         value: null
     },
@@ -311,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];
@@ -329,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;
+*/
                 }
         }
     },
@@ -370,35 +432,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     prepareForDraw:{
         value:function () {
             this.initTimeline();
-            // Bind the event handler for the document change events
-            //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
-            this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
-            //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
-            //this.eventManager.addEventListener("breadCrumbBinding",this,false);
-            
-            // Bind drag and drop event handlers
-            this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
-            this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
-            this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
-            this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
-            this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
-            this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
-            
-            // Bind the handlers for the config menu
-            this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
-            this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false);
-            this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false);
-            this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
-            document.addEventListener("click", this.handleDocumentClick.bind(this), false);
-
-        }
-    },
-
-    willDraw:{
-        value:function () {
-            if (this._isLayer) {
-                this._isLayer = false;
-            }
         }
     },
     
@@ -453,9 +486,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 this._scrollTracks = false;
                         }
                 }
+                
+                // Do we need to scroll the layers?
+                if (this._areTracksScrolling) {
+                        this._areTracksScrolling = false;
+                    this.user_layers.scrollTop = this.layout_tracks.scrollTop;
+                    this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
+                        this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px";
+                }
 
         }
     },
+        // is the control key currently being pressed (used for multiselect)
+        _isControlPressed: {
+                value: false
+        },
+
+        // is the shift key currently being pressed (used for multiselect) 
+        _isShiftPressed: {
+                value: false
+        },
     /* === END: Draw cycle === */
     /* === BEGIN: Controllers === */
     // Create an empty layer template object with minimal defaults and return it for use
@@ -466,6 +516,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             returnObj.layerData = {};
             returnObj.layerData.layerName = null;