24 files changed, 641 insertions, 360 deletions

diff --git a/js/components/ui/property-control.reel/property-control.js b/js/components/ui/property-control.reel/property-control.js
index 6e0a3916..2f91491f 100755
--- a/js/components/ui/property-control.reel/property-control.js
+++ b/js/components/ui/property-control.reel/property-control.js
@@ -39,7 +39,8 @@ var Montage = require("montage/core/core").Montage,
     TextField = require("js/components/TextField.reel").TextField,
     ColorChip = require("js/components/ui/color-chip.reel").ColorChip,
     FileInput = require("js/components/ui/file-input.reel").FileInput,
-    InputGroup = require("js/components/ui/input-group.reel").InputGroup;
+    InputGroup = require("js/components/ui/input-group.reel").InputGroup,
+    GradientPicker = require("js/components/gradientpicker.reel").GradientPicker;
 
 var PropertyControl = exports.PropertyControl = Montage.create(Component, {
 
@@ -261,6 +262,11 @@ var PropertyControl = exports.PropertyControl = Montage.create(Component, {
                     this._control.addEventListener("changing", this, false);
                     this._prop = "value";
                     break;
+                case "GradientPicker":
+                    this._control = GradientPicker.create();
+                    this._control.addEventListener("change", this, false);
+                    this._prop = "value";
+                    break;
                 default:
                     break;
             }
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index a0d3c0d6..df6edeb0 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -882,15 +882,12 @@ exports.ShapesController = Montage.create(CanvasController, {
         value: function(m)
         {
             var css,
-                colorObj;
-            if(m === "Linear Gradient")
-            {
-                css = "-webkit-gradient(linear, left top, right top, from(rgb(255, 0, 0)), color-stop(0.3, rgb(0, 255, 0)), color-stop(0.6, rgb(0, 0, 255)), to(rgb(0, 255, 255)))";
-            }
-            else if(m === "Radial Gradient")
-            {
-                css = "-webkit-radial-gradient(50% 50%, ellipse cover, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 30%, rgb(0, 0, 255) 60%, rgb(0, 255, 255) 100%)";
-            }
+                colorObj,
+                material;
+
+            material = MaterialsModel.getMaterial(m);
+
+            css = material.getGradientData();
 
             if(css)
             {
diff --git a/js/data/panels-data.js b/js/data/panels-data.js
index 0b178c84..ba6154c9 100644
--- a/js/data/panels-data.js
+++ b/js/data/panels-data.js
@@ -63,12 +63,12 @@ exports.PanelsData = Montage.create(Montage, {
         {
             name: "Materials",
             groups: ["default"],
-            minHeight: 100,
-            height: 100,
+            minHeight: 270,
+            height: 270,
             maxHeight: null,
-            flexible: true,
+            flexible: false,
             collapsed: true,
-            scrollable: true,
+            scrollable: false,
             open: true,
             modulePath: "js/panels/Materials/materials-library-panel.reel",
             moduleName: "MaterialsLibraryPanel"
diff --git a/js/document/views/base.js b/js/document/views/base.js
index e771702d..18676d1f 100755
--- a/js/document/views/base.js
+++ b/js/document/views/base.js
@@ -64,6 +64,7 @@ exports.BaseDocumentView = Montage.create(Component, {
                 if (this.iframe) {
                         this.iframe.style.display = 'block';
                 this.iframe.style.opacity = 1;
+                this.toggleWebGlAnimation(true);
                 } else {
                         console.log('Error: View has no iframe to show!');
                 }
@@ -78,6 +79,8 @@ exports.BaseDocumentView = Montage.create(Component, {
                 if (this.iframe) {
                         this.iframe.style.display = 'none';
                 this.iframe.style.opacity = 0;
+                this.pauseVideos();
+                this.toggleWebGlAnimation(false);
                 } else {
                         console.log('Error: View has no iframe to hide!');
                 }
diff --git a/js/document/views/design.js b/js/document/views/design.js
index 44ed2c65..ed98b660 100755
--- a/js/document/views/design.js
+++ b/js/document/views/design.js
@@ -537,9 +537,11 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
     //
     pauseVideos:{
         value:function(){
-                var i, videos = this.document.getElementsByTagName("video");
-            for(i = 0; i < videos.length; i++){
-                if(!videos[i].paused) videos[i].pause();
+            if(this.document) {
+                var i, videos = this.document.getElementsByTagName("video");
+                for(i = 0; i < videos.length; i++){
+                    if(!videos[i].paused) videos[i].pause();
+                }
             }
         }
     },
@@ -563,9 +565,28 @@ exports.DesignDocumentView = Montage.create(BaseDocumentView, {
                 videos[i].src = "";
             }
         }
-    }
+    },
         ////////////////////////////////////////////////////////////////////
         ////////////////////////////////////////////////////////////////////
+    toggleWebGlAnimation: {
+        value: function(show) {
+            if(this.document) {
+                var glCanvases = this.document.querySelectorAll('[data-RDGE-id]'),
+                    glShapeModel;
+                if(glCanvases) {
+                    for(var i = 0, len = glCanvases.length; i<len; i++) {
+                        glShapeModel = glCanvases[i].elementModel.shapeModel;
+                        if(show) {
+                            glShapeModel.GLWorld.restartRenderLoop();
+                        } else {
+                            glShapeModel.GLWorld.stop();
+                        }
+                    }
+
+                }
+            }
+        }
+    }
 });
 ////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////
diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js
index 235b381e..617b61ef 100755
--- a/js/helper-classes/3D/draw-utils.js
+++ b/js/helper-classes/3D/draw-utils.js
@@ -829,6 +829,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, {
                         var obj = this._stateArray.pop();
                         this._lineColor = obj._lineColor;
                         this._drawingContext.lineWidth = obj._lineWidth;
+                        this._drawingContext.strokeStyle = obj._lineColor;
                 }
         },
 
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index fb70d18c..26f33a64 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -647,6 +647,7 @@ World.prototype.clearTree = function()
 
         if (this._useWebGL)
     {
+        this.stop();
                 var root = this._rootNode;
                 root.children = new Array();
                 RDGE.globals.engine.unregisterCanvas( this._canvas.rdgeid );
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 39cde514..12781ab8 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -85,14 +85,28 @@ exports.Circle = Object.create(GeomObj, {
             } else {
                 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-                        if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
+
+            if(strokeColor) {
+                if(this._strokeMaterial.hasProperty("color")) {
+                    this._strokeMaterial.setProperty( "color",  this._strokeColor );
+                } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
+                    this._strokeMaterial.setGradientData(this._strokeColor.color);
+                }