$(function() {
	
	var selects = $("*").children("select");
	
	selects.each( function(i){
		$(this).hide();
		var selectId = $(this).attr("id");
		var selectName = $(this).attr("name");
		var selectClass = $(this).attr("class");
		var theOptions = $(this).children("option:not(:first)");
		var defaultValue = $(this).children("option:first").text();
		
		$(this).after("<div class=\"selectBox\"><input type=\"hidden\" value=\""+defaultValue+"\" /><p class=\"value\"></p><ul class=\"options\"></ul></div>");
		$(this).next(".selectBox").addClass(selectClass);
		$(this).next(".selectBox").attr("id",selectId);
		$(this).next(".selectBox").children("ul.options").css("z-index",90 + i);
		$(this).next(".selectBox").children("input[type=hidden]").attr("id",selectId);
		$(this).next(".selectBox").children("input[type=hidden]").attr("name",selectName);
		$(this).next(".selectBox").children("p.value").html(defaultValue);
		$(this).next(".selectBox").children("ul.options").append(theOptions);
		
    	var newOptions = $(this).next(".selectBox").children("ul.options").children("option");
		
		newOptions.each( function(j){
			$(this).replaceWith("<li>" + $(this).text() + "</li>");
		});
		
		//$(this).remove();
		
	});
		
	
	// now style the new html
	$(".selectBox ul.options, .selectBox input[type=hidden]").hide();
	$(".selectBox").hover( function() { $(this).addClass("hover"); }, function() { $(this).removeClass("hover"); } );
	$(".selectBox").click( function(){
		$(this).children("ul.options").toggle();
		if ($(this).hasClass("hasFocus")) {
			$(this).removeClass("hasFocus");
		} else {
			$(this).removeClass("hasFocus");
		}
		
	} );
	$(".selectBox").mouseleave( function(){ $(this).children("ul.options").hide(); $(this).removeClass("hasFocus"); } );
	$(".selectBox ul.options li").click(function(){
		var txt = $(this).text();
		$(this).parents("ul").prevAll("input").attr("value",txt);
		$(this).parents("ul").prevAll("p.value").text(txt);
		if ($(this).text().length > 20) $(".searchForm_select .value").css("padding","2px");
		else $(".searchForm_select .value").css("padding","10px 0 0 0");
	});
	$(".selectBox ul.options li").hover( function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); } );
	
});
