$(document).ready(function () {
    $("select[class='dropdown']").each(function (e) {
        createdropdown($(this));
    });
});

function createdropdown(dropdown) {
    var parent = dropdown.parent();
    var dropdownwidth = 94;
    var dropdowncontainerwidth = 94;
	if ($.browser.msie) {
	    dropdownwidth = 84;
	    dropdowncontainerwidth = 95;
	}

	//create container
	var dropdowncontainer = $("<div></div>").addClass("dropdownframe").css("width", dropdownwidth).css("font-family", dropdown.css("font-family")).css("font-size", dropdown.css("font-size")).css("line-height", dropdown.css("font-size"));
	var inner = $("<div></div>").addClass("dropdown").appendTo(dropdowncontainer);
	$("<span></span>").text(dropdown.children("option:first").text()).appendTo(inner);

	$("<input />").attr("name", dropdown.attr("name")).attr("id", dropdown.attr("id")).attr("ref", dropdown.attr("ref")).attr("type", "hidden").attr("value", dropdown.children("option:first").val()).appendTo(dropdowncontainer);
	
	//create options
	var optionsframe = $("<div></div>").addClass("alloptions").css("width", dropdowncontainerwidth - 7).appendTo(dropdowncontainer); // 6 = padding of the optionsframe * 2
	dropdown.children("option").each(function(e) {
		$("<a></a>").text($(this).text()).attr("ref",$(this).val()).attr("href","#").appendTo(optionsframe);
	});
	
	//remove the original select-element, and ad the new one
	dropdowncontainer.appendTo(parent);
	dropdown.remove();
	
	//add the functions needed for the new dropdown to work
	dropdownfunctions(dropdowncontainer.children(".dropdown"));
	
}
function dropdownfunctions(dropdowncontainer) {
	
	//change on hover
	dropdowncontainer.hover(function() {
		$(this).parent().addClass("hoverdropdown");
	}, function() {
		$(this).parent().removeClass("hoverdropdown");
	});
	
	//show the options
	dropdowncontainer.click(function (e) {
	    e.preventDefault();
	    $(this).parent().addClass("opendropdown");
	    $(this).parent(".dropdownframe").css("z-index", 10000);
	    $(this).parent().children(".alloptions").fadeIn(300);
	});
	
	//make sure the options aren't hidden when visitor clicks in the options-frame
	dropdowncontainer.parent().children(".alloptions").mouseup(function() {
		return false;
	});
	
	//when clicking outside the options-frame, hide the options
	$(document).mouseup(function(e) {
	    dropdowncontainer.parent().children(".alloptions").fadeOut(100);
	    dropdowncontainer.parent().removeClass("opendropdown");
	    dropdowncontainer.parent().css("z-index", 100);
	});	
	
	//when an option is chosen, set hiddenvalue, change text in the new select, then hide the options-frame
	dropdowncontainer.parent().children(".alloptions").children("a").click(function (e) {
	    e.preventDefault();
	    dropdowncontainer.children("span").text($(this).text());
	    //dropdowncontainer.children("span").hide();
	    //dropdowncontainer.children("span").fadeIn(200);
	    dropdowncontainer.parent().children("input").val($(this).attr("ref"));
	    dropdowncontainer.parent().children(".alloptions").fadeOut(100);
	    dropdowncontainer.parent().removeClass("opendropdown");
	});
}