$(document).ready(function(){

	$("#paints").submit(function(){
		var redirect = $("#cselect").find("li[@class=selected]").attr("alt");
		document.location.href=redirect;
		return false;
	});

	refreshUL();
	fake();
});

function fake(){
	$("#cselect > li").click(function(){

		$("#cselect > li").removeClass("selected");
		$("#cselect > li").addClass("avisible");
		$("#cselect > li").hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		});

		$("#cselect > li[@class='avisible']").click(function(){
			$("#cselect > li").removeAttr("class");
			$(this).addClass("selected");
			refreshUL();
		});
	});
}

function refreshUL(){
	var is_selected = $("#cselect > li[@class=selected]").attr("alt");
	$("#cselect").remove();

	var cOption = $("#paint-colors > form > select > option[@value=" + is_selected + "]");

	if(cOption!=null){
		$(cOption).attr("selected","selected");
	}

	var oElement = $("#paint-colors > form");
	oElement.find("select").addClass("d_none");
	var countOF = $(oElement).find("select > option");
	$(oElement).append("<ul id='cselect'></ul>");
	for(var i=0;i<countOF.length;i++){
		var oOption = countOF.eq(i);
		var oSelecd = oOption.attr("selected");
		if(oSelecd){
			addElement = "<li alt="+$(oOption).attr('value')+" class='selected'><span>&nbsp;</span>"+oOption.html()+"</li>";
		} else {
			addElement = "<li alt="+$(oOption).attr('value')+"><span>&nbsp;</span>"+oOption.html()+"</li>";
		}
		$("#cselect").append(addElement);
	}

	$("#cselect > li:first").addClass("first");
	fake();
}