1 files changed, 77 insertions, 4 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index e0825893..a8934017 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;
 
@@ -155,6 +156,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             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);
+            this.timeline_leftpane.addEventListener("blur", this.timelineLeftPanelBlur.bind(this), false);
+            this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false);
+            
+            
 
             // Simultaneous scrolling of the layer and tracks
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -194,7 +202,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleAddLayerClick:{
         value:function(event){
-            event.stopPropagation();
+            //event.stopPropagation();
             this._isLayer = true;
             this.needsDraw = true;
 
@@ -203,7 +211,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";
@@ -237,6 +245,60 @@ 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 = 0,
+                                        i = 0,
+                                        arrLayersLength = this.arrLayers.length;
+                                        console.log(strLabel);
+                                for (i = 0; i < arrLayersLength; i++) {
+                                        if (this.arrLayers[i].layerName === strLabel) {
+                                                myIndex = i;
+                                                this.arrLayers[i].isSelected = true;
+                                        } else {
+                                                this.arrLayers[i].isSelected = false;
+                                        }
+                                }
+                        }
+                }
+        },
+        
+        timelineLeftPanelBlur: {
+                value: function(event) {
+                        console.log('blur called with ' + this._skipNextBlur);
+                        if (this._skipNextBlur === true) {
+                                this._skipNextBlur = false;
+                        } else {
+                                var i = 0,
+                                        arrLayersLength = this.arrLayers.length;
+                                for (i = 0; i < arrLayersLength; i++) {
+                                        this.arrLayers[i].isSelected = false;
+                                }
+                                this.layerRepetition.selectedIndexes = null;
+                        }
+                }
+        },
+        _skipNextBlur : {
+                value: false
+        },
+        timelineLeftPanelMousedown : {
+                value: function(event) {
+                        console.log(event.target.classList)
+                        var ptrParent = nj.queryParentSelector(event.target, ".label-style");
+                        console.log('mousedown with ' + ptrParent)
+                        if (ptrParent !== false) {
+                                this._skipNextBlur = true;
+                        }
+                }
+        },
+
      handleNewLayer:{
         value:function(event){
             // Add a new layer.  It should be added above the currently selected layer,
@@ -314,6 +376,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         thingToPush.arrLayerStyles = [];
                         thingToPush.element=[];
                         thingToPush.deleted=false;
+                        thingToPush.isSelected = false;
                         thingToPush.parentElement=this.application.ninja.currentSelectedContainer;
                        // this.layerElement.dataset.parentUUID=this.application.ninja.currentSelectedContainer.uuid;
 
@@ -332,14 +395,24 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                             this.hashInstance.setItem(this._hashKey,thingToPush,myIndex);
                             this.hashTrackInstance.setItem(this._hashKey,newTrack,myIndex);
                             thingToPush.layerPosition=myIndex;
+                            thingToPush.isSelected = true;
                             newTrack.trackPosition=myIndex;
                             this.arrLayers.splice(myIndex, 0, thingToPush);
                             this.arrTracks.splice(myIndex, 0, newTrack);
                             this.currentLayerSelected= this.arrLayers[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];
                         } 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];