function createDropDown(source){
    var selected = source.find("option:selected");  // get selected <option>
    var options = source.find("option");  // get all <option> elements
    var timeoutID;
    
    // create <dl> and <dt> with selected value inside it
    source.parent().append('<dl id="'+source.attr('id')+'_target" class="dropdown"></dl>')
    var target = jQuery('#'+source.attr('id')+'_target');
    target.append('<button value="'+selected.val()+'" id="'+source.attr('id')+'_button" type="button">' + selected.text() + '</button>')
    target.append('<dd><ul></ul></dd>')
    
    function hide() {
        target.find("dd ul").hide()
    }
    
    function position() {
        target.find("dd ul").position({
            of: jQuery( "#"+source.attr('id')+"_button" ),
            my: "center top",
            at: "center bottom",
            collision: "flip"
        });
    }
    
    // iterate through all the <option> elements and create UL
    options.each(function(){
        target.find("dd ul").append('<li><a href="#">' +
            jQuery(this).text() + '<span class="value">' +
            jQuery(this).val() + '</span></a></li>');
    });

    target.find("dd ul li a").click(function() {
        var text = jQuery(this).html();
        target.find("button").html(text);
        target.find("dd ul").hide();
        source.val(jQuery(this).find("span.value").html())
        return false;
    });

    target.find("button").mouseover(function() {
        var ul = target.find("dd ul")
        ul.show();
        position();
        
        jQuery(".dropdown dd ul").not(ul).hide();
        jQuery('.hasDatepicker').datepicker('hide');
    });

    target.find("button").click(function() {
        target.find("dd ul").toggle();
        position();
    });

    jQuery(document).bind('click', function(e) {
        var jQueryclicked = jQuery(e.target);
        if (! jQueryclicked.parents().hasClass("dropdown"))
            jQuery(".dropdown dd ul").hide();
    });
    
    target.find("ul, button").mouseleave(function(e){
        timeoutID = setTimeout(hide, 1000);
    });
    
    target.find("ul, button").mouseenter(function(e){
        if (timeoutID) {
            clearTimeout(timeoutID);
        }
    }); 
}