5 files changed, 218 insertions, 10 deletions

diff --git a/js/document/views/design.js b/js/document/views/design.js
index 44c61617..f4302371 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -97,6 +97,19 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     },
     ////////////////////////////////////////////////////////////////////
     //
+    _lockedElements: { value: [], enumerable: false },
+    ////////////////////////////////////////////////////////////////////
+    //
+    lockedElements: {
+        get: function() {
+            return this._lockedElements;
+        },
+        set:function(value){
+            this._lockedElements = value;
+        }
+    },
+    ////////////////////////////////////////////////////////////////////
+    //
     getLiveNodeList: {
         value: function(useFilter) {
             if(useFilter) {
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 0abd97be..776d5ec8 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -368,6 +368,41 @@ var Layer = exports.Layer = Montage.create(Component, {
                 this.layerData.isVisible = value;
         }
     },
+
+    _isLock:{
+        value: false
+    },
+
+    isLock:{
+        get:function(){
+            return this._isLock;
+        },
+        set:function(value){
+            if (this._isLock !== value) {
+                this._isLock = value;
+
+            }
+            this.layerData.isLock = value;
+        }
+    },
+
+    _isHidden:{
+        value: false
+    },
+
+    isHidden:{
+        get:function(){
+            return this._isHidden;
+        },
+        set:function(value){
+            if (this._isHidden !== value) {
+                this._isHidden = value;
+
+            }
+            this.layerData._isHidden = value;
+        }
+    },
+
     
     _justAdded: {
         value: false
@@ -508,6 +543,8 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.docUUID = this.layerData.docUUID;
             this.selectedStyleIndex = this.layerData.selectedStyleIndex;
             this.needsDraw = boolNeedsDraw;
+            this.isLock = this.layerData.isLock;
+            this.isHidden = this.layerData.isHidden;
         }
     },
     
@@ -555,6 +592,8 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.mainCollapser.clicker.addEventListener("click", this.handleMainCollapserClick.bind(this), false);
             this.positionCollapser.clicker.addEventListener("click", this.handlePositionCollapserClick.bind(this), false);
             this.styleCollapser.clicker.addEventListener("click", this.handleStyleCollapserClick.bind(this), false);
+            this.layerLock.addEventListener("click",this.handleLayerLock.bind(this),false);
+            this.visibilityButton.addEventListener("click",this.handleLayerVisibility.bind(this),false);
 
             // Add event listeners to add and delete style buttons
             this.buttonAddStyle.addEventListener("click", this.handleAddStyleClick.bind(this), false);
@@ -1223,6 +1262,78 @@ 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.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.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;
+
+        }
+    },
+
+    handleLayerVisibility:{
+        value:function(){
+            var i = 0;
+            var arrlength = this.application.ninja.timeline.arrLayers.length;
+            var lockElementArrLength=this.application.ninja.currentDocument.lockedElements.length;
+            if(!this.layerData.isHidden){
+                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.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.stageElement){
+                                this.application.ninja.currentDocument.lockedElements.splice(k,1);
+                                break;
+                            }
+                        }
+                    }
+
+                }
+             this.layerData.stageElement.style.visibility = "hidden";
+             this.application.ninja.currentDocument.lockedElements.push(this.layerData.stageElement);
+
+            } else {
+                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.stageElement){
+                        this.application.ninja.currentDocument.lockedElements.splice(k,1);
+                        break;
+                    }
+                }
+            }
+            this.layerData.isHidden = !this.layerData.isHidden;
+
+        }
+    },
+
 
         /* End: Event handlers */
         
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 9e2bacd5..eac361a8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -35,7 +35,9 @@
                         "container_tracks" : {"#" : "container-tracks"},
                         "timeline_disabler" : {"#" : "timeline-disabler"},
                         "checkable_animated" : {"#" : "checkable_animated"},
-                        "tl_configbutton" : {"#" : "tl-configbutton"}
+                        "tl_configbutton" : {"#" : "tl-configbutton"},
+                        "checkable_lock" : {"#" : "checkable_lock"},
+                        "checkable_visible":{"#" : "checkable_visible"}