var form = new Form();
var tabela;
var CodCor = 0;
var CodFamiliaCor = 0;
var CodSensacaoCor = 0;
var hex;
var atualizaH = true;
function ObterFamiliaESensacao() {
    return {CodFamilia: CodFamiliaCor, CodSensacao: CodSensacaoCor};
}

function LimparCores() {
    CodCor = 0;
    hex = null;
    
    for(var i=1;i<=4;i++) {
        for(j=1;j<=7;j++) {
            if(document.getElementById(i+"_"+j) != null) {
                document.getElementById(i+"_"+j).className = "nao_clicada";
            }
        }
    }

    document.getElementById("DivCoresRelacionadas").style.display = "none";
    document.getElementById("CoresRelacionadas").innerHTML = "";

    
    document.getElementById("lblFamilia_1").innerHTML = "";
    document.getElementById("tblCores_1").innerHTML = "";
    document.getElementById("tblCor_acolhedoras").innerHTML = "";
    document.getElementById("detalheCod_acolhedoras").getElementsByTagName("table")[0].style.display = "none";
    document.getElementById("DivTendencias_acolhedoras").style.display = "none";

    document.getElementById("lblFamilia_2").innerHTML = "";
    document.getElementById("tblCores_2").innerHTML = "";
    document.getElementById("tblCor_alegres").innerHTML = "";
    document.getElementById("detalheCod_alegres").getElementsByTagName("table")[0].style.display = "none";
    document.getElementById("DivTendencias_alegres").style.display = "none";

    document.getElementById("lblFamilia_3").innerHTML = "";
    document.getElementById("tblCores_3").innerHTML = "";
    document.getElementById("tblCor_energizantes").innerHTML = "";
    document.getElementById("detalheCod_energizantes").getElementsByTagName("table")[0].style.display = "none";
    document.getElementById("DivTendencias_energizantes").style.display = "none";

    document.getElementById("lblFamilia_4").innerHTML = "";
    document.getElementById("tblCores_4").innerHTML = "";
    document.getElementById("tblCor_tranquilas").innerHTML = "";
    document.getElementById("detalheCod_tranquilas").getElementsByTagName("table")[0].style.display = "none";
    document.getElementById("DivTendencias_tranquilas").style.display = "none";
    
}

function ObterCores(CodSensacao,NomeSensacao,CodFamilia,NomeFamilia) {
    LimparCores();
    document.getElementById(CodSensacao +"_"+ CodFamilia).className = "clicada";

    CodFamiliaCor = CodFamilia;
    CodSensacaoCor = CodSensacao;
    (navigator.appName.indexOf("Microsoft") != -1 ? window["vitrine"] : document["vitrine"]).mudaFamilia();

    form.PostUrl = "Escolha/Services/Cores.aspx?CodSensacaoCor="+ CodSensacao +"&CodFamiliaCor="+ CodFamilia;
    form.Form = document.getElementById("FormEscolha");
    form.callback = callbackCores;
    form.DoPost();
    tabela = document.getElementById("tblCores_"+ CodSensacao);
	
	document.getElementById("acolhedoras").getElementsByTagName("h3")[0].className = "";
	document.getElementById("alegres").getElementsByTagName("h3")[0].className = "";
	document.getElementById("tranquilas").getElementsByTagName("h3")[0].className = "";
	document.getElementById("energizantes").getElementsByTagName("h3")[0].className = "";
	
	document.getElementById(NomeSensacao.toLowerCase()).getElementsByTagName("h3")[0].className = "over";
	document.getElementById("DivTendencias_"+ NomeSensacao.toLowerCase()).style.display = "block";
    document.getElementById("lblFamilia_"+ CodSensacao).innerHTML = NomeSensacao +" / "+ NomeFamilia +"<br/>Escolha a sua tonalidade";
    document.getElementById("lblTendencia_"+ NomeSensacao.toLowerCase()).innerHTML = "Tendências "+ NomeSensacao;
    
    document.getElementById("DivTendenciasModerna").style.display = "block";
    document.getElementById("DivTendenciasCrianca").style.display = "block";
	scrollTo(0,150);
}

