/* Source : http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx */
$(document).ready(function() {
});

function createDropDown($id)
{
    var $source = $("#"+$id);
    var selected = $source.find("option[selected]");  // get selected <option>
    var options = $("option", $source);  // get all <option> elements

	//On s'assure de ne pas ecrire 2 fois a cause d'ajax (cas vu sur ligue paris)
    $("#"+$id+"Css").remove();

    // create <dl> and <dt> with selected value inside it
    $source.parent().append('<dl id="'+$id+'Css" class="dropdown"></dl>')
    $("#"+$id+"Css").append('<dt><a href="javascript:void(0);">' + selected.text() +
        '<span class="value">' + selected.val() +
        '</span></a></dt>')
    $("#"+$id+"Css").append('<dd><ul></ul></dd>')
    // iterate through all the <option> elements and create UL
    options.each(function()
    {
        $("#"+$id+"Css dd ul").append('<li><a href="javascript:void(0);">' +
            $(this).text() + '<span class="value">' +
            $(this).val() + '</span></a></li>');
    });

   	$("#"+$id).hide();


	$(".dropdown dt a").click(function(evt)
	{
	    $(evt.target).parent().parent().find("dd ul").toggle();
	});

	$(".dropdown dd ul li a").click(function(evt)
	{
	    var text = $(this).html();
	    $(".dropdown dt a").html(text);
	    $(".dropdown dd ul").hide();
	    var $source = $(evt.target).parent().parent().parent().parent().parent().find("select");
	    $source.val($(this).find("span.value").html());
	    $source.change();
	});

	$(document).bind('click', function(e)
	{
	    var $clicked = $(e.target);
	    if (! $clicked.parents().hasClass("dropdown"))
	    {    $(".dropdown dd ul").hide();	}
	});
}