;(function($){ // secure $ jQuery alias
/********************************************************
 * jquery.crayonbox.js - rev 2
 * Copyright (c) 2009, Gelform
 * Liscensed under the MIT License (MIT-LICENSE.txt)
 * http://www.opensource.org/licenses/mit-license.php
 * Created: 2009-01-20 | Updated: 2009-02-18
 ********************************************************/

/**
 * create a crayonbox around a textfield
 * 
 * @param	object	opt	options
 */
jQuery.fn.crayonbox = function(opt)
{
	// set default options and overwrite them
	options = jQuery.extend(
	{
		// your crayon colors
	    colors: new Array('#000','#300','#600','#900','#C00','#F00','#003','#303','#603','#903','#C03','#F03','#006','#306','#606','#906','#C06','#F06','#009','#309','#609','#909','#C09','#F09','#00C','#30C','#60C','#90C','#C0C','#F0C','#00F','#30F','#60F','#90F','#C0F','#F0F','#030','#330','#630','#930','#C30','#F30','#033','#333','#633','#933','#C33','#F33','#036','#336','#636','#936','#C36','#F36','#039','#339','#639','#939','#C39','#F39','#03C','#33C','#63C','#93C','#C3C','#F3C','#03F','#33F','#63F','#93F','#C3F','#F3F','#060','#360','#660','#960','#C60','#F60','#063','#363','#663','#963','#C63','#F63','#066','#366','#666','#966','#C66','#F66','#069','#369','#669','#969','#C69','#F69','#06C','#36C','#66C','#96C','#C6C','#F6C','#06F','#36F','#66F','#96F','#C6F','#F6F','#090','#390','#690','#990','#C90','#F90','#093','#393','#693','#993','#C93','#F93','#096','#396','#696','#996','#C96','#F96','#099','#399','#699','#999','#C99','#F99','#09C','#39C','#69C','#99C','#C9C','#F9C','#09F','#39F','#69F','#99F','#C9F','#F9F','#0C0','#3C0','#6C0','#9C0','#CC0','#FC0','#0C3','#3C3','#6C3','#9C3','#CC3','#FC3','#0C6','#3C6','#6C6','#9C6','#CC6','#FC6','#0C9','#3C9','#6C9','#9C9','#CC9','#FC9','#0CC','#3CC','#6CC','#9CC','#CCC','#FCC','#0CF','#3CF','#6CF','#9CF','#CCF','#FCF','#0F0','#3F0','#6F0','#9F0','#CF0','#FF0','#0F3','#3F3','#6F3','#9F3','#CF3','#FF3','#0F6','#3F6','#6F6','#9F6','#CF6','#FF6','#0F9','#3F9','#6F9','#9F9','#CF9','#FF9','#0FC','#3FC','#6FC','#9FC','#CFC','#FFC','#0FF','#3FF','#6FF','#9FF','#CFF','#FFF'),
		
		// define a default selected color
	    selected: null, 
		
		// the tag that will wrap each crayon - span, a or button work well
		crayonTag: 'span',
		
		// optional X button that will clear your selected crayon
		clearButton: false
	}, opt);

	// return each object passed in
	return this.each(function()
	{
		// if textfield has a color, select it (overwritten by option)
		if ( '' != $(this).val() && null == options.selected )
		{
			options.selected = $(this).val();
		}
		
		// set self to containing span.crayonbox
		var self = $(this).wrap('<span class="crayonbox"></span>').parent('.crayonbox');

		// add click behavior
		$(self).click(function(e)
		{
			var clicked = e.target;
			if ( $(e.target).hasClass('crayon') )
			{
				$(self).uncolor();
				$(clicked).html('&diams;').addClass('coloring');
				$("#wall").animate( { backgroundColor: $(clicked).attr('title') }, "slow");	
				//$('input', self).val( $(clicked).attr('title') );
			}
		});

		// build our crayons
		var html = '';
		for ( var i in options.colors )
		{
			$('<' + options.crayonTag + ' class="crayon" title="' + options.colors[i] + '">&nbsp;</' + options.crayonTag + '>')
			.appendTo( $(self) )
			.css( 'background-color', options.colors[i] );
		} 

		// add clear button
		if ( options.clearButton )
		{
			$('<' + options.crayonTag + ' class="boxlid">X</' + options.crayonTag + '>')
			.appendTo( $(self) )
			.click(function(){
				$(this).parents('.crayonbox').uncolor();
			});
		}
		
		// select default crayon
		if ( null != options.selected )
		{
			$(self).find('[title=' + options.selected + ']').trigger('click');
		}
	});
}

/**
 * Unselect the selected crayon
 * 
 * @param	boolean	clearTextfield	option to clear the textfield as well 
 * @return	object	each item passed in 
 */
jQuery.fn.uncolor = function(clearTextfield)
{
	if (undefined == clearTextfield)
	{
		clearTextfield = true;
	}
	
	return this.each(function()
	{
		$('.coloring', this).html('&nbsp;').removeClass('coloring');
	});
}
/*******************************************************************************************/
})( jQuery ); // confine scope