8 files changed, 126 insertions, 71 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/Materials/materials-library-panel.reel/materials-library-panel.js b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
index aef48230..4b9044ae 100755
--- a/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
+++ b/js/panels/Materials/materials-library-panel.reel/materials-library-panel.js
@@ -116,6 +116,14 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
     handleShowMaterialPopup: {
         enumerable: false,
         value: function (event) {
+            var piButton = this.application.eventManager.componentClaimingPointer("mouse");
+            if(piButton) {
+                this.selectedMaterialNode = piButton.element;
+            } else {
+                this.selectedMaterialNode = null;
+            }
+
+            this.materialId = event.detail.materialId;
             this._showMaterialPopup(event.detail);
         }
     },
@@ -213,7 +221,11 @@ exports.MaterialsLibraryPanel = Montage.create(Component, {
                 contentHt = parseFloat(content.style.height) || content.offsetHeight || 0,
                 contentWd = parseFloat(content.style.width) || content.offsetWidth || 0,
                 pt = webkitConvertPointFromNodeToPage(this.selectedMaterialNode, new WebKitPoint(0, 0));
-            return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10};
+            if(!pt) {
+                return defaultPosition;
+            } else {
+                return {top: pt.y - contentHt + 10, left: pt.x - contentWd + 10};
+            }
         }
     }
 });
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 39e51901..0e7a4e68 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -111,6 +111,8 @@ exports.Splitter = Montage.create(Component, {
                 else this.panel.classList.remove("collapsed");
                 this.element.classList.remove("collapsed");
                 if(this._resizeBar != null) this.resizeBar.classList.remove("collapsed");
+                // webkitTransitionEnd is not fired when expanded, so force draw here.
+                this.application.ninja.stage.resizeCanvases = true;
             }
         }
     },
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){