1 files changed, 102 insertions, 55 deletions

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";
         }
     },
 
@@ -767,6 +766,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.currentLayerNumber = this.currentLayerNumber + 1;
             newLayerName = "Layer " + this.currentLayerNumber;
             thingToPush.layerData.layerName = newLayerName;
+            thingToPush.layerData.layerTag = "<" + object.nodeName.toLowerCase() + ">";
             thingToPush.layerData.layerID = this.currentLayerNumber;
             thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
             thingToPush.layerData.isSelected = true;
@@ -784,48 +784,45 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 thingToPush.layerData.layerPosition = myIndex;
                 thingToPush.layerData.trackPosition = myIndex;
                 this.arrLayers.splice(myIndex, 0, thingToPush);
-
             } else {
                 thingToPush.layerData.layerPosition = myIndex;
                 this.arrLayers.splice(myIndex, 0, thingToPush);
 
             }
-
             this.selectLayer(myIndex);
-
         }
     },
 
     restoreLayer:{
         value:function (ele) {
 
-                var newLayerName, thingToPush = this.createLayerTemplate();
+            var newLayerName, thingToPush = this.createLayerTemplate();