# A prototype color picker class

Download the Zip file here.

The most simple, no options specified:

Select Your Color: | #

    var cp1 = new colorPicker('color1');

With a preview box:

Select Your Color: | # |  |

    var cp2 = new colorPicker('color2',{
    	color:'#008a20',
    	previewElement:'color2-preview'
    });

Inline, no popup:

Select Your Color: |  | #

    var cp3 = new colorPicker('color3',{
    	color:'#008a20',
    	flat:true
    });

With lots of other options:

Select Your Color: |  | # |  |

    var cp4 = new colorPicker('color4',{
    	color:'#008a20',
    	previewElement:'color4-preview',
    	inputElement:'color4-input',
    	eventName: 'click',
    	onShow:function(picker){
    		new Effect.Appear(picker.cp);
    		return false;
    	},
    	onHide:function(picker){
    		new Effect.Fade(picker.cp);
    		return false;
    	},
    	origColor:'#000000',
    	livePreview: true,
    	hideOnSubmit:false,
    	updateOnChange:false,
    	flat: false,
    	hasExtraInfo:true,
    	extraInfo:function(picker){
    		var colors = $A([
    			  '000000', '993300', '333300', '003300', '003366', '000080', '333399', '333333',
    			  '800000', 'FF6600', '808000', '008000', '008080', '0000FF', '666699', '808080',
    			  'FF0000', 'FF9900', '99CC00', '339966', '33CCCC', '3366FF', '800080', '969696',
    			  'FF00FF', 'FFCC00', 'FFFF00', '00FF00', '00FFFF', '00CCFF', '993366', 'C0C0C0',
    			  'FF99CC', 'FFCC99', 'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF'
    		]);

    		var div = Builder.node('DIV').setStyle({padding:'10px 12px'});
    		colors.each(function(color){
    			var div_inner = Builder.node('DIV').setStyle({backgroundColor:'#'+color,cursor:'pointer',width:'10px',height:'10px','float':'left',border:'2px solid #'+color,margin:'1px'});
    			div.insert(div_inner);
    			div_inner.observe('click',function(ev){picker.setColor(color);});
    			div_inner.observe('mouseover',function(ev){ev.element().setStyle({border:'2px solid #000'});});
    			div_inner.observe('mouseout',function(ev){ev.element().setStyle({border:'2px solid #'+color});});
    		});
    		picker.extraInfo.update(div);
    	}
    });