7 files changed, 1514 insertions, 944 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index daeb9a3c..f821ba6f 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -18,11 +18,9 @@
                         "element": {"#": "timeline_panel"},
                         "user_layers": {"#": "user_layers"},
                         "track_container": {"#": "right_inside"},
-                        "timeline_leftpane" : {"#" : "timeline_leftpane"},
+                        "timeline_leftpane" : {"#" : "leftpane_inside"},
                         "layer_tracks": {"#": "layer_tracks"},
                         "master_track": {"#": "master_track"},
-                        "newlayer_button": {"#": "newlayer_button"},
-                        "deletelayer_button": {"#": "deletelayer_button"},
                         "time_markers" : {"#": "timeline_markers"},
                         "layerRepetition" : {"@": "repetition1"},
                         "trackRepetition" : {"@" : "repetition2"},
@@ -33,7 +31,11 @@
                         "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"},
+                        "tl_configbutton" : {"#" : "tl-configbutton"}
                     }
                 },
 
@@ -73,7 +75,12 @@
                                 "boundObject" : {"@" : "repetition1"},
                                 "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
                                 "oneway" : false
-                        }
+                        },
+                        "bindingPoint" : {
+                            "boundObject" : {"@" : "repetition1"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
+                            "oneway" : false
+                        }
                         }
                     },
                     
@@ -101,9 +108,33 @@
                             "boundObject" : {"@" : "repetition2"},
                             "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
                             "oneway" : false
+                        },
+                        "bindingPoint" : {
+                            "boundObject" : {"@" : "repetition2"},
+                            "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
+                            "oneway" : false
                         }
+                        
                         }
                     },
+
+                "timelineZoomSlider":{
+                    "module":"js/components/slider.reel",
+                    "name":"Slider",
+                    "properties":{
+                        "element":{"#":"tl_slider"},
+                        "maxValue" : 10000,
+                        "minValue" : 1000
+                    },
+                    "bindings": {
+                        "value": {
+                            "boundObject": {"@": "owner"},
+                            "boundObjectPropertyPath": "millisecondsOffset",
+                            "oneway": false
+                        }
+                    }
+                },
+
                 "endHottext" : {
                     "prototype": "js/components/hottextunit.reel[HotTextUnit]",
                     "properties": {
@@ -144,16 +175,26 @@
                         
                         <div id="user_layers" class="userlayers">
                             <div id="master_layer" class="masterlayer">
-                                <div>Master Layer</div>
+                                <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>
+                                        </div>
+                                
+                                </div>
+
                             </div>
-                            <div id="container-layers">
+                            <div id="container-layers" style="position: relative;" class="container-layers">
                                 <div id="container-layer"></div>
                             </div>
                         </div>
 
                         <div id="timeline_gutter" class="timelinegutter">
-                            <div id="newlayer_button" class="newlayerbutton"></div>
-                            <div id="deletelayer_button" class="deletelayerbutton"></div>
+                            <div id="tl_slider" class="tl_slider"></div>
                             <input id="end_hottext" class="endhottext">
                         </div>
                     </div>
@@ -190,4 +231,4 @@
         </div>
 
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 033d0f79..70e04b4c 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -6,10 +6,7 @@
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
-var Layer = require("js/panels/Timeline/Layer.reel").Layer;
-var TimelineTrack = require("js/panels/Timeline/TimelineTrack.reel").TimelineTrack;
 var nj = require("js/lib/NJUtils").NJUtils;
-var ElementMediator = require("js/mediators/element-mediator").ElementMediator;
 
 var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
@@ -19,19 +16,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     /* === BEGIN: Models === */
     _arrLayers:{
-        serializable: true,
+        serializable:true,
         value:[]
     },
 
     arrLayers:{
-        serializable: true,
+        serializable:true,
         get:function () {
             return this._arrLayers;
         },
         set:function (newVal) {
             this._arrLayers = newVal;
             this.needsDraw = true;
-            this._cacheArrays();
+            this.cacheTimeline();
         }
     },
 
@@ -50,12 +47,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
 
     _layerRepetition:{
-        serializable: true,
+        serializable:true,
         value:null
     },
 
     layerRepetition:{
-        serializable: true,
+        serializable:true,
         get:function () {