7 files changed, 906 insertions, 329 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 9eb126e0..09c1f98c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -32,7 +32,10 @@
                         "container_tracks" : {"#" : "container-tracks"},
                         "end_hottext" : {"@" : "endHottext"},
                         "container_layers" : {"#" : "container-layers"},
-                        "timeline_disabler" : {"#" : "timeline-disabler"}
+                        "timeline_disabler" : {"#" : "timeline-disabler"},
+                        "checkable_relative" : {"#" : "checkable_relative"},
+                        "checkable_absolute" : {"#" : "checkable_absolute"},
+                        "checkable_animated" : {"#" : "checkable_animated"}
                     }
                 },
 
@@ -179,6 +182,14 @@
                         <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>
                             </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 d18617f7..39d1ffc6 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -294,24 +294,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 if (newVal !== this._dropLayerID) {
                         this._dropLayerID = newVal;
                         
-                        var myNewArray = [],
-                                dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
+                        var dragLayerIndex = this.getLayerIndexByID(this.dragLayerID),
                                 dropLayerIndex = this.getLayerIndexByID(this.dropLayerID),
-                                dragLayer = myNewArray[dragLayerIndex],
-                                thing;
-                        
-                        // Copy arrLayers into new array; we want to avoid referencing.
-                        for (thing in this.arrLayers) {
-                                myNewArray[thing] = this.arrLayers[thing];
-                        }
+                                dragLayer = this.arrLayers[dragLayerIndex];
 
-                                // Operate on new array
-                        myNewArray.splice(dragLayerIndex, 1);
-                        myNewArray.splice(dropLayerIndex, 0, dragLayer);
-                        
-                        // Feed new array into repetition
-                        this.arrLayers = myNewArray;
-                        // Store reference in currentDocument.
+                        this.arrLayers.splice(dragLayerIndex, 1);
+                        this.arrLayers.splice(dropLayerIndex, 0, dragLayer);
                         this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
                         
                         // Clear for future DnD
@@ -319,7 +307,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         this._dragLayerID = null;
                         
                         // Sometimes, just to be fun, the drop and dragend events don't fire.
-                        // To avoid this, set the draw routine to delete the helper here.
+                        // So just in case, set the draw routine to delete the helper.
                         this._deleteHelper = true;
                         this.needsDraw = true;
                 }
@@ -349,6 +337,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
             this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
             this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
+            
+            // Bind the handlers for the config menu
+            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);
         }
     },
 
@@ -362,7 +355,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     
     draw: {
         value: function() {
-                
                 // Drag and Drop:
                 // Do we have a helper to append?
             if (this._appendHelper === true) {
@@ -398,8 +390,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 this._dragAndDropHelper = null;
                                 this._deleteHelper = false;
                         }
-                    } 
-                    
+                    }
                 }
         }
     },
@@ -429,8 +420,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             returnObj.layerData.trackPosition = 0;
             returnObj.layerData.arrStyleTracks = [];
             returnObj.layerData.tweens = [];
+            returnObj.layerData.layerTag = "";
+            returnObj.layerData.isVisible = true;
+            returnObj.layerData.isTrackAnimated = false;
             returnObj.parentElementUUID = null;
             returnObj.parentElement = null;
+            
             return returnObj;
         }
     },
@@ -588,7 +583,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected;
                 this.application.ninja.currentSelectedContainer=this.application.ninja.currentDocument.tlCurrentSelectedContainer;
-
+                                if (this.application.ninja.currentDocument.boolShowOnlyAnimated) {
+                                        // Fake a click.
+                                        var evt = document.createEvent("MouseEvents");
+                                        evt.initMouseEvent("click");
+                                        this.checkable_animated.dispatchEvent(evt);
+                                }
             }
         }
     },
@@ -608,14 +608,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.application.ninja.timeline.playheadmarker.style.left = "0px";
             this.application.ninja.timeline.updateTimeText(0.00);
             this.timebar.style.width = "0px";
-
+                        this.checkable_animated.classList.remove("checked");
             this.currentLayerNumber = 0;
             this.currentLayerSelected = false;
             this.selectedKeyframes = [];
             this.selectedTweens = [];
             this._captureSelection = false;
             this._openDoc = false;
-//            this._firstTimeLoaded = true;
             this.end_hottext.value = 25;
             this.updateTrackContainerWidth();
             this.masterDuration = 0;
@@ -641,7 +640,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if (this.application.ninja.documentController._documents.length > 0) {
                 this.enablePanel(true);
                 this.initTimelineForDocument();
-
             } else {
                 this.enablePanel(false);
             }
@@ -664,6 +662,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function () {
             this.user_layers.scrollTop = this.layout_tracks.scrollTop;
             this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
+                this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px";