jQuery.fn.crayonbox = function(opt)
{
	options = jQuery.extend(
	{
	    colors: new Array('Silver', 'Tomato', 'Orange', 'Yellow', 'Chartreuse', 'DeepSkyBlue', 'Violet'),
	    selected: null
	}, opt);

	return this.each(function()
	{
		
		var self = $(this).wrap('<span class="crayonbox"></span>').parent('.crayonbox');

		var html = '';

		for ( var i in options.colors )
		{
			html += '<span class="crayon" title="' + options.colors[i] + '">&nbsp;</span>';
		} 
		$(html).insertAfter( $(this) );

		$(self)
		.val('')
		.find('span')
		.each(function()
		{
			$(this)
			.css( 'background-color', $(this).attr('title') )
			.click(function()
			{
				$(self).find('span').html('&nbsp;');
				$(this).html('&diams;');
				$(self).find('input').val( $(this).attr('title') );
			});
		});
		
		if ( null != options.selected )
		{
			$(self).find('[title=' + options.selected + ']').trigger('click');
		}
	});
}