5 files changed, 83 insertions, 13 deletions

diff --git a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
index 9a27689a..ff738bbe 100644
--- a/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
+++ b/js/panels/Color/colorpanelbase.reel/colorpanelbase.js
@@ -1499,13 +1499,13 @@ exports.ColorPanelBase = Montage.create(Component, {
                                 //
                                 if (type._event.clientX && type._event.clientY) {
                                         //
-                                        if (type._event.clientX > (parseInt(document.width)/2)) {
+                                        //if (type._event.clientX > (parseInt(document.width)/2)) {
                                                 //TODO: Fix offset hack
                                                 this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX) +'px', (type._event.target.clientHeight/2+type._event.clientY - type._event.offsetY)+'px', 'right', 'top');
-                                        } else {
+                                        //} else {
                                                 //
-                                                this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top');
-                                        }
+                                        //      this.application.ninja.colorController.colorPopupManager.showColorPopup((type._event.clientX - type._event.offsetX)+parseInt(type._event.target.offsetWidth)+'px', (type._event.target.offsetHeight/2+type._event.clientY - type._event.offsetY)+'px', 'left', 'top');
+                                        //}
                                 }
                         }
                 } else {
diff --git a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css
index 6a418279..4db0abff 100644
--- a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css
+++ b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.css
@@ -6,7 +6,7 @@
  </copyright> */
 /* line 12, colorpanelpopup.scss */
 .cpp_popup {
-  overflow: none;
+  overflow: hidden;
   font-size: 12px;
   text-shadow: 1px 1px 1px #000;
   font-family: 'Droid Sans', sans-serif;
@@ -28,7 +28,7 @@
   text-indent: -9999px;
   overflow: hidden;
   float: right;
-  padding: none;
+  padding: 0;
   cursor: pointer;
   border: 1px solid transparent;
 }
diff --git a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss
index 20481fb6..1f63658a 100644
--- a/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss
+++ b/js/panels/Color/colorpanelpopup.reel/css/colorpanelpopup.scss
@@ -10,7 +10,7 @@ $grey_light: #494949;
 
 .cpp_popup
 {
-        overflow: none;
+        overflow: hidden;
         font-size: 12px;
         text-shadow: 1px 1px 1px #000;
         font-family: 'Droid Sans', sans-serif;
@@ -32,7 +32,7 @@ $grey_light: #494949;
         text-indent: -9999px;
         overflow: hidden;
         float: right;
-        padding: none;
+        padding: 0;
         cursor: pointer;
         border: 1px solid transparent;
 }
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;
 
 //Custom Rows
 var SingleRow = require("js/panels/properties/sections/custom-rows/single-row.reel").SingleRow;
@@ -18,7 +19,7 @@ var Dropdown = require("js/components/combobox.reel").Combobox;
 var TextField = require("js/components/textfield.reel").TextField;
 var FileInput = require("js/components/ui/file-input.reel").FileInput;
 var Checkbox = require("js/components/checkbox.reel").Checkbox;
-
+var ColorChip = require("js/components/ui/color-chip.reel").ColorChip;
 
 exports.CustomSection = Montage.create(Component, {
 
@@ -88,10 +89,8 @@ exports.CustomSection = Montage.create(Component, {
         value:{}
     },
 
-    handleChanging:
-        {
-                value:function(event)
-                {
+    handleChanging: {
+                value:function(event) {
             var obj = event.currentTarget;
             this._dispatchPropEvent({"type": "changing", "id": obj.id, "prop": obj.prop, "value": obj.value, "control": obj});
                 }
@@ -106,6 +105,27 @@ exports.CustomSection = Montage.create(Component, {
                 }
         },
 
+    /**
+     * Color change handler. Hard coding the stage for now since only the stage PI uses this color chip
+     */
+    handleColorChange: {
+        value: function(event) {
+            // Change the stage color for now
+            //console.log(this, event);
+            ElementsMediator.setProperty([this.application.ninja.currentDocument.documentRoot], this.id, [event._event.color.css], "Change", "pi", '');
+            /*
+            var propEvent = document.createEvent("CustomEvent");
+            propEvent.initEvent("propertyChange", true, true);
+            propEvent.type = "propertyChange";
+
+            propEvent.prop = "background";//event.prop;
+            propEvent.value = event._event.color.css;
+
+            this.dispatchEvent(propEvent);
+            */
+        }
+    },
+
     _dispatchPropEvent: {
         value: function(event) {
 //            console.log(event);
@@ -140,6 +160,7 @@ exports.CustomSection = Montage.create(Component, {
                 case "textbox"  : return this.createTextField(fields);
                 case "file"     : return this.createFileInput(fields);
                 case "checkbox" : return this.createCheckbox(fields);
+                case "chip"     : return this.createColorChip(fields);
             }
         }
     },
@@ -305,6 +326,26 @@ exports.CustomSection = Montage.create(Component, {
 
             return obj;
         }
+    },
+
+    createColorChip: {
+        value: function(aField) {
+            var obj = ColorChip.create();
+
+            obj.chip = true;
+            obj.iconType = "fillIcon";