color picker

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/widget/ColorPicker/ColorPicker.css">
<div id="main" style="display: none;">

    Click the button for color palette
    
           <div id="colorButton" style="background-color: FFFFFF; border-color: black; border-width: 1px;" dojoType="dijit.form.DropDownButton">
               <span id="colorText">color <span id="colorSwatch" style="height: 10px; width: 10px; border: 1px solid black; background-color: black;">&nbsp;&nbsp;</span></span>
               <div dojoType="dijit.TooltipDialog" id="colorPaletteDialog" title="Color Palette">
                    <div dojoType="dojox.widget.ColorPicker" id="colorPaletteWidget"></div>                    
               </div>
           </div>

</div>
<button name="test" id="test">

JavaScript

dojo.require("dijit.ColorPalette");
dojo.require("dijit.form.DropDownButton");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.widget.ColorPicker");


dojo.addOnLoad(function(){
    
    
    		var cp = dijit.byId('colorPaletteWidget');
      dojo.connect(cp,'onChange',function(cc){
          console.log(cc);
          dojo.style(dojo.byId('colorSwatch'),{backgroundColor: cp.value});
          dijit.popup.close(dijit.byId("colorPaletteDialog"));
      });


      //show main form now that parsing and event hanlding is setup
      dojo.byId('main').style.display = '';
    
   
    
    
});