<?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>
                  <mx:ColorPicker height="20" width="55" id="cp" dataProvider="{dataProvider}"
                          close="{this.selectedColor = cp.selectedColor; dispatchMyEvent(); }" />
                  <mx:Image source="{colorWheel}" buttonMode="true" id="colorWheelImg" useHandCursor="true" 
                             visible="false" mouseDown="doColorPicker(cp.selectedColor)" />
                  
          </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 selectedColor:Number;
                          
                          [Bindable]
                          public var dataProvider:Array;
                          
                          private function dispatchMyEvent():void {
                  this.dispatchEvent( new Event("dataChange") );
              }
                   
                          private function doColorPicker(whatColor: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 {
                                          cp.selectedColor = pop1.getColorRGB();
                                          selectedColor = pop1.getColorRGB();
                                          dispatchMyEvent();
                                  }
          
                  }
                  
                    [Bindable]
                          public var defaultValue:Number;
             
             public function setDefault():void {
                             defaultValue = selectedColor;
                             cp.selectedColor = selectedColor;
             }
             
             public function restoreDefault():void {
                             selectedColor = defaultValue;
                             cp.selectedColor = defaultValue;
             }
              
             
                  ]]>
          </mx:Script>
          
          <mx:Metadata>
          [Event("dataChange")]
      </mx:Metadata>
     
  </mx:FormItem>