function callbackCores() {
    
    if (http.readyState == 4) {
        var cores = http.responseXML.getElementsByTagName("Cor");
        
        tbl = document.createElement("table");
        tbl.setAttribute("cellSpacing","6");
        tblBody = document.createElement("tbody");
        var tr = document.createElement("tr");
		var linha = 1;
		var qtde = cores.length/6;
		
		// Ajusta a altura das outras sensações de acordo com a sensação selecionada
        atualizaH = true;
		if (Math.floor(qtde) != qtde)
		    qtde = Math.floor(qtde)+1;
		var h = 232 + (26*qtde);
		
		document.getElementById("acolhedoras").style.height = h +"px";
		document.getElementById("alegres").style.height = h +"px";
		document.getElementById("tranquilas").style.height = h +"px";
		document.getElementById("energizantes").style.height = h +"px";
		
        for(var i=0;i<cores.length;i++) {
            var hex = cores[i].getElementsByTagName("Hex")[0].childNodes[0].nodeValue;
            var td = document.createElement("td");
            td.setAttribute("CodCor",cores[i].getElementsByTagName("CodCor")[0].childNodes[0].nodeValue);
            td.id = "TdCor_"+ cores[i].getElementsByTagName("CodCor")[0].childNodes[0].nodeValue;
            td.setAttribute("hex",hex);
            td.style.cursor = "pointer";
            if(td.addEventListener)
                td.addEventListener('click',SelecionarCor,false);
            else
                td.attachEvent("onclick",SelecionarCor);

            td.style.width = "18px";
            td.style.height = "20px";
            td.style.background = "#"+ hex;
			tr.appendChild(td);

			if (linha++ >= 6) {
		        tblBody.appendChild(tr);
				tr = document.createElement("tr");
				linha = 1;
			}
        }
        
        tblBody.appendChild(tr);
        tbl.appendChild(tblBody);
        tabela.innerHTML = "";
        tabela.appendChild(tbl);
    }
}

function SelecionarCor(e) {
    
    var tds = document.getElementsByTagName("td");
    for(var i = 0;i<tds.length;i++) {
        if (tds[i].id.substring(0,5) == "TdCor") {
            tds[i].className = "";
        }
    }
    if (atualizaH) {
        var h = parseInt(document.getElementById("acolhedoras").style.height.replace("px",""))+47;
        if (navigator.appName.indexOf("Microsoft") != -1)
            h += 8;
	    document.getElementById("acolhedoras").style.height = h +"px";
	    document.getElementById("alegres").style.height = h +"px";
	    document.getElementById("tranquilas").style.height = h +"px";
	    document.getElementById("energizantes").style.height = h +"px";
	    atualizaH = false;
	}

    
    
    e = e || event;
    var td = e.srcElement || e.target;
	CodCor = td.getAttribute("CodCor");
	
	hex = td.getAttribute("hex");
	td.style.backgroundImage = "";
	td.className = "clicada";
	var Sensacao = td.parentNode.parentNode.parentNode.parentNode.parentNode.className;
	var http = nav.ObterHttp();
    
	
//	http.onreadystatechange = function() {
//	    alert('http.onreadystatechange');
//	    if (http.readyState == 4) {
//	        var xml = http.responseXML;
//	        var Nome = "";
//	        if (xml.getElementsByTagName("Nome")[2].childNodes.length > 0)
//	            xml.getElementsByTagName("Nome")[2].childNodes[0].nodeValue;
//			var Codigo = xml.getElementsByTagName("Codigo")[0].childNodes[0].nodeValue;
//			var Hex = xml.getElementsByTagName("Hex")[0].childNodes[0].nodeValue;
//			c = Hex;
//			
//			MudarVitrine();
//            
//			var tblCor = document.getElementById("detalheCod_"+Sensacao).getElementsByTagName("table")[0];
//			
//			//alert(tblCor);
//			
//			tblCor.getElementsByTagName("td")[0].style.backgroundColor = "#"+ Hex;
//			tblCor.getElementsByTagName("td")[1].innerHTML = (Nome.length > 0 ? Nome +"<br/>" : "")+"C&oacute;digo "+ Codigo +"<br/><a href=\"#0\" onclick=\"AdicionarLista("+ CodCor +")\">+ Lista</a>" ;
//			tblCor.style.display = "block";

//	        document.getElementById("DivCoresRelacionadas").style.display = "block";
//	        document.getElementById("CoresRelacionadas").innerHTML = "";
//	        //SelecionarCoresRelacionadas(CodSensacaoCor);
//        	urchinTracker("Cores/Escolha/"+ Codigo);
//	    }
//	}
	
	
            http.open("GET","Escolha/Services/Cores.aspx?CodCor="+ CodCor,false);
	        http.send(null);

	
	        var xml = http.responseXML;
	        var Nome = "";
	        if (xml.getElementsByTagName("Nome")[2].childNodes.length > 0)
	            xml.getElementsByTagName("Nome")[2].childNodes[0].nodeValue;
			var Codigo = xml.getElementsByTagName("Codigo")[0].childNodes[0].nodeValue;
			var Hex = xml.getElementsByTagName("Hex")[0].childNodes[0].nodeValue;
			c = Hex;
			
			MudarVitrine();
            
			var tblCor = document.getElementById("detalheCod_"+Sensacao).getElementsByTagName("table")[0];
			
			tblCor.getElementsByTagName("td")[0].style.backgroundColor = "#"+ Hex;
			tblCor.getElementsByTagName("td")[1].innerHTML = (Nome.length > 0 ? Nome +"<br/>" : "")+"C&oacute;digo "+ Codigo +"<br/><a href=\"#0\" onclick=\"AdicionarLista("+ CodCor +")\">+ Lista</a>" ;
			tblCor.style.display = "block";	
	
	        document.getElementById("DivCoresRelacionadas").style.display = "block";
	        document.getElementById("CoresRelacionadas").innerHTML = "";
	        //SelecionarCoresRelacionadas(CodSensacaoCor);
        	urchinTracker("Cores/Escolha/"+ Codigo);
	
	
}

