$(document).ready(function() {
    redrawSelectBoxes();
});
function redrawSelectBoxes() {
    $(".ddn-container, .ddn").remove();
    var $selectBoxes = $("[id='select1'], [id='select2'], [id='select3'], [id='select4'], [id='select5'], [id='select6'], [id='select7'], [id='select8'], [id='select9'], [id='select10'], [id='select11'], [id='select12'], [id='select13'], [id='select14'], [id='select15'], [id='select16'], [id='select17'], [id='select18'], [id='select19'], [id='select20']");
    for (var i = 0; i < $selectBoxes.length; i++) {
        var ddl = $selectBoxes.get(i);
        var width = ddl.style.width ? ddl.style.width : "";
        var selText = ddl.selectedIndex != null && ddl.selectedIndex >= 0 ? ddl.options[ddl.selectedIndex].text : "";
        var div = "<div class='ddn ddn-selector' style='width: " + width + "' parent='" + ddl.id + "' id='div_" + ddl.id +
                          "'>" + selText + "</div><div id='div_" + ddl.id + "_Container' class='ddn-container'>";
        for (var o = 0; ddl.options[o]; o++) {
            div += "<div index='" + o + "' class='ddn-item' parent='" + ddl.id + "'>" + ddl.options[o].text + "</div>";
        }
        div += "</div>";
        $("#" + ddl.id).after(div);
        $("#" + ddl.id).css("display", "none");
    }
    $(".ddn-container").hide();
    $(".ddn-selector").click(function(e) {
        var id = $(this).attr("id");
        var $container = $("#" + id + "_Container")
        if (!$container.css("display") || $container.css("display") == "none")
            $container.slideDown(0);
        else
            $container.slideUp(0);
        e.preventDefault();
    });
    $(".ddn-item").click(function() {
        var $this = $(this);
        var $parentId = $this.attr("parent")
        var $parent = $("#" + $parentId)
        $parent[0].selectedIndex = $(this).attr("index");
        $("#div_" + $parentId).text($(this).text());
        $("#div_" + $parentId).trigger('click');
        if ($parent[0].attributes["onchange"])
            eval($parent[0].attributes["onchange"].value);
    });
    $(".ddn-item").hover(function() {
        $(this).addClass("ddn-item-hover");
    },
    function() {
        $(this).removeClass("ddn-item-hover");
    });
	
	$(".ddn-container").mouseleave(
		function() {
			$('.ddn-container').hide();
		}
	);
	
	$(".select_s").mouseleave(
		function() {
			$('.ddn-container').hide();
		}
	);
	
	$(".select").mouseleave(
		function() {
			$('.ddn-container').hide();
		}
	);
}