4 files changed, 96 insertions, 64 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index c287e68e..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>
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 4e9771d4..521c315d 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -36,6 +36,21 @@ var Montage = require("montage/core/core").Montage,
 
 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
@@ -1015,7 +1030,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.eventManager.addEventListener("updatedID", this.handleLayerIdUpdate.bind(this), false);
                         this.checkable_lock.addEventListener("click",this.handleLockLayerClick.bind(this),false);
             this.checkable_visible.addEventListener("click",this.handleLayerVisibleClick.bind(this),false);
-            this.play_button.addEventListener("click", this.handlePlayButtonClick.bind(this), false);
             this.addPropertyChangeListener("currentDocument.model.domContainer", this);
             
                         // Start the panel out in disabled mode by default
@@ -1638,21 +1652,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    handlePlayButtonClick:{
-        value:function(ev){
-            this.application.ninja.appModel.livePreview = !this.application.ninja.appModel.livePreview;
-
-            if (this.application.ninja.appModel.livePreview) {
-                this.play_button.classList.remove("playbutton");
-                this.play_button.classList.add("pausebutton");
-
-            } else {
-                this.play_button.classList.remove("pausebutton");
-                this.play_button.classList.add("playbutton");
-            }
-        }
-    },
-
     handleKeyframeShortcut:{
         value:function(action){
             var tempEv = {};
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index f9f5e98c..f82feb71 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -68,107 +68,116 @@ POSSIBILITY OF SUCH DAMAGE.
 .rewindbutton { background-image: url("../images/play_prev.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
 
 /* line 150, ../scss/TimelinePanel.scss */
-.playbutton { background-image: url("../images/play.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
+.playbutton { background: transparent url("../images/play.png") no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; border: none; margin: 0; min-width: 0; opacity: 0.8; }
 
-/* line 158, ../scss/TimelinePanel.scss */
-.pausebutton { background-image: url("../images/pause.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
+/* line 162, ../scss/TimelinePanel.scss */
+.playbutton:hover { background-color: #474747; opacity: 1; }
 
 /* line 166, ../scss/TimelinePanel.scss */
+.playbutton.active:hover { background-color: #474747; opacity: 1; }
+
+/* line 170, ../scss/TimelinePanel.scss */
+.playbutton:focus { -webkit-box-shadow: none; }
+
+/* line 173, ../scss/TimelinePanel.scss */
+.pausebutton { background-image: url("../images/pause.png"); }
+
+/* line 176, ../scss/TimelinePanel.scss */
 .forwardbutton { background-image: url("../images/play_next.png"); background-repeat: no-repeat; height: 18px; width: 18px; float: left; padding-right: 5px; }
 
-/* line 174, ../scss/TimelinePanel.scss */
+/* line 184, ../scss/TimelinePanel.scss */
 .timelinemarkers { height: 20px; width: 100%; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; -webkit-box-flex: 0; position: absolute; background-image: url("../images/timetick.jpg"); overflow: visible; }
 
-/* line 186, ../scss/TimelinePanel.scss */
+/* line 196, ../scss/TimelinePanel.scss */
 .layout_markers { position: absolute; overflow: hidden; top: 0px; left: 0px; height: 20px; width: 100%; border-bottom-style: solid; }
 
-/* line 196, ../scss/TimelinePanel.scss */
+/* line 206, ../scss/TimelinePanel.scss */
 .masterlayer { font-family: 'Droid Sans'; font-size: 12px; text-shadow: 1px 1px 1px black; height: 18px; background-color: #474747; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; color: white; padding-left: 15px; padding-top: 2px; }
 
-/* line 209, ../scss/TimelinePanel.scss */
+/* line 219, ../scss/TimelinePanel.scss */
 .mastertrack { -webkit-box-flex: 0; color: white; height: 20px; width: 100%; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: #3a3a3a; background-color: #232323; background-image: url("../../Track.reel/images/gridline.jpg"); }
 
-/* line 223, ../scss/TimelinePanel.scss */
+/* line 233, ../scss/TimelinePanel.scss */
 .container-tracks, .timelinemarkers, .mastertrack { width: 2000px; }
 
-/* line 226, ../scss/TimelinePanel.scss */
+/* line 236, ../scss/TimelinePanel.scss */
 .userlayers { width: 100%; background-color: #292929; -webkit-box-flex: 1; overflow: hidden; border-bottom-style: solid; border-bottom-width: thin; border-bottom-color: black; }
 
-/* line 235, ../scss/TimelinePanel.scss */
+/* line 245, ../scss/TimelinePanel.scss */
 .timelinegutter { height: 16px; padding-top: 1px; padding-left: 6px; -webkit-box-flex: 0; background-color: #474747; border-top-style: solid; border-top-width: thin; border-top-color: #3a3a3a; }
 
-/* line 245, ../scss/TimelinePanel.scss */
+/* line 255, ../scss/TimelinePanel.scss */
 .newlayerbutton { background-image: url("../images/plus.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
 
-/* line 253, ../scss/TimelinePanel.scss */
+/* line 263, ../scss/TimelinePanel.scss */
 .deletelayerbutton { background-image: url("../images/trash.png"); background-repeat: no-repeat; height: 16px; width: 16px; float: left; padding-right: 5px; }
 
-/* line 261, ../scss/TimelinePanel.scss */
+/* line 271, ../scss/TimelinePanel.scss */
 .tracktick { height: 100%; width: 15px; border-right-color: #3a3a3a; border-right-style: solid; border-right-width: thin; float: left; }
 
-/* line 269, ../scss/TimelinePanel.scss */
+/* line 279,