4 files changed, 122 insertions, 378 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 09c1f98c..5234b43d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -35,7 +35,8 @@
                         "timeline_disabler" : {"#" : "timeline-disabler"},
                         "checkable_relative" : {"#" : "checkable_relative"},
                         "checkable_absolute" : {"#" : "checkable_absolute"},
-                        "checkable_animated" : {"#" : "checkable_animated"}
+                        "checkable_animated" : {"#" : "checkable_animated"},
+                        "tl_configbutton" : {"#" : "tl-configbutton"}
                     }
                 },
 
@@ -181,15 +182,18 @@
                         
                         <div id="user_layers" class="userlayers">
                             <div id="master_layer" class="masterlayer">
-                                <div>Master Layer</div>
-                                <div class="tl-configbutton">
-                                        <div class="tl-dropdown">
-                                                                                <div class="checkable checked" data-montage-id="checkable_relative">Use relative positioning</div>
-                                                                                <div class="checkable" data-montage-id="checkable_absolute">Use absolute positioning</div>
-                                                                                <div class="nj-divider divider-horizontal"></div>
-                                                <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
-                                        </div>
+                                <div class="layer-master">Master Layer
+                                        <div class="tl-configbutton" data-montage-id="tl-configbutton">
+                                                <div class="tl-dropdown">
+                                                                                        <div class="checkable checked" data-montage-id="checkable_relative">Use relative positioning</div>
+                                                                                        <div class="checkable" data-montage-id="checkable_absolute">Use absolute positioning</div>
+                                                                                        <div class="nj-divider divider-horizontal"></div>
+                                                        <div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
+                                                </div>
+                                        </div>
+                                
                                 </div>
+
                             </div>
                             <div id="container-layers" style="position: relative;" class="container-layers">
                                 <div id="container-layer"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 39d1ffc6..8d8b86c1 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -342,6 +342,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
             this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false);
             this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false);
+            this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
+            document.addEventListener("click", this.handleDocumentClick.bind(this), false);
         }
     },
 
@@ -772,6 +774,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.isSelected = true;
             thingToPush.layerData._isFirstDraw = true;
             thingToPush.layerData.created = true;
+            
+            if (this.checkable_animated.classList.contains("checked")) {
+                thingToPush.layerData.isVisible = false;
+            }
 
             for (i = 0; i < this.arrLayersLength; i++) {
                 this.arrLayers[i].layerData.isSelected = false;
@@ -801,7 +807,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.currentLayerNumber = this.currentLayerNumber + 1;
             newLayerName = "Layer " + this.currentLayerNumber;
 
-            if (ele.dataset.storedLayerName) {
+            if(ele.dataset.storedLayerName){
                 newLayerName = ele.dataset.storedLayerName;
             }
             thingToPush.layerData.layerName = newLayerName;
@@ -809,7 +815,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
             thingToPush.parentElementUUID = this.hashKey;
             thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
-
+            if (this.checkable_animated.classList.contains("checked")) {
+                thingToPush.layerData.isVisible = false;
+            }
             // Are there styles to add?
             thingToPush.layerData.arrLayerStyles = this.createLayerStyles();
             thingToPush.layerData.arrStyleTracks = this.createStyleTracks();
@@ -823,6 +831,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             thingToPush.layerData.layerPosition = this.temparrLayers.length - 1;
 
             this._openDoc = false;
+
+
         }
     },
 
@@ -1086,8 +1096,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             }
         }
     },
+    handleConfigButtonClick: {
+        value: function(event) {
+                event.stopPropagation();
+                this.handleCheckableClick(event);
+                
+        }
+    },
+    handleDocumentClick: {
+        value: function(event) {
+                if (this.tl_configbutton.classList.contains("checked")) {
+                        this.tl_configbutton.classList.remove("checked");
+                }
+        }
+    },
+    
     handleAnimatedClick: {
         value: function(event) {
+                if (typeof(this.application.ninja.currentDocument) === "undefined") {
+                        return;
+                }
+                if (this.application.ninja.currentDocument == null) {
+                        return;
+                }
                 this.handleCheckableClick(event);
                 this.application.ninja.currentDocument.boolShowOnlyAnimated = event.currentTarget.classList.contains("checked");
                 var boolHide = false,
@@ -1115,14 +1146,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleRelativeClick: {
         value: function(event) {
-                this.handleCheckableClick(event);
+                if (!event.currentTarget.classList.contains("checked")) {
+                        this.handleCheckableClick(event);
+                }
                 this.checkable_absolute.classList.remove("checked");
                 // TODO: Use relative positioning
         }
     },
     handleAbsoluteClick: {
         value: function(event) {
-                this.handleCheckableClick(event);
+                if (!event.currentTarget.classList.contains("checked")) {
+                        this.handleCheckableClick(event);
+                }
                 this.checkable_relative.classList.remove("checked");
                 // TODO: Use absolute positioning.
         }
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index d2a31033..29bf8d38 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -1,436 +1,138 @@
 @charset "UTF-8";
-/* <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> */
-/* TimelinePanel.scss
- * Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css.
- */
+/* <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> */
+/* TimelinePanel.scss Main SCSS file for TimelinePanel component, compiled by SASS into the file css/TimelinePanel.css. */
 /* line 22, ../scss/TimelinePanel.scss */
-.tl_container {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  height: 100%;
-}
+.tl_container { display: -webkit-box; -webkit-box-orient: vertical; height: 100%; }
 
 /* line 27, ../scss/TimelinePanel.scss */
-.maintimeline {
-  -webkit-box-flex: 1;
+.maintimeline { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: horizontal; height: 100%; position: relative; margin-top: 1px; }