2 files changed, 130 insertions, 7 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 9ed69f4a..f7cd40ca 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -14,6 +14,7 @@
                         "element": {"#": "timeline_panel"},
                         "user_layers": {"#": "user_layers"},
                         "track_container": {"#": "right_inside"},
+                        "timeline_leftpane" : {"#" : "timeline_leftpane"},
                         "layer_tracks": {"#": "layer_tracks"},
                         "master_track": {"#": "master_track"},
                         "newlayer_button": {"#": "newlayer_button"},
@@ -92,6 +93,11 @@
                                         "boundObjectPropertyPath" : "objectAtCurrentIteration.isTransformCollapsed",
                                         "oneway" : false
                                 },
+                                "isSelected" : {
+                                        "boundObject" : {"@" : "repetition1"},
+                                        "boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
+                                        "oneway" : false
+                                },
                                 "isStyleCollapsed" : {
                                         "boundObject" : {"@" : "repetition1"},
                                         "boundObjectPropertyPath" : "objectAtCurrentIteration.isStyleCollapsed",
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index ef353490..48537cef 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -2,6 +2,7 @@ var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
 var Layer = require("js/panels/Timeline/Layer.reel").Layer;
 var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
+var nj = require("js/lib/NJUtils").NJUtils;
 
 // var Track = require("js/panels/Timeline/Track.reel").Track;
 
@@ -139,15 +140,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Initialize the timeline
     initTimelineView : {
         value:function(){
+                
+                // Get some selectors to make life easier.
+                this.layout_tracks = this.element.querySelector(".layout-tracks");
+                this.layout_markers = this.element.querySelector(".layout_markers");
 
             // Add event handlers on the buttons.
             this.newlayer_button.identifier = "addLayer";
             this.newlayer_button.addEventListener("click", this, false);
             this.deletelayer_button.identifier = "deleteLayer";
             this.deletelayer_button.addEventListener("click", this, false);
+            
+            // New click listener to handle select/deselect events
+            this.timeline_leftpane.addEventListener("click", this.timelineLeftPaneClick.bind(this), false);
+            
+            // New click listener on body to handle "blurring" the panel
+            document.addEventListener("click", this.handleBlur.bind(this), false);
 
             // Simultaneous scrolling of the layer and tracks
-            this.layer_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
+            this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
 
             // Calculate and draw time markers
@@ -166,8 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     updateLayerScroll:{
         value:function(){
-            this.user_layers.scrollTop = this.layer_tracks.scrollTop;
-            this.master_track.scrollLeft = this.layer_tracks.scrollLeft;
+                console.log(this.layout_tracks.scrollLeft)
+            this.user_layers.scrollTop = this.layout_tracks.scrollTop;
+            this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
         }
     },
 
@@ -183,7 +195,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleAddLayerClick:{
         value:function(event){
-            event.stopPropagation();
+            //event.stopPropagation();
             this._isLayer = true;
             this.needsDraw = true;
         }
@@ -191,7 +203,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleDeleteLayerClick:{
         value:function(event){
-            event.stopPropagation();
+            //event.stopPropagation();
             this._deleteKeyDown=false;
             if(this.application.ninja.currentSelectedContainer.id==="UserContent"){
                 this._hashKey="123";
@@ -230,6 +242,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+        timelineLeftPaneClick : {
+                value: function(event) {
+                        // Check ALL THE CLICKS
+                        // Are they in a particular layer? If so, we need to select that layer and
+                        // deselect the others.
+                        var ptrParent = nj.queryParentSelector(event.target, ".container-layer");
+                        if (ptrParent !== false) {
+                                // Why yes, the click was within a layer.  But which one?
+                                var strLabel = ptrParent.querySelector(".label-layer .collapsible-label").innerText,
+                                        myIndex = this.getLayerIndexByName(strLabel);
+                                this.selectLayer(myIndex);
+                        }
+                }
+        },
+        
+        handleBlur: {
+                value: function(event) {
+                        var ptrParent = nj.queryParentSelector(event.target, ".tl_leftpane");
+                        if (ptrParent !== false) {
+                                // We were clicking somewhere within the left pane, so we shouldn't blur.
+                        } else {
+                                this.selectLayer("none");
+                        }
+                }
+        },
+
      handleNewLayer:{
         value:function(event){
             // Add a new layer.  It should be added above the currently selected layer,
@@ -315,6 +353,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         thingToPush.arrLayerStyles = [];
                         thingToPush.element=[];
                         thingToPush.deleted=false;
+                        thingToPush.isSelected = false;
                         if(_firstLayerDraw){
                         thingToPush.parentElementUUID=this.application.ninja.currentSelectedContainer.uuid;
                         thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
@@ -341,18 +380,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         if (!!this.layerRepetition.selectedIndexes) {
                             myIndex = this.layerRepetition.selectedIndexes[0];
                             thingToPush.layerPosition=myIndex;
+                            thingToPush.isSelected = true;
                             newTrack.trackPosition=myIndex;
                             this.arrLayers.splice(myIndex, 0, thingToPush);
                             this.arrTracks.splice(myIndex, 0, newTrack);
                             this._LayerUndoPosition = myIndex;
+                            /*
                             this.currentLayerSelected= this.arrLayers[myIndex];
                             this.currentTrackSelected=this.arrTracks[myIndex];                            
+                            var i = 0,
+                                                                arrLayersLength = this.arrLayers.length;
+                                                        for (i = 0; i < arrLayersLength; i++) {
+                                                                if (i === myIndex) {
+                                                                        this.arrLayers[i].isSelected = true;
+                                                                } else {
+                                                                        this.arrLayers[i].isSelected = false;
+                                                                }
+                                                        }
                             this.layerRepetition.selectedIndexes = [myIndex];
+                            */
+                           
+                           this.selectLayer(myIndex);
+                           
                             this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
                             this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
                         } else {
-                            this.arrLayers.push(thingToPush);
-                            this.arrTracks.push(newTrack);
+                            this.arrLayers.splice(0, 0, thingToPush);
+                            this.arrTracks.splice(0, 0, newTrack);