4 files changed, 96 insertions, 56 deletions

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..033d0f79 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
     },
@@ -296,7 +318,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                              "newLayer",
                              "deleteLayer",
                              "elementAdded",
-                             "elementDeleted",
+                             "elementsRemoved",
                              "selectionChange"],
                 i,
                 arrEventsLength = arrEvents.length;
@@ -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;
-                for (i = 0; i < arrLayersLength; i++) {
-                        if (this.arrLayers[i].isSelected === true) {
-                                selectMe = i;
-                        }
-                }
-                
 
-                        this._captureSelection = true;
-                                // TODO: Better solution than a timer.
-                var that = this;
-                setTimeout(function() {
-                        that.selectLayer(selectMe, true);
-                }, 300)
             }
         }
     },
@@ -454,6 +463,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._firstTimeLoaded=true;
             this.end_hottext.value = 25;
             this.updateTrackContainerWidth();
+            this.selectedLayerID = false;
             
             // Clear the repetitions
             if (this.arrLayers.length > 0) {
@@ -464,9 +474,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
         handleDocumentChange:{