/*
 * ColourPicker 1.0
 *
 * Copyright (c) 2007 Andreas Lagerkvist (exscale.se)
 * 
 * Here's a little php-function you can
 * use to generate "web safe" colours:
 * 
function gwsc()
{
	$colours = array("00", "33", "66", "99", "CC", "FF");

	for($i=0; $i<6; $i++)
	{
		for($j=0; $j<6; $j++)
		{
			for($k=0; $k<6; $k++)
			{
				$colour = $colours[$i] .$colours[$j] .$colours[$k];
				echo "<option value=\"$colour\">#$colour</option>\n";
			}
		}
	}
}
 *
 * Use it like this:
 * 
<select name="colour">
	<?php gwsc(); ?>
</select>
 */
jQuery.fn.colourPicker = function(conf)
{
	// Returns inverted hex-value (well, _should_ do that)
	function niceColour(hex)
	{
		var r = hex.substr(0, 2), 
			g = hex.substr(2, 2), 
			b = hex.substr(4, 2);

		// Todo...
		return 'ffffff';
	}

	// Config for plug-in
	var config =
	{
		ico: 'ico.gif',			// Icon user clicks to open dialog
		title: 'Choisissez une couleur',	// Heading in dialog
		inputBG: true,  		// Whether to change the input's background
		aniSpeed: 500,			// Speed of colour picker show/hide animation
		chem: 'non'			// Valeur rajoutée pour permettre la redirection vers le script de changement de couleur
	};

	config = $.extend(config, conf);

	// Create colour-picker container
	if(!$('#colour-picker').length)
	{
		$('<div id="colour-picker"></div>').appendTo('body').hide();
	}

	// Always return each...
	return this.each(function(i)
	{
		var select = jQuery(this);

		if(config.chem!='non'){
		var cpCarre = '<table cellspacing=0 cellpadding=0 border=0 style="display:inline;"><tr><td width=10 bgcolor="' +select.attr('def') +'" >&nbsp;</td><td width=10>&nbsp;</td></tr></table>';}
		else{var cpCarre ='_';}

		// Create colour-picker input
		var cpInput = '<input type="text" name="' +select.attr('name') +'" id="' +select.attr('name') +'" class="colour-picker-input" size="15" maxlength="15" value="' +select.attr('title') +'" readonly/>';

		// Create colour-picker icon
		var cpIco = '<a href="#" class="colour-picker-open' +select.attr('name') +'"><img src="' +config.ico +'" alt="Choisir" style="border:none;"/></a>';

		// Create list of colours
		var loc = '';

		// Go through every option in select and store hex and title
		jQuery('option', select).each(function()
		{
			var hex = jQuery(this).val(), 
				title = jQuery(this).text();
	
			// What could you use instead of rel-attribute to store the hex-value? class mustn't start wiv a digit and href fooks wiv IE...
			loc += '<li><a href="#" title="' +title +'" rel="' +hex +'" style="background: #' +hex +'; colour: ' +niceColour(hex) +';">' +title +'</a></li>';
		});

		// Remove select, add input & icon cpCarre
		jQuery(cpIco).insertAfter(select);
		jQuery(cpInput).insertAfter(select);
		jQuery(cpCarre).insertAfter(select);
		select.remove();

		// If user clicks an icon
		jQuery('a.colour-picker-open'+select.attr('name')).click(function()
		{
			// Get list of colours, the input and the icons top/left position (to position the colour-picker)
			var input = jQuery(this).prev('input.colour-picker-input'), 
				icoPos = jQuery(this).offset();

			// Fill colour picker wiv colours and show it (you can change the css() call to a center() call if you prefer (then u should prolly change the show-call to a fadeIn (and the hide to fadeOut)))
			jQuery('#colour-picker').html('<h2>' +config.title +'</h2><ul>' +loc +'</ul>').css({position: 'absolute', left: icoPos.left +'px', top: icoPos.top +'px'}).show(config.aniSpeed);

			// If user clicks link inside colour picker
			jQuery('#colour-picker a').click(function()
			{
				var hex = jQuery(this).attr('title');
				var hex2 = jQuery(this).attr('rel');

				// Set the input's value to clicked colour's hex
				input.val(hex);

				// Also change its background and colour
// 				if(config.inputBG)
// 				{
// 					input.css({background: '#' +hex, color: '#' +niceColour(hex)});
// 				}

				// Hide the container
				jQuery('#colour-picker').hide(config.aniSpeed);
				
				if(config.chem!='non'){
				window.location=config.chem +	hex2;
				}
// 				else{document.getElementById('test_clement').bgcolor="#"+hex2;}

				return false;
			});

			return false;
		});
	});
};