4 files changed, 934 insertions, 476 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..eac361a8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -20,6 +20,7 @@
                         "track_container": {"#": "right_inside"},
                         "timeline_leftpane" : {"#" : "leftpane_inside"},
                         "layer_tracks": {"#": "layer_tracks"},
+                        "layout_tracks": {"#": "layout_tracks"},
                         "master_track": {"#": "master_track"},
                         "time_markers" : {"#": "timeline_markers"},
                         "layerRepetition" : {"@": "repetition1"},
@@ -31,11 +32,12 @@
                         "container_tracks" : {"#" : "container-tracks"},
                         "end_hottext" : {"@" : "endHottext"},
                         "container_layers" : {"#" : "container-layers"},
+                        "container_tracks" : {"#" : "container-tracks"},
                         "timeline_disabler" : {"#" : "timeline-disabler"},
-                        "checkable_relative" : {"#" : "checkable_relative"},
-                        "checkable_absolute" : {"#" : "checkable_absolute"},
                         "checkable_animated" : {"#" : "checkable_animated"},
-                        "tl_configbutton" : {"#" : "tl-configbutton"}
+                        "tl_configbutton" : {"#" : "tl-configbutton"},
+                        "checkable_lock" : {"#" : "checkable_lock"},
+                        "checkable_visible":{"#" : "checkable_visible"}
                     }
                 },
 
@@ -177,10 +179,9 @@
                                 <div class="layer-master">Master Layer
                                         <div class="tl-configbutton" data-montage-id="tl-configbutton">
                                                 <div class="tl-dropdown">
-                                                                                        <div class="checkable" data-montage-id="checkable_relative">Use relative positioning</div>
-                                                                                        <div class="checkable checked" 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 class="checkable" data-montage-id="checkable_lock">Lock Layers</div>
+                                            <div class="checkable" data-montage-id="checkable_visible">Visibility of Layers</div>
                                                 </div>
                                         </div>
                                 
@@ -210,7 +211,7 @@
 
 
                         <div data-montage-id="layer_tracks" class="tl_layertracks">
-                                <div class="layout-tracks">
+                                <div class="layout-tracks" data-montage-id="layout_tracks">
                                     <div data-montage-id="playhead_marker" class="playheadmarker"></div>
                                     <div data-montage-id="master_track" class="mastertrack">
                                     <div data-montage-id="time_bar" class="timebar"></div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index cb8185e5..2cbd9e2b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -4,9 +4,10 @@
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
 
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-var nj = require("js/lib/NJUtils").NJUtils;
+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, {
 
@@ -223,12 +224,29 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._layerRepetition = newVal;
         }
     },
+    
+    _areTracksScrolling: {
+        value: false
+    },
+    
+    _currentOpenSpanMenu: {
+        value: false
+    },
+    currentOpenSpanMenu: {
+        get: function() {
+                return this._currentOpenSpanMenu;
+        },
+        set: function(newVal) {
+                this._currentOpenSpanMenu = newVal;
+        }
+    },
 
-    // Set to false to skip array caching array sets in current document
+    // Set to false to skip array caching array sets in currentDocument
     _boolCacheArrays:{
         value:true
     },
 
+        // Current layer number: iterated and used to assign layer IDs.
     _currentLayerNumber:{
         value:0
     },
@@ -257,36 +275,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
-
-    _selectedLayerID:{
-        value:false
+    _currentElementsSelected: {
+        value: []
     },
-    selectedLayerID:{
-        get:function () {
-            return this._selectedLayerID;
-        },
-        set:function (newVal) {
-            if (newVal === false) {
-                // We are clearing the timeline, so just set the value and return.
-                this._selectedLayerID = newVal;
-                return;
-            }
-            if (newVal !== this._selectedLayerID) {
-                var selectIndex = this.getLayerIndexByID(newVal);
-                this._selectedLayerID = newVal;
-                this._captureSelection = true;
-                if (this.currentLayerSelected !== false) {
-                        this.selectLayer(selectIndex, false);
-                }
-                if (this.currentLayersSelected !== false) {
-                        this.selectLayers(this.currentLayersSelected);
-                }
-                if ((this.currentLayersSelected === false) && (this.currentLayerSelected === false)) {
-                        this.selectLayers([]);
-                }
-                
-            }
-        }
+    currentElementsSelected: {
+        get: function() {
+                return this._currentElementsSelected;
+        },
+        set: function(newVal) {
+                this._currentElementsSelected = newVal;
+                this.cacheTimeline();
+        }
     },
 
     _currentLayersSelected:{
@@ -301,7 +300,34 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
-
+    
+    _easingMenu: {
+        value: null
+    },
+    easingMenu: {
+        serializable: true,
+        get: function() {
+                return this._easingMenu;
+        },
+        set: function(newVal) {
+                this._easingMenu = newVal;
+        }
+    },
+    
+    // The index of the last layer that was clicked on
+    // (used for shift-click multiselect)
+    _lastLayerClicked : {
+        value: 0
+    }, 
+    lastLayerClicked: {
+        serializable: true,
+        get: function() {
+                return this._lastLayerClicked;
+        },
+        set: function(newVal) {
+                this._lastLayerClicked = newVal
+        }
+    },
 
     _millisecondsOffset:{
         value:1000
@@ -331,7 +357,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         },
         set:function (val) {
             this._masterDuration = val;
-            this.timebar.style.width = (this._masterDuration / 12) + "px";
+            var intDur = Math.round(val/12),
+                        s