5 files changed, 109 insertions, 69 deletions

diff --git a/js/panels/Materials/materials-data.json b/js/panels/Materials/materials-data.json
index abdacbe1..6fe5da69 100644
--- a/js/panels/Materials/materials-data.json
+++ b/js/panels/Materials/materials-data.json
@@ -5,10 +5,18 @@
             "label": "Ninja Materials",
             "children": [
                 {
+                    "label": "Blue Sky",
+                    "id" : "Blue Sky"
+               },
+               {
                     "label": "Bump Metal",
                     "id" : "Bump Metal"
                 },
-                {
+                 {
+                    "label": "Dark Blur",
+                    "id" : "Dark Blur"
+                },
+               {
                     "label": "Flag",
                     "id" : "Flag"
                 },
@@ -17,10 +25,6 @@
                     "id" : "Linear Gradient"
                 },
                 {
-                    "label": "Paris",
-                    "id" : "Paris"
-                },
-                {
                     "label": "Plasma",
                     "id" : "Plasma"
                 },
@@ -29,6 +33,10 @@
                     "id" : "Pulse"
                 },
                 {
+                    "label": "Radial Blur",
+                    "id" : "Radial Blur"
+                },
+                {
                     "label": "Radial Gradient",
                     "id" : "Radial Gradient"
                 },
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/Timelin