1 files changed, 124 insertions, 10 deletions

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++) {
+                                                                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);
                             thingToPush.layerPosition=this.arrLayers.length-1;
                             newTrack.trackPosition=this.arrTracks.length-1;
                             this.currentLayerSelected= this.arrLayers[this.arrLayers.length-1];
@@ -710,6 +760,70 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {