$(document).ready(function() {
    createDropDown("#custom-search-params-article-group-id-wrapper select", "#custom-search-params-article-group-id-wrapper");
    
    var wrapper = $('#custom-search-left-params-article-group-id-wrapper');
    if (wrapper) {
        createDropDown('#custom-search-left-params-article-group-id-wrapper select', '#custom-search-left-params-article-group-id-wrapper');
    }
    
    $(".dropdown dt a").click(function(e) {
        $(".dropdown dd ul", $(this).parents('.dropdown').parent()).toggle();
    });

    $(document).bind('click', function(e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dropdown"))
            $(".dropdown dd ul").hide();
    });
                
    $(".dropdown dd ul li a").click(function() {
        var text = $(this).html();
        $(".dropdown dt a", $(this).parents('.dropdown').parent()).html(text);
        $(".dropdown dd ul", $(this).parents('.dropdown').parent()).hide();
        
        var source = $("select", $(this).parents('.dropdown').parent());
        source.val($(this).find("span.value").html())
    });
});

function createDropDown(source, target){
    var source = $(source);
    source.hide();
    var selected = source.find("option[selected]");
    var options = $("option", source);
    
    var target = $(target); 
    $(target).append('<dl class="dropdown target"></dl>')
    $(".target", target).append('<dt><a href="#">' + selected.text() + 
        '<span class="value">' + selected.val() + 
        '</span></a></dt>')
    $(".target", target).append('<dd><ul></ul></dd>')

    options.each(function(){
        $(".target dd ul", target).append('<li><a href="#">' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></a></li>');
    });
    
    
}