function SelecionarCoresRelacionadas(CodSensacaoCor) {
    var http = form.ObterHttp();
    var tplCoresRelacionadas = document.getElementById("tplCoresRelacionadas");
    http.onreadystatechange = function() {
        if (http.readyState == 4) {
            var cores = http.responseXML.getElementsByTagName("Cor");
            
            if (cores.length == 3) {
                CodigoCor1 = cores[0].getElementsByTagName("Codigo")[0].childNodes[0].nodeValue;
                HexCor1 = cores[0].getElementsByTagName("Hex")[0].childNodes[0].nodeValue;
                CodigoCor2 = cores[1].getElementsByTagName("Codigo")[0].childNodes[0].nodeValue;
                HexCor2 = cores[1].getElementsByTagName("Hex")[0].childNodes[0].nodeValue;
                CodigoCor3 = cores[2].getElementsByTagName("Codigo")[0].childNodes[0].nodeValue;
                HexCor3 = cores[2].getElementsByTagName("Hex")[0].childNodes[0].nodeValue;
                document.getElementById("CoresRelacionadas").appendChild(CriaTabelaCoresRelacionadas(CodigoCor1,HexCor1,CodigoCor2,HexCor2,CodigoCor3,HexCor3));
                document.getElementById("CoresRelacionadas").appendChild(CriaTabelaCoresRelacionadas(CodigoCor3,HexCor3,CodigoCor1,HexCor1,CodigoCor2,HexCor2));
                document.getElementById("CoresRelacionadas").appendChild(CriaTabelaCoresRelacionadas(CodigoCor2,HexCor2,CodigoCor3,HexCor3,CodigoCor1,HexCor1));
            } else {
    	        document.getElementById("DivCoresRelacionadas").style.display = "none";
            }
            /*alert("teste");
            var cores = http.responseXML.getElementsByTagName("Cor");
            document.getElementById("CoresRelacionadas").innerHTML = "";
            for(var i=0;i<cores.length;i++) {
                var Nome = cores[i].getElementsByTagName("Nome")[0].childNodes[0].nodeValue;
                var Codigo = cores[i].getElementsByTagName("Codigo")[0].childNodes[0].nodeValue;
                var Hex = cores[i].getElementsByTagName("Hex")[0].childNodes[0].nodeValue;
                var tbl = tplCoresRelacionadas.cloneNode(true);
                tbl.id = null;
                tbl.style.display = "block";

                tbl.getElementsByTagName("th")[0].style.backgroundColor = "#"+ hex;
                tbl.getElementsByTagName("th")[1].style.backgroundColor = "#"+ Hex;
                if (Nome.length > 0)
                    tbl.getElementsByTagName("td")[0].innerHTML = Nome;
                tbl.getElementsByTagName("td")[1].innerHTML = "Código - "+ Codigo;

                document.getElementById("CoresRelacionadas").appendChild(tbl);

            }*/
        }
    }
    http.open("GET","Escolha/Services/CoresRelacionadas.aspx?CodCor="+ CodCor,true);
    http.send(null);
}

