<?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="55" id="cp1" dataProvider="{dataProvider}"
                           close="{this.styleValue = [cp1.selectedColor, cp2.selectedColor]; dispatchMyEvent(); }" />
                  <mx:ColorPicker height="20" width="55"  id="cp2" dataProvider="{dataProvider}"
                            close="{this.styleValue = [cp1.selectedColor, cp2.selectedColor]; dispatchMyEvent(); }" />
                           
                  <mx:HBox id="colorWheelImg" visible="false" >
                          <mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
                              mouseDown="doColorPicker(cp1.selectedColor, 1)" />
                             <mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
                              mouseDown="doColorPicker(cp2.selectedColor, 2)" />
                  
                  </mx:HBox>
          
          </mx:HBox>
          
  <mx:Script>
          <![CDATA[
                  import mx.events.FlexEvent;
                  import mx.managers.PopUpManager;
                  include "lib-flex-style-explorer-as-assets.ax";
                  
                  [Bindable]
                  public var pickerLabel:String;
                  
                  [Bindable]
                  public var styleValue:Array;
                  
                  [Bindable]
                  public var dataProvider: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 {
                                                  cp2.selectedColor = pop1.getColorRGB();
                                          }
                                          
                                          styleValue = [cp1.selectedColor, cp2.selectedColor];
                                          dispatchMyEvent();
                                  }
          
                  }
  
                    [Bindable]
                          public var defaultValue:Array;
             
             public function setDefault():void {
                             defaultValue = styleValue;
                             cp1.selectedColor = styleValue[0];
                             cp2.selectedColor = styleValue[1];
             }
             
             public function restoreDefault():void {
                             styleValue = defaultValue;
                             cp1.selectedColor = defaultValue[0];
                             cp2.selectedColor = defaultValue[1];
             }
                  
          ]]>
  </mx:Script>
  
  <mx:Metadata>
          [Event("dataChange")]
      </mx:Metadata>
  
  </mx:FormItem>