13 files changed, 385 insertions, 143 deletions

diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
index b6bee37d..b4eec771 100755
--- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
+++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js
@@ -118,7 +118,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component
     didCreate: {
         value: function() {
             // Setup the drop delegate
-//            this.application.ninja.dragDropMediator.dropDelegate = this;
+            this.application.ninja.dragDropMediator.dropDelegate = this;
             // Loop through the component and load the JSON data for them
             this._loadComponents();
         }
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index a396ea28..e92cb2dd 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -91,12 +91,6 @@ exports.Splitter = Montage.create(Component, {
         }
     },
 
-    didDraw: {
-        value: function() {
-            this.application.ninja.stage.resizeCanvases = true;
-        }
-    },
-
     handleClick : {
         value: function() {
             if (!this.disabled) {
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index b41680be..5206ae16 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -255,12 +255,12 @@ var Layer = exports.Layer = Montage.create(Component, {
                 if (value !== this._isSelected) {
                         // Only concerned about different values
                         if (value === false) {
-                                // If changing from false to true, we need to deselect any associated styles
+                                // If changing from true to false, we need to deselect any associated styles
                                 this.selectStyle(false);
                         }
                         this._isSelected = value;
                         this.layerData.isSelected = value;
-                        //this.needsDraw = true;
+                        this.needsDraw = true;
                 }
             
         }
@@ -381,7 +381,6 @@ var Layer = exports.Layer = Montage.create(Component, {
                 return this._bypassAnimation;
         },
         set: function(newVal) {
-                //console.log("layer.js _bypassAnimation setter " + newVal)
                 this._bypassAnimation = newVal;
         }
     },
@@ -406,7 +405,6 @@ var Layer = exports.Layer = Montage.create(Component, {
 
     setData:{
         value:function(){
-                this.log('layer: setData called')
             this.layerName = this.layerData.layerName;
             this.layerID = this.layerData.layerID;
             this.arrLayerStyles = this.layerData.arrLayerStyles;
@@ -424,9 +422,13 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.dtextScaleX = this.layerData.dtextScaleX;
             this.dtextScaleY = this.layerData.dtextScaleY;
             this.dtextRotate = this.layerData.dtextRotate;
+            this._isFirstDraw = this.layerData._isFirstDraw;
             this.needsDraw = true;
         }
     },
+    _isFirstDraw : {
+        value: true
+    },
 
         /* END: Models */
 
@@ -483,6 +485,16 @@ var Layer = exports.Layer = Montage.create(Component, {
             }
         }
     },
+    didDraw: {
+        value: function() {
+                if ((this.isSelected === true) && (this._isFirstDraw === true)) {
+                        // Once we're done drawing the first time we need to tell the TimelinePanel if
+                        // this layer is supposed to be selected.
+                        this.parentComponent.parentComponent.selectedLayerID = this.layerID;
+                        this._isFirstDraw = false;
+                }
+        }
+    },
         /* End: Draw cycle */
         
         /* Begin: Controllers */
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 1afb9e5a..a1e320c4 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -139,6 +139,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    _selectedLayerID:{
+        value: false
+    },
+    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;
+                                this.selectLayer(selectIndex, true);
+                }
+        }
+    },
+
     millisecondsOffset:{
         value:1000
     },
@@ -374,14 +396,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                     
                     // Feed the new array of objects into the repetitions
                     // and select the first layer.
+                    this.temparrLayers[0].layerData.isSelected = true;
+                                        this.temparrLayers[0].layerData._isFirstDraw = true;
+                                        
                     this.arrLayers=this.temparrLayers;
-                    
-                    // TODO: We need a better solution to this race condition than a timeout.
-                    this._captureSelection = true;
-                    var that = this;
-                    setTimeout(function() {
-                        that.selectLayer(0, true);
-                    }, 1000)
+
                 } else {
                         // New document. Create default layer.
                     this.createNewLayer(1);
@@ -397,31 +416,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             } else {
                 // we do have information stored.  Use it.
                 this._boolCacheArrays = false;
+                        //var myIndex = 0;
+                        for (var i = 0; i < this.application.ninja.currentDocument.tlArrLayers.length; i++) {
+                                if ( this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true ) {
+                                        this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true;
+                                }
+                        }
+
+                        
                 this.arrLayers = this.application.ninja.currentDocument.tlArrLayers;
                 this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected;
                 this.hashInstance = this.application.ninja.currentDocument.tlLayerHashTable;
                 this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable;
                 this.hashKey = this.application.ninja.currentDocument.hashKey;
-                this._boolCacheArrays = true;
-                
-                // Search through the arrLayers and select the layer that's already selected
-                var i = 0,
-                        selectMe = 0,
-                        arrLayersLength = this.arrLayers.length;