12 files changed, 287 insertions, 219 deletions

diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index f0e9458b..45b822e2 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -84,7 +84,6 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(sm)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
-                        el.elementModel.shapeModel.strokeMaterial = sm;
                         el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                         el.elementModel.shapeModel.GLWorld.render();
                     }
@@ -94,16 +93,15 @@ exports.ShapesController = Montage.create(CanvasController, {
                     if(fm)
                     {
                         el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                        el.elementModel.shapeModel.fillMaterial = fm;
                         el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                         el.elementModel.shapeModel.GLWorld.render();
                     }
                     break;
                 case "editStrokeMaterial":
-                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.strokeMaterial.getName()});
+                    NJevent("showMaterialPopup",{materialId : this.getProperty(el, "strokeMaterial")});
                     break;
                 case "editFillMaterial":
-                    NJevent("showMaterialPopup",{materialId : el.elementModel.shapeModel.fillMaterial.getName()});
+                    NJevent("showMaterialPopup",{materialId : this.getProperty(el, "fillMaterial")});
                     break;
                 case "animate":
                     if(value)
@@ -134,17 +132,28 @@ exports.ShapesController = Montage.create(CanvasController, {
                 case "trRadius":
                 case "blRadius":
                 case "brRadius":
-                case "border":
-                case "background":
                 case "useWebGl":
                 case "animate":
                     return this.getShapeProperty(el, p);
+                case "border":
+                    return this.getColor(el, false);
+                case "background":
+                    return this.getColor(el, true);
                 case "strokeMaterial":
+                    var sm = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+                    if(sm)
+                    {
+                        return sm.getName();
+                    }
+                    else
+                    {
+                        return "FlatMaterial";
+                    }
                 case "fillMaterial":
-                    var m = this.getShapeProperty(el, p);
-                    if(m)
+                    var fm = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
+                    if(fm)
                     {
-                        return this.getShapeProperty(el, p).getName();
+                        return fm.getName();
                     }
                     else
                     {
@@ -255,67 +264,94 @@ exports.ShapesController = Montage.create(CanvasController, {
     // Routines to get/set color properties
     getColor: {
         value: function(el, isFill) {
-            var color,
-                css;
             if(isFill)
             {
-                if(el.elementModel.shapeModel.background)
+                if(el.elementModel.shapeModel.GLGeomObj.getFillColor)
                 {
-                    return el.elementModel.shapeModel.background;
+                    return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getFillColor());
                 }
-                color = this.getShapeProperty(el, "fill");
-            }
-            else
-            {
-                if(el.elementModel.shapeModel.border)
+                else
                 {
-                    return el.elementModel.shapeModel.border;
+                    return null;
                 }
-                color = this.getShapeProperty(el, "stroke");
             }
-
-            if(!css) {
-                return null;
+            else
+            {
+                return this.application.ninja.colorController.colorModel.webGlToColor(el.elementModel.shapeModel.GLGeomObj.getStrokeColor());
             }
-
-            css = this.application.ninja.colorController.colorModel.webGlToCss(color);
-            return this.application.ninja.colorController.getColorObjFromCss(css);
         }
     },
 
     _setGradientMaterial: {
         value: function(el, gradientMode, isFill) {
-            var m = "LinearGradientMaterial",
-                fm;
+            var m,
+                gradientM;
+            if(isFill)
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
+            }
+            else
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+            }
+
             if(gradientMode === "radial")
             {
-                m = "RadialGradientMaterial";
+                if( !m || (m.getName() !== "RadialGradientMaterial") )
+                {
+                    gradientM = Object.create(MaterialsModel.getMaterial("RadialGradientMaterial"));
+                }
+            }
+            else
+            {
+                if( !m || (m.getName() !== "LinearGradientMaterial") )
+                {
+                    gradientM = Object.create(MaterialsModel.getMaterial("LinearGradientMaterial"));
+                }
             }
 
-            if(isFill)
+            if(gradientM)
             {
-                if(el.elementModel.shapeModel.fillMaterial.getName() !== m)
+                if(isFill)
                 {
-                    fm = Object.create(MaterialsModel.getMaterial(m));
-                    if(fm)
-                    {
-                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
-                        el.elementModel.shapeModel.fillMaterial = fm;
-                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
-                    }
+                    el.elementModel.shapeModel.GLGeomObj.setFillMaterial(gradientM);
                 }
+                else
+                {
+                    el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(gradientM);
+                }
+                el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+            }
+        }
+    },
+
+    _setFlatMaterial: {
+        value: function(el, isFill) {
+            var m,
+                flatM;
+            if(isFill)
+            {
+                m = el.elementModel.shapeModel.GLGeomObj.getFillMaterial();
             }
             else
             {
-                if(el.elementModel.shapeModel.strokeMaterial.getName() !== m)
+                m = el.elementModel.shapeModel.GLGeomObj.getStrokeMaterial();
+            }
+
+            if(!m || ((m.getName() === "LinearGradientMaterial") || m.getName() === "RadialGradientMaterial") )
+            {
+                flatM = Object.create(MaterialsModel.getMaterial("FlatMaterial"));
+                if(flatM)