13 files changed, 221 insertions, 146 deletions

diff --git a/js/controllers/color-controller.js b/js/controllers/color-controller.js
index 925b525d..e3b15f1c 100644
--- a/js/controllers/color-controller.js
+++ b/js/controllers/color-controller.js
@@ -218,6 +218,9 @@ exports.ColorController = Montage.create(Component, {
             } else if (mode === 'gradient'){
                 color = e._event.value.value;
             }
+            color.mode = panelMode;
+            color.wasSetByCode = true;
+            color.type = "change";
             ////////////////////////////////////////////////////////////
             ////////////////////////////////////////////////////////////
             //
diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js
index 8a0735f7..892ac2f2 100644
--- a/js/controllers/elements/element-controller.js
+++ b/js/controllers/elements/element-controller.js
@@ -69,15 +69,56 @@ 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;
         }
     },
 
@@ -92,7 +133,8 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                         case 'nocolor':
                             this.setProperty(el, "background-image", "none");
                             this.setProperty(el, "background-color", "none");
-                            break;
+                            el.elementModel.fill = null;
+                            return;
                         case 'gradient':
                             this.setProperty(el, "background-image", color.color.css);
                             this.setProperty(el, "background-color", "none");
@@ -106,6 +148,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                 {
                     this.application.ninja.stylesController.setElementStyle(el, "background-color", color.color.css);
                 }
+                el.elementModel.fill = color;
             }
             else
             {
@@ -115,7 +158,8 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                         case 'nocolor':
                             this.setProperty(el, "border-image", "none");
                             this.setProperty(el, "border-color", "none");
-                            break;
+                            el.elementModel.stroke = null;
+                            return;
                         case 'gradient':
                             this.setProperty(el, "border-image", color.color.css);
                             this.setProperty(el, "border-color", "none");
@@ -129,6 +173,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent,
                 {
                     this.application.ninja.stylesController.setElementStyle(el, "border-color", color.color.css);
                 }
+                el.elementModel.stroke = color;
             }
         }
     },
diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js
index 92353f28..1717db94 100644
--- a/js/controllers/elements/shapes-controller.js
+++ b/js/controllers/elements/shapes-controller.js
@@ -48,6 +48,8 @@ exports.ShapesController = Montage.create(CanvasController, {
             switch(p) {
                 case "strokeSize":
                 case "innerRadius":
+                case "border":
+                case "background":
                     return this.getShapeProperty(el, p);
                 default:
                     return CanvasController.getProperty(el, p);
@@ -154,30 +156,44 @@ exports.ShapesController = Montage.create(CanvasController, {
     // Routines to get/set color properties
     getColor: {
         value: function(el, isFill) {
+            var color,
+                css;
             if(isFill)
             {
-                return this.getShapeProperty(el, "fill");
+                if(el.elementModel.shapeModel.background)
+                {
+                    return el.elementModel.shapeModel.background;
+                }
+                color = this.getShapeProperty(el, "fill");
             }
             else
             {
-                return this.getShapeProperty(el, "stroke");
+                if(el.elementModel.shapeModel.border)
+                {
+                    return el.elementModel.shapeModel.border;
+                }
+                color = this.getShapeProperty(el, "stroke");
             }
+
+            css = this.application.ninja.colorController.colorModel.webGlToCss(color);
+            return this.application.ninja.colorController.getColorObjFromCss(css);
         }
     },
 
     setColor: {
         value: function(el, color, isFill) {
-            // TODO - Format color for webGL before setting
-            color = color.webGlColor || color.color.webGlColor;
+            var webGl = color.webGlColor || color.color.webGlColor;
             if(isFill)
             {
-                el.elementModel.shapeModel.GLGeomObj.setFillColor(color);
-                this.setShapeProperty(el, "fill", color);
+                el.elementModel.shapeModel.GLGeomObj.setFillColor(webGl);
+                this.setShapeProperty(el, "fill", webGl);
+                this.setShapeProperty(el, "background", color);
             }
             else
             {
-                el.elementModel.shapeModel.GLGeomObj.setStrokeColor(color);
-                this.setShapeProperty(el, "stroke", color);
+                el.elementModel.shapeModel.GLGeomObj.setStrokeColor(webGl);
+                this.setShapeProperty(el, "stroke", webGl);
+                this.setShapeProperty(el, "border", color);
             }
             el.elementModel.shapeModel.GLWorld.render();
         }
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index f162e919..748f19bb 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -23,13 +23,13 @@ exports.PiData = Montage.create( Montage, {