// JavaScript Document
					  
var customSelect = {
	zIndex : 1,
	displayed : 0,
	
	// Initialisation
	init : function() {
		// Cache automatiquement la liste active lors d'un clic sur la page
		jQuery(document).bind('click', function(){
			if (customSelect.displayed === 0) return
			customSelect.displayed.prev('span').removeClass('selected');
			customSelect.displayed.hide();
			customSelect.displayed = 0;
		});
	},
	
	// Customise un champs select
	customize : function($selector, $className) {
		// Recuperation des valeurs
		var $select  = jQuery('#' + $selector);
		var $options = $select.children('option');
		var $option  = $select.children(':selected');
		var $value   = $option.attr('value');
		var $text    = $option.text();
		// La box contenant le choix actuel
		var $title = jQuery('<span/>').text($text);
		$title.bind('click', customSelect.showSelect);
		// La liste des choix
		var $list  = jQuery('<div/>');
		var $i, $choice, $temp, $image;
		for($i = 0; $i < $options.size(); $i++) {
			// On recupere le option
			$temp  = $options.eq($i);
			$image = $temp.attr('label');
			// On crée le choix
			$choice = jQuery('<a/>');
			$choice.text($temp.text());
			if (typeof($image) == 'string' && $image.indexOf('/') > 0 && $image.length > 1) {
				$choice.prepend(jQuery('<img/>').attr('src', $image));
			}
			$choice.attr('href' , '');
			$choice.attr('rel'  , $temp.val());
			$choice.attr('title', $temp.attr('title'));
			$choice.bind('click', customSelect.selectOption);
			$list.append($choice);
		}
		$list.hide();
		// Le select customisé
		var $custom;
		if ($select.parent('.' + $className).size()) {
			$custom = $select.parent('.' + $className).first();
		} else {
			$custom = jQuery('<div/>').addClass($className);
			$custom.insertBefore($select);
			$select.detach();
			$custom.append($select);
			$select.hide();
		}
		$custom.children().not('select').remove();
		$custom.append($title).append($list);
	},
	
	// Affichage d'un select
	showSelect : function($event) {
		// Selection des noeuds
		var $custom = jQuery(this).parent();
		var $list = $custom.children('div');
		// Si on vient de cliquer sur le select deja affiché
		if (customSelect.displayed !== 0) {
			if (jQuery.contains($custom.get(0), customSelect.displayed.get(0))) {
				customSelect.displayed.prev('span').removeClass('selected');
				customSelect.displayed.hide();
				customSelect.displayed = 0;
				$event.stopPropagation();
				$event.preventDefault();
				return;
			}
		}
		// Sinon, on cache l'ancien, et on affiche le nouveau
		if (customSelect.displayed !== 0) {
			customSelect.displayed.prev('span').removeClass('selected');
			customSelect.displayed.hide();
		}
		$custom.css('z-index', customSelect.zIndex++);
		$custom.children('span').addClass('selected');

		customSelect.displayed = $list;
		$list.toggle();
		// On n'effectue pas l'action normale
		$event.stopPropagation();
		$event.preventDefault();
	},

	// Selectionne une option	
	selectOption : function($event) {
		// Selection des noeuds
		var $choice = jQuery(this);
		var $list   = $choice.parent();
		var $custom = $list.parent();
		var $select = $custom.children('select');
		var $title  = $custom.children('span');
		var $value  = $choice.attr('rel');
		var $text   = $choice.text();
		// Affichage des valeurs
		$title.text($text);
		$select.val($value);
		$select.change();
		// Et on bloque les event
		$event.preventDefault();
	},
	
	// Met à jour la liste des choix d'un champ select
	updateValues : function($selector, $values, $className) {
		// Selection
		var $select = jQuery('#' + $selector);
		var $custom = $select.parent('div').first();
		var $className = $custom.attr('className');
		var $value = $select.val();
		var $i, $option;
		// Nettoyage
		$select.empty();
		// Remplissage
		for($i in $values) {
			if ($values.hasOwnProperty($i)) {
				// La nouvelle option
				$option = jQuery('<option>').attr('value', $i);
				if (typeof($values[$i]) == 'string') {
					// Si il s'agit d'une chaine, on l'affiche
					$option.text($values[$i]);
				} else if (typeof($values[$i]) == 'object') {
					// Si l'objet a un champ texte, on l'affiche
					if ($values[$i].hasOwnProperty('text')) {
						$option.text($values[$i].text);	
					} else {
						$option.text($i);
					}
					// Si il a une image, on l'enregistre dans le label
					if ($values[$i].hasOwnProperty('image')) {
						$option.attr('label', $values[$i].image);
					}
				} else {
					// Autre, on affiche juste la valeur
					$option.text($i);
				}
				// Et on l'ajoute au select
				$select.append($option);
			}
		}
		// On verifie la validité de la valeur
		if (typeof($value) == 'string') {		
			// Si valide, on l'active
			$select.val($value);
		} else {
			// Sinon on prend le premier element
			$select.val($select.children('option').first().attr('value'));	
		}
		// Mise à jour du skin
		customSelect.customize($selector, $className);	
	}
};


/*
Puis utiliser

<link rel="stylesheet" href="customSelect/customSelect.css" type="text/css" media="screen" />
<script type="text/javascript" src="customSelect/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="customSelect/customSelect.js"></script>
<script type="text/javascript">
	jQuery(function() {
		customSelect.customize('Id_du_premier_select_à_custom', 'class_à_utiliser');
		customSelect.customize('Id_du_second_select_à_custom', 'class_à_utiliser');
		customSelect.init();
	});
</script>


*/