6 files changed, 150 insertions, 50 deletions

diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index 3165988d..2a6fe9bd 100755
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -254,7 +254,12 @@ exports.ColorController = Montage.create(Component, {
                                 gradient.css = css;
                                 //
                                 arr = css.split('from(');
-                                arr = arr[1].split('),');
+                                //
+                                if (arr.length > 1) {
+                                        arr = arr[1].split('),');
+                                } else {
+                                        arr = (css.split(css.split('color-stop(')[0])[1]).split('),');
+                                }
                                 //
                                 for (i=0; arr[i]; i++) {
                                         arr[i] = arr[i].replace(/ color-stop\(/i, "");
@@ -264,14 +269,20 @@ exports.ColorController = Montage.create(Component, {
                                                 arr[i] = arr[i].replace(/\)\)/i, "");
                                         }
                                         //
-                                        if (i === 0) {
+                                        if (i === 0 && arr[i].indexOf('color-stop') === -1) {
                                                 arr[i] = {css: arr[i], percent: 0};
                                         } else if (i === arr.length-1) {
-                                                arr[i] = {css: arr[i], percent: 100};
+                                                temp = arr[i].split(', rgb');
+                                                if (temp.length > 1) {
+                                                        arr[i] = {css: 'rgb'+temp[1].replace(/\)\)/i, ""), percent: Math.round(parseFloat(temp[0])*100)};
+                                                } else {
+                                                        arr[i] = {css: arr[i], percent: 100};
+                                                }
                                         } else {
                                                 //
                                                 if (arr[i].indexOf('rgb') >= 0 && arr[i].indexOf('rgba') < 0) {
                                                         temp = arr[i].split(', rgb');
+                                                        temp[0] = temp[0].replace(/color\-stop\(/gi, '');
                                                         arr[i] = {css: 'rgb'+temp[1], percent: Math.round(parseFloat(temp[0])*100)};
                                                 } else if (arr[i].indexOf('rgba') >= 0) {
                                                 temp = arr[i].split(', rgba');
diff --git a/js/controllers/elements/body-controller.js b/js/controllers/elements/body-controller.js
index 604b22d0..bc4d2e42 100755
--- a/js/controllers/elements/body-controller.js
+++ b/js/controllers/elements/body-controller.js
@@ -39,6 +39,8 @@ exports.BodyController = Montage.create(ElementController, {
         value: function(el, p) {
             switch(p) {
                 case "background" :
+                case "background-image":
+                    return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el, "background-image"));
                 case "background-color":
                     if(this.application.ninja.currentDocument.model.views.design._template) {
                         return this.application.ninja.colorController.getColorObjFromCss(this.application.ninja.stylesController.getElementStyle(el.parentNode, "background-color"));
@@ -62,6 +64,9 @@ exports.BodyController = Montage.create(ElementController, {
         value: function(el, p, value) {
             switch(p) {
                 case "background":
+                case "background-image":
+                    this.application.ninja.stylesController.setElementStyle(el, "background-image", value);
+                    break;
                 case "background-color":
                     if(this.application.ninja.currentDocument.model.views.design._template) {
                         this.application.ninja.stylesController.setElementStyle(el.parentNode, "background-color", value);
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index e62af921..c3099459 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -138,6 +138,10 @@ exports.ShapesController = Montage.create(CanvasController, {
                     this.application.ninja.elementMediator.replaceElement(canvas, el);
                     break;
                 case "strokeMaterial":
+                    // skip shape types that don't support WebGL
+                    if(!el.elementModel.shapeModel.useWebGl) {
+                        return;
+                    }
                     m = Object.create(MaterialsModel.getMaterial(value));
                     if(m)
                     {
@@ -152,6 +156,10 @@ exports.ShapesController = Montage.create(CanvasController, {
                     }
                     break;
                 case "fillMaterial":
+                    // skip shape types that don't support WebGL or fill color
+                    if(!el.elementModel.shapeModel.GLGeomObj.canFill || !el.elementModel.shapeModel.useWebGl) {
+                        return;
+                    }
                     m = Object.create(MaterialsModel.getMaterial(value));
                     if(m)
                     {
@@ -278,7 +286,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     }
                     else
                     {
-                        return "FlatMaterial";
+                        return "Flat";
                     }
                 case "fillMaterial":
                     var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
@@ -288,7 +296,7 @@ exports.ShapesController = Montage.create(CanvasController, {
                     }
                     else
                     {
-                        return "FlatMaterial";
+                        return "Flat";
                     }
                 default:
                     return CanvasController.getProperty(el, p);
@@ -430,32 +438,32 @@ exports.ShapesController = Montage.create(CanvasController, {
 
             if(gradientMode === "radial")
             {
-                if( !m || (m.getName() !== "RadialGradientMaterial") )
+                if( !m || (m.getName() !== "Radial Gradient") )
                 {
-                    gradientM = Object.create(MaterialsModel.getMaterial("RadialGradientMaterial"));
+                    gradientM = Object.create(MaterialsModel.getMaterial("Radial Gradient"));
             }
             }
             else
             {
-                if( !m || (m.getName() !== "LinearGradientMaterial") )
+                if( !m || (m.getName() !== "Linear Gradient") )
                 {
-                    gradientM = Object.create(MaterialsModel.getMaterial("LinearGradientMaterial"));
+                    gradientM = Object.create(MaterialsModel.getMaterial("Linear Gradient"));
                 }
             }
 
             if(gradientM)
             {
-            if(isFill)
-            {
+                if(isFill)
+                {
                     el.elementModel.shapeModel.GLGeomObj.setFillMaterial(gradientM);
                 }
                 else
                 {
                     el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(gradientM);
                 }
-                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
-                    }
-                }
+                el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+            }
+        }
     },
 
     _setFlatMaterial: {
@@ -471,11 +479,14 @@ exports.ShapesController = Montage.create(CanvasController, {
                 m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
             }
 
-            if(!m || ((m.getName() === "LinearGradientMaterial") || m.getName() === "RadialGradientMaterial") )
-                {
-                flatM = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
+            if(!m || ((m.getName() === "Linear Gradient") || m.getName() === "Radial Gradient") )
+            {
+                // Uber Material also supports solid colors, so don't change from Uber to Flat Material
+                if(m && (m.getName() === "Uber")) { return; }
+
+                flatM = Object.create(MaterialsModel.getMaterial("Flat"));
                 if(flatM)
-                    {
+                {
                     if(isFill)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setFillMaterial(flatM);
@@ -484,10 +495,10 @@ exports.ShapesController = Montage.create(CanvasController, {
                     {
                         el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(flatM);
                     }