3 files changed, 54 insertions, 60 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.html b/js/panels/Timeline/Layer.reel/Layer.html
index 3648cbbb..5ee50491 100644
--- a/js/panels/Timeline/Layer.reel/Layer.html
+++ b/js/panels/Timeline/Layer.reel/Layer.html
@@ -27,7 +27,9 @@
                         "topControl": {"@" : "dtext_position_y"},
                         "widthControl": {"@" : "dtext_scale_x"},
                         "heightControl": {"@" : "dtext_scale_y"},
-                        "styleType":{"@" : "style"}
+                        "styleType":{"@" : "style"},
+                        "layerLock":{"#" : "layerLock"},
+                        "visibilityButton":{"#" : "visibilityButton"}
                     }
                 },
                     "dtext1" : {
@@ -262,8 +264,8 @@
                                 <span data-montage-id="layer-tag" class="layer-tag"></span>
                                 <span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
                                 <span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
-                                <div class="cssbutton button-lock"></div>
-                                <div class="cssbutton button-visible"></div>
+                <div class="cssbutton button-lock" data-montage-id="layerLock"></div>
+                <div class="cssbutton button-visible" data-montage-id="visibilityButton"></div>
                         </div>
                         <div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main">
                                 <div class="label-position">
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 970f2b65..776d5ec8 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -1263,39 +1263,40 @@ var Layer = exports.Layer = Montage.create(Component, {
     },
 
     handleLayerLock: {
-            value: function() {
-               var i = 0;
-               var arrlength = this.application.ninja.timeline.arrLayers.length;
-               var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length;
-               if(!this.layerData.isLock){
-                   for(i = 0; i < arrlength; i++){
-                      if(this.application.ninja.timeline.arrLayers[i].layerData.isLock){
-                          this.application.ninja.timeline.arrLayers[i].layerData.isLock = false;
-                          this.application.ninja.timeline.arrLayers[i].layerData.isSelected = false;
-                          for(var k = 0; k < lockElementArrLength; k++){
-                              if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.elementsList[0]){
-                                  this.application.ninja.currentDocument.lockedElements.splice(k,1);
-                                  break;
-                              }
+        value: function() {
+           var i = 0;
+           var arrlength = this.application.ninja.timeline.arrLayers.length;
+           var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length;
+           if(!this.layerData.isLock){
+               for(i = 0; i < arrlength; i++){
+                  if(this.application.ninja.timeline.arrLayers[i].layerData.isLock){
+                      this.application.ninja.timeline.arrLayers[i].layerData.isLock = false;
+                      this.application.ninja.timeline.arrLayers[i].layerData.isSelected = false;
+                      for(var k = 0; k < lockElementArrLength; k++){
+                          if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.stageElement){
+                              this.application.ninja.currentDocument.lockedElements.splice(k,1);
+                              break;
                           }
                       }
-                   }
-                   this.layerData.isSelected = false;
-                   this.application.ninja.timeline.selectLayers([]);
-                   this.application.ninja.currentDocument.lockedElements.push(this.layerData.elementsList[0]);
-               } else {
-                   this.layerData.isSelected = true;
-                   for(k = 0; k<lockElementArrLength; k++){
-                     if(this.application.ninja.currentDocument.lockedElements[k] === this.layerData.elementsList[0]){
-                         this.application.ninja.currentDocument.lockedElements.splice(k,1);
-                         break;
-                     }
-                   }
+                  }
+               }
+               this.layerData.isSelected = false;
+               this.application.ninja.timeline.selectLayers([]);
+               this.application.ninja.currentDocument.lockedElements.push(this.layerData.stageElement);
+           } else {
+               this.layerData.isSelected = true;
+               for(k = 0; k<lockElementArrLength; k++){
+                 if(this.application.ninja.currentDocument.lockedElements[k] === this.layerData.stageElement){
+                     this.application.ninja.currentDocument.lockedElements.splice(k,1);
+                     break;
+                 }
                }
-               this.layerData.isLock = !this.layerData.isLock;
 
-            }
-        },
+           }
+           this.layerData.isLock = !this.layerData.isLock;
+
+        }
+    },
 
     handleLayerVisibility:{
         value:function(){
@@ -1306,9 +1307,9 @@ var Layer = exports.Layer = Montage.create(Component, {
                 for(i = 0; i<arrlength; i++){
                     if(this.application.ninja.timeline.arrLayers[i].layerData.isHidden){
                         this.application.ninja.timeline.arrLayers[i].layerData.isHidden = false;
-                        this.application.ninja.timeline.arrLayers[i].layerData.elementsList[0].style.visibility = "visible";
+                        this.application.ninja.timeline.arrLayers[i].layerData.stageElement.style.visibility = "visible";
                         for(var k = 0;k < lockElementArrLength;k++){
-                            if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.elementsList[0]){
+                            if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.stageElement){
                                 this.application.ninja.currentDocument.lockedElements.splice(k,1);
                                 break;
                             }
@@ -1316,13 +1317,13 @@ var Layer = exports.Layer = Montage.create(Component, {
                     }
 
                 }
-             this.layerData.elementsList[0].style.visibility = "hidden";
-             this.application.ninja.currentDocument.lockedElements.push(this.layerData.elementsList[0]);
+             this.layerData.stageElement.style.visibility = "hidden";
+             this.application.ninja.currentDocument.lockedElements.push(this.layerData.stageElement);
 
             } else {
-                this.layerData.elementsList[0].style.visibility = "visible";
+                this.layerData.stageElement.style.visibility = "visible";
                 for(var k = 0; k < lockElementArrLength; k++){
-                    if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.elementsList[0]){
+                    if(this.application.ninja.currentDocument.lockedElements[k] === this.application.ninja.timeline.arrLayers[i].layerData.stageElement){
                         this.application.ninja.currentDocument.lockedElements.splice(k,1);
                         break;
                     }
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 87e7bd2e..3b6db82e 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -732,6 +732,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.application.ninja.currentDocument.tlCurrentLayerSelected = false;
                 this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
                 this.application.ninja.currentDocument.tlCurrentElementsSelected = [];
+            this.application.ninja.currentDocument.lockedElements = [];
         }
     },
     
@@ -1119,20 +1120,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
             // Deselect selected layers if they're not in arrSelectedIndexes.
             for (i = 0; i < arrLayersLength; i++) {
-
-                debugger;
-                if([i]===arrSelectedIndexes){
-                    if(this.arrLayers[i].layerData.isLock){
-                        this.arrLayers[i].layerData.isSelected = false;
-                    }else{
-                        this.arrLayers[i].layerData.isSelected = true;
-                    }
-                }else{
-                    this.arrLayers[i].layerData.isSelected = false;
-                }
                 if (this.arrLayers[i].layerData.isSelected === true) {
                         if (arrSelectedIndexes.indexOf(i) < 0) {
-
                                                 this.arrLayers[i].layerData.isSelected = false;
                                 this.triggerLayerBinding(i);
                         }
@@ -1150,11 +1139,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             // Loop through arrLayers and do the selection.
             for (i = 0; i < arrLayersLength; i++) {
                 if (arrSelectedIndexes.indexOf(i) > -1) {
-                        this.arrLayers[i].layerData.isSelected = true;
-                        this.arrLayers[i].isSelected = true;
-                        this.triggerLayerBinding(i);
-                        arrSelectedLayers.push(i);
-                        arrCurrentElementsSelected.push(this.arrLayers[i].layerData.stageElement);
+                    if(!this.arrLayers[i].layerData.isLock){
+                        this.arrLayers[i].layerData.isSelected = true;
+                        this.arrLayers[i].isSelected = true;
+                        this.triggerLayerBinding(i);
+                        arrSelectedLayers.push(i);
+                        arrCurrentElementsSelected.push(this.arrLayers[i].layerData.stageElement);
+                    }else{
+                        this.arrLayers[i].layerData.isSelected = false;
+                        this.triggerLayerBinding(i);
+                    }
                 }
             }
 
@@ -1732,8 +1726,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function(event){
 
            var arrLayersLength = this.arrLayers.length;