1 files changed, 475 insertions, 410 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7f4fee89..185211ae 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -57,12 +57,17 @@ 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
+    // 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
     },
@@ -91,36 +96,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
-
-    _selectedLayerID:{
-        value:false
+    _currentElementsSelected: {
+        value: []
     },
-    selectedLayerID:{
-        get:function () {
-            return this._selectedLayerID;
-        },
-        set:function (newVal) {
-            if (newVal === false) {
-                // We are clearing the timeline, so just set the value and return.
-                this._selectedLayerID = newVal;
-                return;
-            }
-            if (newVal !== this._selectedLayerID) {
-                var selectIndex = this.getLayerIndexByID(newVal);
-                this._selectedLayerID = newVal;
-                this._captureSelection = true;
-                if (this.currentLayerSelected !== false) {
-                        this.selectLayer(selectIndex, true);
-                }
-                if (this.currentLayersSelected !== false) {
-                        this.selectLayers(this.currentLayersSelected);
-                }
-                if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) {
-                        this.selectLayers([]);
-                }
-                
-            }
-        }
+    currentElementsSelected: {
+        get: function() {
+                return this._currentElementsSelected;
+        },
+        set: function(newVal) {
+                this._currentElementsSelected = newVal;
+                this.cacheTimeline();
+        }
     },
 
     _currentLayersSelected:{
@@ -136,6 +122,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
     
+    // 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
     },
@@ -235,15 +236,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         set:function (value) {
             if (this._breadCrumbContainer !== value) {
                 this._breadCrumbContainer = value;
-                //this.LayerBinding();
             }
         }
     },
 
-    _isLayer:{
-        value:false
-    },
-
     _firstTimeLoaded:{
         value:true
     },
@@ -300,6 +296,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
         }
     },
+    _dragLayerIndexes: {
+        value: []
+    },
     _dropLayerID : {
         value: null
     },
@@ -311,20 +310,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 if (newVal !== this._dropLayerID) {
                         this._dropLayerID = newVal;
                         
-                        var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
-                                dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
-                                dragLayer = this.arrLayers[dragLayerIndex];
-                    this.layersDragged.push(dragLayer);
-                    this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
-
-                        this.arrLayers.splice(dragLayerIndex, 1);
-                        this.arrLayers.splice(dropLayerIndex, 0, dragLayer);
+                        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);
+                                // Splice arrLayers
+                                this.arrLayers.splice(this._dragLayerIndexes[i], 1);
+                                this.arrLayers.splice(dropLayerIndex, 0, myDraggingLayer);
+                        }
+                        this.layersDragged = arrDragLayers;
+                        this._layerDroppedInPlace = this.arrLayers[dropLayerIndex];
+                        
+                        // Cache the new info
                         this.cacheTimeline();
                         
-                        // Clear for future DnD
+                        // Clear drag and drop variables for future re-use
                         this._dropLayerID = null;
-                        this._dragLayerID = 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;
@@ -365,40 +376,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     _ignoreSelectionChanges: {
         value: false
     },
+        // 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: Models === */
+   
     /* === BEGIN: Draw cycle === */
     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);
-