jQuery.noConflict();
jQuery(document).ready(function() {
    createDropDown();

    jQuery(".dropdown dt a").click(function() {
        jQuery(".dropdown dd ul").toggle();
    });

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

    jQuery(".dropdown dd ul li a").click(function() {
        var text = jQuery(this).html();
        jQuery(".dropdown dt a").html(text);
        jQuery(".dropdown dd ul").hide();

        var source = jQuery("#Languages");
        source.val(jQuery(this).find("span.value").html())
        //alert(jQuery(this).find("span.value").html());
    });
});

function createDropDown(){
    var source = jQuery("#Languages");
    var selected = jQuery('option:selected',source);
    var options = jQuery("option", source);

    jQuery(".languages").append('<dl id="target" class="dropdown"></dl>')
    jQuery("#target").append('<dt><a href="#">' +
        '<img src="' + APP_ROOT + 'themes/bene.de/images/flags/'+selected.text()+'.jpg" class="flag" alt="" />' +
        selected.text() +
        '<span class="value">' + selected.val() +
        '</span></a></dt>')
    jQuery("#target").append('<dd><ul></ul></dd>')

    options.each(function(){
        jQuery("#target dd ul").append('<li><a href="' + APP_ROOT + jQuery(this).val() +'">' +
            '<img src="' + APP_ROOT + 'themes/bene.de/images/flags/'+jQuery(this).text()+'.jpg" class="flag" alt="" />' +
            jQuery(this).text() + '<span class="value">' +
            jQuery(this).val() + '</span></a></li>');
    });
}