5 files changed, 1565 insertions, 1474 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 6c5e030c..0d769c23 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -54,7 +54,6 @@ POSSIBILITY OF SUCH DAMAGE.
                         "playheadmarker": {"#": "playhead_marker"},
                         "timetext" : {"#": "time_text"},
                         "timebar" : {"#": "time_bar"},
-                        "container_tracks" : {"#" : "container-tracks"},
                         "end_hottext" : {"@" : "endHottext"},
                         "container_layers" : {"#" : "container-layers"},
                         "container_tracks" : {"#" : "container-tracks"},
@@ -62,8 +61,23 @@ POSSIBILITY OF SUCH DAMAGE.
                         "checkable_animated" : {"#" : "checkable_animated"},
                         "tl_configbutton" : {"#" : "tl-configbutton"},
                         "checkable_lock" : {"#" : "checkable_lock"},
-                        "checkable_visible":{"#" : "checkable_visible"},
-                        "play_button" : {"#" : "play_button"}
+                        "checkable_visible":{"#" : "checkable_visible"}
+
+                    }
+                },
+
+                "playButton": {
+                    "prototype": "montage/ui/toggle-button.reel",
+                    "properties": {
+                        "element": {"#": "play_button"},
+                        "identifier": "playButton",
+                        "pressedClass": "pausebutton",
+                        "pressedLabel": "",
+                        "unpressedLabel": "",
+                        "pressed": false
+                    },
+                    "bindings": {
+                        "pressed": {"<->": "@owner.stage.timelinePlay"}
                     }
                 },
 
@@ -190,7 +204,7 @@ POSSIBILITY OF SUCH DAMAGE.
                     <div data-montage-id="leftpane_inside" class="leftinside">
                         <div data-montage-id="timeline_controller" class="timelinecontroller">
                             <div data-montage-id="timeline_controls" class="timelinecontrols">
-                                <div data-montage-id="play_button" class="playbutton"></div>
+                                <button data-montage-id="play_button" class="playbutton"></button>
                                 <div data-montage-id="time_text" class="timetext">00:00:00</div>
                             </div>
                         </div>
@@ -217,7 +231,9 @@ POSSIBILITY OF SUCH DAMAGE.
                         </div>
 
                         <div data-montage-id="timeline_gutter" class="timelinegutter">
+                            <div class="sliderClass">
                             <div data-montage-id="tl_slider" class="tl_slider"></div>
+                            </div>
                             <input data-montage-id="end_hottext" class="endhottext">
                         </div>
                     </div>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a1e03b35..521c315d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -30,109 +30,265 @@ POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
 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;
+        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, {
 
+    _stage: {
+        value: null
+    },
+
+    stage: {
+        get: function() {
+            return this._stage;
+        },
+        set: function(value) {
+            if(value) {
+                this._stage = value;
+            }
+        }
+    },
+
+    /* === BEGIN: Models === */
+        _user_layers: {
+                value: null
+        },
     user_layers: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._user_layers;
+        },
+        set: function(newVal) {
+                this._user_layers = newVal;
+        }
     },
 
+        _track_container: {
+                value: null
+        },
     track_container: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._track_container;
+        },
+        set: function(newVal) {
+                this._track_container = newVal;
+        }
     },
 
+        _timeline_leftpane: {
+                value: null
+        },
     timeline_leftpane: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._timeline_leftpane;
+        },
+        set: function(newVal) {
+                this._timeline_leftpane = newVal;
+        }
     },
 
+        _layer_tracks: {
+                value: null
+        },
     layer_tracks: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._layer_tracks;
+        },
+        set: function(newVal) {
+                this._layer_tracks = newVal;
+        }
     },
 
+        _master_track: {
+                value: null
+        },
     master_track: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._master_track;
+        },
+        set: function(newVal) {
+                this._master_track = newVal;
+        }
     },
 
+        _time_markers: {
+                value: null
+        },
     time_markers: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._time_markers;
+        },
+        set: function(newVal) {
+                this._time_markers = newVal;
+        }
     },
 
+        _playhead: {
+                value: null
+        },
     playhead: {
-        value: null,
-        serializable: true
+        serializable: true,
+        get: function() {
+                return this._playhead;
+        },
+        set: function(newVal) {
+                this._playhead = newVal;
+        }
     },
 
+        _playheadmarker: {