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

function createdropdown(dropdown) {
	var parent = dropdown.parent();

	//create container
	var dropdowncontainer = $("<div></div>").addClass("dropdownframe").css("width",dropdown.outerWidth()).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("id", dropdown.attr("id")).attr("name", dropdown.attr("name")).attr("type", "hidden").attr("value", dropdown.children("option:first").val()).appendTo(dropdowncontainer);
	
	//create options
	var optionsframe = $("<div></div>").addClass("alloptions").css("width", dropdown.outerWidth() - 8).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", "#").attr("enabled", $(this).attr("enabled")).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();
	    if ($(this).attr("enabled") == "true") { 
	        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");
	    }
	});
}