6 files changed, 152 insertions, 15 deletions

diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index 5bef7020..e51bdd8a 100644
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -9,32 +9,80 @@ var Montage = require("montage/core/core").Montage,
 
 var ColorChip = exports.ColorChip = Montage.create(Component, {
 
+    chip: {
+        value: false
+    },
+
     hasIcon: {
         value: true
     },
 
+    iconType: {
+        value: null
+    },
+
     mode: {
         value: "stroke"
     },
 
-    prepareForDraw: {
-        value: function() {
-//            this.colorButton.props = {side: 'right', align: 'bottom', wheel: true, palette: true, gradient: true, image: true, offset: 20};
-//            this.application.ninja.colorController.addButton('chip', this.colorButton);
+    offset: {
+        value: 20
+    },
 
+    initialColor: {
+        value: false
+    },
 
+    changeDelegate: {
+        value: null
+    },
+
+    prepareForDraw: {
+        value: function() {
             this.addEventListener("firstDraw", this, false);
         }
     },
 
     draw: {
         value: function() {
+            if(this.hasIcon) {
+                var icon = this.iconType || this.mode + "Icon";
+                this.application.ninja.colorController.addButton(icon, this.icon);
+            }
 
-            if(this.hasIcon) this.application.ninja.colorController.addButton(this.mode + 'Icon', this.icon);
-
-//            this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
-            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: 20};
+            this.chipBtn.props = {side: 'right', align: 'top', wheel: true, palette: true, gradient: true, image: true, offset: this.offset};
             this.application.ninja.colorController.addButton(this.mode, this.chipBtn);
+
+        }
+    },
+
+    handleFirstDraw: {
+        value: function(evt) {
+            if(this.chip) {
+                // This is a single chip - Not related to the color panel -- Set the initial color if found
+                var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)";
+
+                if(this.initialColor) {
+                    var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor);
+                    mode = colorObj.mode;
+                    r = colorObj.value.r;
+                    g = colorObj.value.g;
+                    b = colorObj.value.b;
+                    a = colorObj.value.a;
+                    css = colorObj.css;
+                }
+
+                this.chipBtn.color(mode, {wasSetByCode: true, type: 'change', color: {r: r, g: g, b: b}, css: css});
+                this.chipBtn.addEventListener("change", this, false);
+            }
+        }
+    },
+
+    handleChange: {
+        value: function(evt) {
+            if(this.changeDelegate && typeof(this.changeDelegate === "function")) {
+                this.changeDelegate(evt);
+            }
         }
     }
 
diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js
index b8170826..af7c4858 100644
--- a/js/controllers/elements/stage-controller.js
+++ b/js/controllers/elements/stage-controller.js
@@ -75,6 +75,8 @@ exports.StageController = Montage.create(ElementController, {
     getProperty: {
         value: function(el, p) {
             switch(p) {
+                case "background" :
+                    return el.elementModel.stageBackground.style.getProperty(p);
                 case "border":
                     return el.elementModel.stageView.style.getProperty(p);
                 case "height":
@@ -92,7 +94,7 @@ exports.StageController = Montage.create(ElementController, {
         value: function(el, p, value) {
             switch(p) {
                 case "background":
-                    el.elementModel.body.style.setProperty(p, value);
+                    el.elementModel.stageBackground.style.setProperty(p, value);
                     break;
                 case "overflow":
                     el.elementModel.viewPort.style.setProperty(p, value);
diff --git a/js/data/pi/pi-data.js b/js/data/pi/pi-data.js
index 8ffd0ec7..ba03c347 100644
--- a/js/data/pi/pi-data.js
+++ b/js/data/pi/pi-data.js
@@ -10,7 +10,21 @@ var Montage = require("montage/core/core").Montage,
 exports.PiData = Montage.create( Montage, {
 
     stagePi: {
-        value: []
+        value: [
+            {
+                label: "Style",
+
+                Section: [
+                    [
+                        {
+                            type : "chip",
+                            id : "background",
+                            prop: "background"
+                        }
+                    ]
+                ]
+            }
+        ]
     },
 
     blockPi: {
diff --git a/js/io/document/html-document.js b/js/io/document/html-document.js
index c44dfe75..dd3507c2 100644
--- a/js/io/document/html-document.js
+++ b/js/io/document/html-document.js
@@ -398,6 +398,9 @@ var HTMLDocument = exports.HTMLDocument = Montage.create(baseDocumentModule.Base
 
                         this.documentRoot.elementModel.stageView = this.documentRoot.elementModel.defaultRule.cssRules[j];
 
+                    } else if(this.documentRoot.elementModel.defaultRule.cssRules[j].selectorText === "#stageBG") {
+
+                        this.documentRoot.elementModel.stageBackground = this.documentRoot.elementModel.defaultRule.cssRules[j];
                     }
                 }
 
diff --git a/js/panels/properties/content.reel/content.js b/js/panels/properties/content.reel/content.js
index 0088447a..1ec6d769 100644
--- a/js/panels/properties/content.reel/content.js
+++ b/js/panels/properties/content.reel/content.js
@@ -150,6 +150,35 @@ exports.Content = Montage.create(Component, {
                 this.customPi = stage.elementModel.pi;
                 this.displayCustomProperties(stage, stage.elementModel.pi);
             }
+
+            // For now hardcode the background since it is the only custom property
+            // No need to loop through all the properties.
+            var backgroundChip = this.customSections[0].content.controls["background"];
+            backgroundChip.initialColor = ElementsMediator.getProperty(stage, "background");
+
+            /*
+            var customPI = PiData[this.customPi];
+            // Get all the custom section for the custom PI
+            for(var i = 0, customSec; customSec = customPI[i]; i++) {
+
+                // Now set the Fields for the custom PI
+                for(var j = 0, fields; fields = customSec.Section[j]; j++) {
+                    for(var k = 0, control; control = fields[k]; k++) {
+
+                        var colorChipEl = this.customSections[i].content.controls[control.id];
+                        this.foo = colorChipEl;
+                        colorChipEl.addEventListener("firstDraw", this, false);
+
+                    }
+                }
+            }
+            */
+        }
+    },
+
+    handleFirstDraw: {
+        value: function() {
+            this.foo.chipBtn.color('rgb', {wasSetByCode: true, type: 'change', color: {r: 255, g: 0, b: 0}, css: 'rgb(255,0,0)'});
         }
     },
 
diff --git a/js/panels/properties/sections/custom.reel/custom.js b/js/panels/properties/sections/custom.reel/custom.js
index 992db8e6..a2b9b9fa 100644
--- a/js/panels/properties/sections/custom.reel/custom.js
+++ b/js/panels/properties/sections/custom.reel/custom.js
@@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 
 var Montage = require("montage/core/core").Montage;
 var Component = require("montage/ui/component").Component;
+var ElementsMediator = require("js/mediators/element-mediator").ElementMediator;