2 files changed, 130 insertions, 10 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..8f7c63bf 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;
 
@@ -37,13 +38,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._layerRepetition = newVal;
         }
     },
-   
+        _currentLayerNumber: {
+                value: 0
+        },
     currentLayerNumber:{
-        value:0
+        get: function() {
+                return this._currentLayerNumber;
+        },
+        set: function(newVal) {
+                if (newVal !== this._currentLayerNumber) {
+                        this._currentLayerNumber = newVal;
+                }
+        }
     },
 
     millisecondsOffset:{
-        value:5000
+        value:1000
     },
 
     // Track model
@@ -139,15 +149,22 @@ 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);
 
             // 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
@@ -159,6 +176,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             _firstLayerDraw = false;
             NJevent('newLayer',this._hashKey);
             _firstLayerDraw = true;
+            this.selectLayer(0);
 
             // TODO - add condition for existing doc and parse DOM for top level elements
         }
@@ -166,8 +184,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 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleAddLayerClick:{
         value:function(event){
-            event.stopPropagation();
+            //event.stopPropagation();
             this._isLayer = true;
             this.needsDraw = true;
         }
@@ -191,7 +210,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 +249,21 @@ 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);
+                        }
+                }
+        },
+
      handleNewLayer:{
         value:function(event){
             // Add a new layer.  It should be added above the currently selected layer,
@@ -315,6 +349,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 +376,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++) {