3 files changed, 2204 insertions, 7 deletions

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"}
                     }
                 },
 
@@ -178,6 +180,8 @@
                                         <div class="tl-configbutton" data-montage-id="tl-configbutton">
                                                 <div class="tl-dropdown">
                                                         <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
+                                            <div class="checkable" data-montage-id="checkable_lock">Lock Layers</div>
+                                            <div class="checkable" data-montage-id="checkable_visible">Visibility of Layers</div>
                                                 </div>
                                         </div>
                                 
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 89389469..2cbd9e2b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -747,6 +747,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 = [];
         }
     },
     
@@ -865,6 +866,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false);
             document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false);
             this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
+                        this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
+            this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
             
             // Bind some bindings
             Object.defineBinding(this, "currentSelectedContainer", {
@@ -1139,7 +1142,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             for (i = 0; i < arrLayersLength; i++) {
                 if (this.arrLayers[i].layerData.isSelected === true) {
                         if (arrSelectedIndexes.indexOf(i) < 0) {
-
                                                 this.arrLayers[i].layerData.isSelected = false;
                                 this.triggerLayerBinding(i);
                         }
@@ -1157,11 +1159,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);
+                    }
                 }
             }
 
@@ -1415,6 +1422,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData._isFirstDraw = true;
             thingToPush.layerData.created = true;
             thingToPush.layerData.stageElement = object;
+            thingToPush.layerData.isLock = false;
+            thingToPush.layerData.isHidden = false;
+
 
             if (this.checkable_animated.classList.contains("checked")) {
                 thingToPush.layerData.isVisible = false;
@@ -1732,6 +1742,74 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
+    handleLockLayerClick:{
+        value:function(event){
+
+           var arrLayersLength = this.arrLayers.length;
+           var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length;
+           var i = 0;
+
+           if(event.currentTarget.classList.contains("checked")){
+               event.currentTarget.classList.remove("checked");
+               for(i=0;i<arrLayersLength;i++){
+                   this.arrLayers[i].layerData.isLock = false;
+                   this.arrLayers[i].layerData.isSelected = true;
+                   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;
+                     }
+                   }
+
+               }
+           } else {
+               for(i = 0;i < arrLayersLength;i++){
+                   if(!this.arrLayers[i].layerData.isLock){
+                       this.arrLayers[i].layerData.isLock = true;
+                       this.arrLayers[i].layerData.isSelected = false;
+                       this.application.ninja.currentDocument.lockedElements.push(this.arrLayers[i].layerData.stageElement);
+                   }
+                   this.selectLayers([]);
+
+               }
+               event.currentTarget.classList.add("checked");
+           }
+        }
+    },
+
+    handleLayerVisibleClick:{
+        value:function(event){
+           var arrLayersLength = this.arrLayers.length;
+           var lockElementArrLength = this.application.ninja.currentDocument.lockedElements.length;
+           var i = 0;
+
+           if(event.currentTarget.classList.contains("checked")){
+               event.currentTarget.classList.remove("checked");
+               for(i = 0; i < arrLayersLength; i++){
+                   this.arrLayers[i].layerData.isHidden = false;
+                   this.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;
+                       }
+                   }
+
+               }
+           } else {
+               for(i = 0; i < arrLayersLength; i++){
+                   if(!this.arrLayers[i].layerData.isHidden){
+                       this.arrLayers[i].layerData.isHidden = true;
+                       this.arrLayers[i].layerData.stageElement.style.visibility = "hidden";
+                       this.application.ninja.currentDocument.lockedElements.push(this.arrLayers[i].layerData.stageElement);
+                   }
+
+               }
+               event.currentTarget.classList.add("checked");
+           }
+        }
+    },
+
         // A layer's ID has been updated in the property panel. We need to update
         // our layer.
         handleLayerIdUpdate: {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig
new file mode 100644
index 00000000..59263fc3
--- /dev/null
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js.orig
@@ -0,0 +1,2115 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+
+var Montage = require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component,
+        nj = require("js/lib/NJUtils").NJUtils,
+        EasingMenuPopup = require("js/panels/Timeline/EasingMenu.reel").EasingMenu;
+
+var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
+
+    user_layers: {
+        value: null,
+        serializable: true
+    },
+
+    track_container: {
+        value: null,