2 files changed, 203 insertions, 18 deletions

diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index f2b54014..65d26bdd 100755
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -69,27 +69,103 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
     // Routines to get/set color properties
     getColor: {
         value: function(el, isFill) {
+            var colorObj,
+                color,
+                image;
+
+            // Return cached value if one exists
             if(isFill)
             {
-                return this.application.ninja.stylesController.getElementStyle(el, "background-color");
+                if(el.elementModel.fill)
+                {
+                    return el.elementModel.fill;
+                }
+//                return this.application.ninja.stylesController.getElementStyle(el, "background-color");
+                //TODO: Once logic for color and gradient is established, this needs to be revised
+                color = this.getProperty(el, "background-color");
+                image = this.getProperty(el, "background-image");
             }
             else
             {
                 // TODO - Need to figure out which border side user wants
-                return this.application.ninja.stylesController.getElementStyle(el, "border-color");
+                if(el.elementModel.stroke)
+                {
+                    return el.elementModel.stroke;
+                }
+                // TODO - Need to figure out which border side user wants
+//                return this.application.ninja.stylesController.getElementStyle(el, "border-color");
+                color = this.getProperty(el, "border-color");
+                image = this.getProperty(el, "border-image");
             }
+
+            if(color || image) {
+                if (image && image !== 'none' && image.indexOf('-webkit') >= 0) {
+                    //Gradient
+                    colorObj = this.application.ninja.colorController.getColorObjFromCss(image);
+                } else {
+                    //Solid
+                    colorObj = this.application.ninja.colorController.getColorObjFromCss(color);
+                }
+            }
+
+            // Update cache
+            if(isFill)
+            {
+                el.elementModel.fill = colorObj;
+            }
+            else
+            {
+                el.elementModel.stroke = colorObj;
+            }
+
+            return colorObj;
         }
     },
 
     setColor: {
         value: function(el, color, isFill) {
+            var mode = color.mode;
             if(isFill)
             {
-                this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css);
+                if(mode)
+                {
+                    switch (mode) {
+                        case 'nocolor':
+                            this.setProperty(el, "background-image", "none");
+                            this.setProperty(el, "background-color", "none");
+                            el.elementModel.fill = null;
+                            return;
+                        case 'gradient':
+                            this.setProperty(el, "background-image", color.color.css);
+                            this.setProperty(el, "background-color", "none");
+                            break;
+                        default:
+                            this.setProperty(el, "background-image", "none");
+                            this.setProperty(el, "background-color", color.color.css);
+                    }
+                }
+                el.elementModel.fill = color;
             }
             else
             {
-                this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css);
+                if(mode)
+                {
+                    switch (mode) {
+                        case 'nocolor':
+                            this.setProperty(el, "border-image", "none");
+                            this.setProperty(el, "border-color", "none");
+                            el.elementModel.stroke = null;
+                            return;
+                        case 'gradient':
+                            this.setProperty(el, "border-image", color.color.css);
+                            this.setProperty(el, "border-color", "none");
+                            break;
+                        default:
+                            this.setProperty(el, "border-image", "none");
+                            this.setProperty(el, "border-color", color.color.css);
+                    }
+                }
+                el.elementModel.stroke = color;
             }
         }
     },
@@ -103,8 +179,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
 
     setStroke: {
         value: function(el, stroke) {
-            var border = stroke.borderWidth + stroke.borderUnits + " " + stroke.borderStyle + " " + stroke.color.color.css;
-            this.application.ninja.stylesController.setElementStyle(el, "border", border);
+            this.application.ninja.stylesController.setElementStyle(el, "border-width", stroke.borderWidth + stroke.borderUnits);
+            this.application.ninja.stylesController.setElementStyle(el, "border-style", stroke.borderStyle);
+            this.setColor(el, stroke.color, false);
         }
     },
 
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index c5f22138..e764de4e 100755
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -5,7 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var Montage =                   require("montage/core/core").Montage,
-    CanvasController = require("js/controllers/elements/canvas-controller").CanvasController;
+    CanvasController = require("js/controllers/elements/canvas-controller").CanvasController,
+    njModule = require("js/lib/NJUtils");
 
 exports.ShapesController = Montage.create(CanvasController, {
 
@@ -56,6 +57,35 @@ exports.ShapesController = Montage.create(CanvasController, {
                     el.elementModel.shapeModel.GLWorld.setViewportFromCanvas(el);
                     el.elementModel.shapeModel.GLGeomObj.buildBuffers();
                     break;
+                case "useWebGl":
+                    var canvas = njModule.NJUtils.makeNJElement("canvas", "Canvas", "shape", el.className, true);
+                    canvas.width = el.width;
+                    canvas.height = el.height;
+                    this.application.ninja.elementMediator.replaceElement(el, canvas);
+                    NJevent("elementDeleted", el);
+                    this.application.ninja.selectionController.selectElement(canvas);
+                    el = canvas;
+                    this.toggleWebGlMode(el, value);
+                    el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    break;
+                case "strokeMaterial":
+                    var sm = Object.create(MaterialsLibrary.getMaterial(value));
+                    if(sm)
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setStrokeMaterial(sm);
+                        el.elementModel.shapeModel.strokeMaterial = sm;
+                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    }
+                    break;
+                case "fillMaterial":
+                    var fm = Object.create(MaterialsLibrary.getMaterial(value));
+                    if(fm)
+                    {
+                        el.elementModel.shapeModel.GLGeomObj.setFillMaterial(fm);
+                        el.elementModel.shapeModel.fillMaterial = fm;
+                        el.elementModel.shapeModel.GLGeomObj.buildBuffers();
+                    }
+                    break;
                 default:
                     CanvasController.setProperty(el, p, value);
             }
@@ -66,17 +96,27 @@ exports.ShapesController = Montage.create(CanvasController, {
     getProperty: {
         value: function(el, p) {
             switch(p) {
-                case "stroke":
-                case "fill":
                 case "strokeSize":
                 case "innerRadius":
                 case "tlRadius":
                 case "trRadius":
                 case "blRadius":
                 case "brRadius":
+                case "border":
+                case "background":
+                case "useWebGl":
+                    return this.getShapeProperty(el, p);
                 case "strokeMaterial":
                 case "fillMaterial":
-                    return this.getShapeProperty(el, p);
+                    var m = this.getShapeProperty(el, p);
+                    if(m)
+                    {
+                        return this.getShapeProperty(el, p).getName();
+                    }