1 files changed, 56 insertions, 8 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);
+            }
         }
     }