$(document).ready(function() {

	/* le nouveau select */
		// partie visible
		$("#ville").before('<div id="villeSelected"></div>');
		$("#villeSelected").append($("#ville>option:selected").text());
		// partie deroulante
		$("#ville").before('<ul id="villeUl" class="cache"></ul>');
		$("#ville>option").each(function() {
			$("#villeUl").append('<li title="'+$(this).val()+'">'+$(this).text()+'</li>');
		});
	/* l'ancien select */
		var strVilleValue = $("#ville>option:selected").val();
		$("#ville").remove();
		$("#villeUl").after('<input type="hidden" id="ville" name="ville" value="'+strVilleValue+'" />');
	/* gestion des evenements */
		// affichage partie déroulante
		$("#villeSelected").bind("click",function(event) {
			if($("#villeUl").is(":hidden")) {
				$("#villeUl").removeClass("cache");
				event.stopPropagation();
			}
		});
		// masquage partie déroulante
		$("body").bind("click",function() {
			if($("#villeUl").is(":visible"))
				$("#villeUl").addClass("cache");
		});
		// modification partie visible
		$("#villeUl>li").bind("click",function() {
			$("#ville").val($(this).attr("title"));
			$("#villeSelected").empty().append($(this).text()).click();
		});
		// rollover partie déroulante
		$("#villeUl>li").bind("mouseover",function() {
			$(this).addClass("mouseover");
		});
		$("#villeUl>li").bind("mouseout",function() {
			$(this).removeClass("mouseover");
		});

});