62 files changed, 5486 insertions, 291 deletions

diff --git a/js/panels/CSSPanel/CSSPanel.js b/js/panels/CSSPanel/CSSPanel.js
index 94860b30..cf8880a3 100644
--- a/js/panels/CSSPanel/CSSPanel.js
+++ b/js/panels/CSSPanel/CSSPanel.js
@@ -20,9 +20,9 @@ exports.CSSPanel = Montage.create(PanelBase, {
     init : {
         enumerable:true,
         value : function (){
-            this.minHeight = 300;
-            this.contentHeight = 300;
-            this.defaultHeight= 300;
+            this.minHeight = 195;
+            this.contentHeight = 195;
+            this.defaultHeight= 195;
 
             /* OLD WAY -- Removing the temporary div
             // TODO: Remove this comment once this is tested.
diff --git a/js/panels/Materials/Materials.xml b/js/panels/Materials/Materials.xml
index de07990e..e955623a 100644
--- a/js/panels/Materials/Materials.xml
+++ b/js/panels/Materials/Materials.xml
@@ -3,6 +3,9 @@
     <folder id="ninjaMaterials" label="Ninja Materials">
           <leaf id="UberMaterial" label="Uber" />
         <leaf id="BumpMetalMaterial" label="Bump Metal" />
+        <leaf id="LinearGradientMaterial" label="Linear Gradient" />
+        <leaf id="RadialGradientMaterial" label="Radial Gradient" />
+        <leaf id="FlatMaterial" label="Flat" />
     </folder>
     <folder id="customMaterials" label="Custom Materials">
         <leaf id="CheckerBoard" label="CheckerBoard" />
diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js
index afdc3628..62ca5395 100644
--- a/js/panels/Materials/materials-popup.reel/materials-popup.js
+++ b/js/panels/Materials/materials-popup.reel/materials-popup.js
@@ -236,21 +236,11 @@ exports.MaterialsPopup = Montage.create(Component, {
                 {
            this._materialName = materialID;
             if( 
-                                        (materialID === "BrickMaterial")                                ||
-                                        (materialID ===  "UberMaterial")                                || 
+                                        (materialID ===  "UberMaterial")                                ||
                                         (materialID ===  "FlatMaterial")                                ||
                                         (materialID ===  "BumpMetalMaterial")                   ||
-                                        (materialID ===  "PlasmaMaterial")                              ||
                                         (materialID ===  "LinearGradientMaterial")              ||
-                                        (materialID ===  "RadialGradientMaterial")              ||
-                                        (materialID ===  "RadialBlurMaterial")                  ||
-                                        (materialID ===  "PulseMaterial")                               ||
-                                        (materialID ===  "TunnelMaterial")                              ||
-                                        (materialID ===  "TwistMaterial")                               ||
-                                        (materialID ===  "KeleidoscopeMaterial")                ||
-                                        (materialID ===  "JuliaMaterial")                               ||
-                                        (materialID ===  "MandelMaterial")                              ||
-                                        (materialID ===  "IridescentScalesMaterial")
+                                        (materialID ===  "RadialGradientMaterial")
                                 )
                         {
                                 var material = MaterialsLibrary.getMaterial( materialID );
diff --git a/js/panels/Resizer.js b/js/panels/Resizer.js
index 69efd6ac..3afe5d5b 100644
--- a/js/panels/Resizer.js
+++ b/js/panels/Resizer.js
@@ -92,7 +92,7 @@ exports.Resizer = Montage.create(Component, {
  
     handleDblclick: {
         value : function() {
-            this.panel.addEventListener("webkitTransitionEnd", this, true);
+            this.panel.addEventListener("webkitTransitionEnd", this, false);
             if (this.isVertical) {
                 this.panel.style.height = "";
             } else {
@@ -102,7 +102,7 @@ exports.Resizer = Montage.create(Component, {
         }
     },
 
-    captureWebkitTransitionEnd: {
+    handleWebkitTransitionEnd: {
         value: function() {
             if(this.redrawStage) {
                 this.application.ninja.stage.resizeCanvases = true;
diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
new file mode 100644
index 00000000..d286d84c
--- /dev/null
+++ b/js/panels/Timeline/Collapser.js
@@ -0,0 +1,320 @@
+/*
+ * Collapser:  Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other.
+ * Required properties:
+ *              clicker: The element that will be clicked on.
+ *              content: The element that will expand or collapse as the clicker is clicked on.
+ * Optional properties:
+ *              isCollapsed: Is the content collapsed.  Set to true on serialization (or initialization) to start content in collapsed state.
+ *                      Can be manually set as well.
+ *              collapsibleClass: The CSS class to apply to the content and the clicker when collapsed.  Defaults to "collapsible-collapsed".
+ *              isAnimated: Set to true to apply a transition to expand/collapse (defaults to false).
+ *              transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the 
+ *                      collapse process.  You can then define transitionClass in your style sheet with the desired CSS transitions.
+ *                      Defaults to "collapsible-transition".
+ *              contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content 
+ *                      (in pixels, but without the "px") when not collapsed.  If this value is not set, the first time the content is expanded 
+ *                      the transition will not work. Subsequent collapses (and expansions) will transition as expected.
+ *              isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to 
+ *                      false for collapsers that will only be operated remotely.
+ *              toggle(): Manually toggle the expand/collapse of the content.
+ *              
+ */
+var Montage = require("montage/core/core").Montage,
+        Component = require("montage/ui/component").Component,
+        Collapser = exports.Collapser = Montage.create(Component, {
+
+        // This component has no template.
+        hasTemplate:{
+                value: false
+        },
+        
+        /* === BEGIN: Models === */
+        
+        // contentHeight: Stores the height of the content just before collapse.
+        _contentHeight: {
+                value: 0
+        },
+        contentHeight: {
+                get: function() {