function CriaTabelaCoresRelacionadas(CodigoCor1,Hex1,CodigoCor2,Hex2,CodigoCor3,Hex3) {
    var tbl = document.createElement("table");
    tbl.style.height = "120px";
    tbl.style.width = "38px";

    var tbody = document.createElement("tbody");

    // ---------------
    var tr1 = document.createElement("tr");

    var td1_1 = document.createElement("td");
    td1_1.style.height = "72px";
    td1_1.style.width = "38px";
    td1_1.style.backgroundColor = "#"+ Hex1;
    td1_1.innerHTML = "<div style=\"width: 38px\"></div>";
    tr1.appendChild(td1_1);
    
    var td1_2 = document.createElement("td");
    td1_2.innerHTML = CodigoCor1;
    tr1.appendChild(td1_2);
    
    tbody.appendChild(tr1);
    
    // ---------------
    var tr2 = document.createElement("tr");
    
    var td2_1 = document.createElement("td");
    td2_1.style.height = "36px";
    td2_1.style.width = "38px";
    td2_1.style.backgroundColor = "#"+ Hex2;
    tr2.appendChild(td2_1);
    
    var td2_2 = document.createElement("td");
    td2_2.innerHTML = CodigoCor2;
    tr2.appendChild(td2_2);

    tbody.appendChild(tr2);

    // ---------------
    var tr3 = document.createElement("tr");
    var td3_1 = document.createElement("td");
    td3_1.style.height = "12px";
    td3_1.style.width = "38px";
    td3_1.style.backgroundColor = "#"+ Hex3;
    tr3.appendChild(td3_1);

    var td3_2 = document.createElement("td");
    td3_2.innerHTML = CodigoCor3;
    tr3.appendChild(td3_2);

    tbody.appendChild(tr3);
    
    tbl.appendChild(tbody);
    
    return tbl;
}

function buscaPorNome() {
    var http = form.ObterHttp();
    Nome = document.getElementById("busca_nomedacor").value;
    
    http.onreadystatechange = function() {
        if (http.readyState == 4) {
            var xml = http.responseXML
            if (xml.getElementsByTagName("Cor").length == 0) {
                alert("Nenhuma cor encontrada com o nome \""+ Nome +"\".");
            } else {
                var CodSensacao = xml.getElementsByTagName("CodSensacaoCor")[0].childNodes[0].nodeValue;
                var CodFamilia = xml.getElementsByTagName("CodFamiliaCor")[0].childNodes[0].nodeValue;
                var NomeFamilia = xml.getElementsByTagName("Nome")[1].childNodes[0].nodeValue;
				var NomeSensacao = xml.getElementsByTagName("Nome")[0].childNodes[0].nodeValue;
                var CodCor = xml.getElementsByTagName("CodCor")[0].childNodes[0].nodeValue;
                ObterCores(CodSensacao,NomeSensacao,CodFamilia,NomeFamilia);
                
                var inter = setInterval(function() {
                    var e = {target: document.getElementById("TdCor_"+ CodCor) };
                    if (e.target != null) {
                        clearInterval(inter);
                        SelecionarCor(e);
                        
                    }
                },500);
                
            }
        }
    }
    http.open("GET","Escolha/Services/Cores.aspx?Nome="+ Nome,true);
    http.send(null);
}

function buscaPorCodigo() {
    var http = form.ObterHttp();
    Codigo = document.getElementById("busca_codigodacor").value;
    
    http.onreadystatechange = function() {
        if (http.readyState == 4) {
            var xml = http.responseXML
            if (xml.getElementsByTagName("Cor").length == 0) {
                alert("Nenhuma cor encontrada com o código \""+ Codigo +"\".");
            } else {
                var CodSensacao = xml.getElementsByTagName("CodSensacaoCor")[0].childNodes[0].nodeValue;
                var CodFamilia = xml.getElementsByTagName("CodFamiliaCor")[0].childNodes[0].nodeValue;
                var NomeFamilia = xml.getElementsByTagName("Nome")[1].childNodes[0].nodeValue;
				var NomeSensacao = xml.getElementsByTagName("Nome")[0].childNodes[0].nodeValue;
                var CodCor = xml.getElementsByTagName("CodCor")[0].childNodes[0].nodeValue;
                ObterCores(CodSensacao,NomeSensacao,CodFamilia,NomeFamilia);
                
                var inter = setInterval(function() {
                    var e = {target: document.getElementById("TdCor_"+ CodCor) };
                    if (e.target != null) {
                        clearInterval(inter);
                        SelecionarCor(e);
                        
                    }
                },500);
                
            }
        }
    }
    http.open("GET","Escolha/Services/Cores.aspx?Codigo="+ Codigo,true);
    http.send(null);
}

function AdicionarLista(CodCor) {
 http = nav.ObterHttp();
 http.open("GET","Escolha/Services/ListaCompra.aspx?CodCor="+ CodCor +"&acao=adicionar",true);
 http.send(null);
 alert("Cor adicionada com sucesso");
}