<?xml version="1.0" encoding="utf-8"?>
  <mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" label="{pickerLabel}" width="100%" creationComplete="setDefault()"
           mouseOver="colorWheelImg.visible = true" mouseOut="colorWheelImg.visible = false">
          
          <mx:HBox horizontalGap="2">
                  <mx:ColorPicker height="20" width="40" id="cp1" close="{
                                   this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
                                   dispatchMyEvent(); }"  dataProvider="{dataProvider}" />
                  <mx:ColorPicker height="20" width="40" id="cp2" close="{
                                   this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
                                   dispatchMyEvent(); }" dataProvider="{dataProvider}" />        
                  <mx:ColorPicker height="20" width="40" id="cp3" close="{
                                   this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
                                   dispatchMyEvent(); }" dataProvider="{dataProvider}" />
                  <mx:ColorPicker height="20" width="40" id="cp4" close="{
                                   this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
                                   dispatchMyEvent(); }" dataProvider="{dataProvider}" />
          </mx:HBox>                         
          <mx:HBox id="colorWheelImg" visible="false" height="{colorWheelImg.visible == true?(20):0}">
                  
                  <mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
                              mouseDown="doColorPicker(cp1.selectedColor, 1)" />
                     <mx:Spacer width="10" />
                     <mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
                              mouseDown="doColorPicker(cp2.selectedColor, 2)" />
                  <mx:Spacer width="10" />
                  <mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
                              mouseDown="doColorPicker(cp3.selectedColor, 3)" />
                  <mx:Spacer width="10" />
                  <mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
                              mouseDown="doColorPicker(cp4.selectedColor, 4)" />
                  <mx:Spacer width="10" />
          </mx:HBox>
  
          
  <mx:Script>
          <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.events.FlexEvent;
                  import mx.managers.PopUpManager;
                  include "lib-flex-style-explorer-as-assets.ax";
                  
                  [Bindable]
                  public var pickerLabel:String;
                  
                  [Bindable]
                  public var dataProvider:Array;
                  
                  [Bindable]
                  public var styleValue:Array;
                  
                  private function dispatchMyEvent():void {
                  this.dispatchEvent( new Event("dataChange") );
              }
                   
                          private function doColorPicker(whatColor:Number, whichPicker:Number):void {
                                  stage.frameRate = 120;
                                  var pop1:* = PopUpManager.createPopUp(this, lib_flex_style_explorer_components_advancedColorPicker, false);
                                  pop1.setColorRGB(whatColor);
                                  pop1.lastColor = whatColor;
                              pop1.addEventListener(MouseEvent.CLICK, setColor);
          
                                  function setColor():void {
                                          if (whichPicker == 1) {
                                                  cp1.selectedColor = pop1.getColorRGB();
                                          } else if (whichPicker == 2) {
                                                  cp2.selectedColor = pop1.getColorRGB();
                                          } else if (whichPicker == 3) {
                                                  cp3.selectedColor = pop1.getColorRGB();
                                          } else if (whichPicker == 4) {
                                                  cp4.selectedColor = pop1.getColorRGB();
                                          }
                                          
                                          styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor];
                                          dispatchMyEvent();
                                  }
          
                  }
          
                    [Bindable]
                  public var defaultValue:Array;
             
             public function setDefault():void {
                             defaultValue = styleValue;
                             cp1.selectedColor = styleValue[0];
                             cp2.selectedColor = styleValue[1];
                             cp3.selectedColor = styleValue[2];
                             cp4.selectedColor = styleValue[3];
             }
             
             public function restoreDefault():void {
                             styleValue = defaultValue;
                             cp1.selectedColor = defaultValue[0];
                             cp2.selectedColor = defaultValue[1];
                             cp3.selectedColor = defaultValue[2];
                             cp4.selectedColor = defaultValue[3];
             }
                  
          ]]>
  </mx:Script>
  
  <mx:Metadata>
          [Event("dataChange")]
      </mx:Metadata>
  
  </mx:FormItem>