// JavaScript Document
function carregaArray()
{
	qtd = document.getElementById("qtd_foto").value
	var array = new Array(qtd);
	var aux = "foto";
	foto = document.getElementById("tfotos").value;
	fot = foto.split("|");		
	for (i=0;i < qtd;i++)
	{										
		array[i] = fot[i];												
	}
	loadImagens(array);
}
function loadImagens(arrayImages)
{
	qtdeImages = arrayImages.length;
	aryImages = arrayImages;
	for (i=0; i < arrayImages.length; i++)
	{
		var preload = new Image();
		preload.src = arrayImages[i];
	}
	
}

function alterarImagem(indexImagem,classPrincipal,classSecundaria) 
{
	qtd = document.getElementById("qtd_foto").value;	
	document.getElementById("imagem").src = aryImages[indexImagem];
	document.getElementById("n" + indexImagem).className = classPrincipal;
	var index = parseInt(indexImagem);
	for(i=0;i<qtd;i++)
	{
		if (i != index)
		{
			document.getElementById("n" + i).className = classSecundaria;
		}		
		
	}
	
	
}

fadeGradativaObjects = new Object();
fadeGradativaTimers = new Object();

function fadeGradativa(id, destOp, rate, delta){
    object = document.getElementById(id);

    /*if (object != "[object]"){
        setTimeout("fadeGradativa('"+id+"',"+destOp+","+rate+","+delta+")",0);
        return;
    } */

    clearTimeout(fadeGradativaTimers[object.sourceIndex]);

    bname=navigator.appName;

    if(bname.indexOf("Microsoft")!=-1)
    {
        opacidade = object.filters.alpha.opacity;
        
        diff = destOp-opacidade;
        direction = 1;
        if (opacidade > destOp){
            direction = -1;
        }
        
        delta=Math.min(direction*diff,delta);
        object.filters.alpha.opacity+=direction*delta;
        
        opacidade = object.filters.alpha.opacity;
    }
    else if(bname.indexOf("Netscape")!=-1)
    {
        opacidade = object.style.MozOpacity*100;

        diff = destOp-opacidade;
        direction = 1;
        if (opacidade > destOp){
            direction = -1;
        }

        delta=Math.min(direction*diff,delta);
        object.style.MozOpacity = (opacidade+(direction*delta))/100;

        opacidade = object.style.MozOpacity*100;
    }
    else
        return;
        
    if (opacidade != destOp){
        fadeGradativaObjects[object.sourceIndex]=object;
        fadeGradativaTimers[object.sourceIndex]=setTimeout("fadeGradativa('"+id+"', "+destOp+", "+rate+", "+delta+")",rate);
    }
}

function altera(id, time,foto,classPrincipal,classSecundaria)
{
	var element = document.getElementById("controle");
	if(element)
	{
 		element.value = foto;
		clearInterval(intervalo);
		fotoAuto();
	} 	
	fadeOut(id, time,foto);
	setTimeout("alterarImagem('"+foto+"','"+ classPrincipal +"','"+ classSecundaria+ "')",1000);
	setTimeout("fadeIn('"+id+"','"+time +"')",1000)

}

function fadeOut(id, time,foto) {
	target = document.getElementById(id);
	alpha = 100;
	timer = (time*1000)/50;
	var i = setInterval(
			function() {
				if (alpha <= 0)
					clearInterval(i);
				setAlpha(target, alpha);				
				alpha -= 2;
			}, timer);
			
}

function fadeIn(id, time) {
	target = document.getElementById(id);
	alpha = 0;
	timer = (time*1000)/50;
	var i = setInterval(
			function() {
				if (alpha >= 100)
					clearInterval(i);
				setAlpha(target, alpha);
				alpha += 2;
			}, timer);
}

function setAlpha(target, alpha) {
	target.style.filter = "alpha(opacity="+ alpha +")";
	target.style.opacity = alpha/100;
}
function fotoAutoFoto()
{
	id = "imagem";
	time = 0.1;
	classPrincipal = "numero_vermelho";
	classSecundaria = "numero_cinza";
	global_index = parseInt(document.getElementById("controle").value);
	global_index = global_index + 1;
	if (global_index > 4)
	{
		global_index = 0;
		document.getElementById("controle").value = "0";
	}
	altera(id, time,global_index,classPrincipal,classSecundaria)
	
}

intervalo = new Object()
function fotoAuto()
{
	intervalo = setInterval("fotoAutoFoto()",5000);	
}
var altMax = 0
function showCores(codProduto,codFoto,idFotoAtual)
{
	clearInterval(intervalo);
	$("#caixaCores").remove()
	$("#fundoOpaco").remove()
	$("#img_carregando").remove()
	str = "<div id='caixaCores'>"	
	str += "<div id='corPrincipal'></div>"
	str += "<h4 id='tituloCor'></h4>"
	str += "<div id='corMininiaturas'></div>"
	str += "<div id='div_fecharCor'><img src='imagens/closelabel.gif' id='btn_fechar' title='Fechar' alt='Fechar'></div>"
	str +="</div>"
	
	$(str).appendTo("body")	
	
	$("#btn_fechar").click(function(){
		$("#caixaCores").remove()
		$("#img_carregando").remove()
		$("#fundoOpaco").remove()
		foto_atual = 0;
		id_foto_atual = "#img_0"
	})
	
	idDet = idFotoAtual.replace("c","d")
	
	var wurl = "carregaCores.asp?cod_produto="+ codProduto + "&cod_foto="+codFoto
	
	carregaCores(wurl)
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = window.innerWidth + window.scrollMaxX;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	
//	console.log(self.innerWidth);
//	console.log(document.documentElement.clientWidth);

	if (self.innerHeight) {	// all except Explorer
		if(document.documentElement.clientWidth){
			windowWidth = document.documentElement.clientWidth; 
		} else {
			windowWidth = self.innerWidth;
		}
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

//	console.log("xScroll " + xScroll)
//	console.log("windowWidth " + windowWidth)

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = xScroll;		
	} else {
		pageWidth = windowWidth;
	}
	
	if (document.all)
	{
		var wtop = parseInt(document.documentElement.scrollTop) + 20
		
	}
	else
	{
		var wtop = parseInt(window.scrollY) + 20	
	}
	var wleft = ( (parseInt(screen.width) - 1000) / 2 ) + 200
	
	$("<div id='fundoOpaco'></div>"	).appendTo("body")		
	$("<img src='imagens/loading.gif' id='img_carregando'>").css('top',wtop+100).css('left',wleft+100).appendTo("body")	
	
	
	
	objF = document.getElementById('fundoOpaco')
	objF.style.width = pageWidth + "px"
	objF.style.height = (pageHeight+100) + "px"
	$("#fundoOpaco").click(function(){
		$("#div_fecharCor").remove()
		$("#corMininiaturas").remove()
		$("#tituloCor").remove()
		$("#corPrincipal").remove()
		$("#caixaCores").remove()
		$("#fundoOpaco").remove()
		$("#img_carregando").remove()
		foto_atual = 0;
		id_foto_atual = "#img_0"
		clearInterval(intervalo);
	})
	
	
	
	
	
	var caminho = $("#"+idFotoAtual).attr("src")
	caminho = caminho.replace("mini","maxi")
	var strImg = "<img src='" + caminho + "' style='z-index:10;' id='img_0'>"
	$(strImg).appendTo("#corPrincipal")
	$("#tituloCor").text($("#"+idFotoAtual).attr("title"))
	
	
	altMax = parseInt(document.getElementById("img_0").height)
	
	
	intervalo = setTimeout(function(){	
		objImg = $("#corMininiaturas img")
		var index = 10
		idImg = ""			
		
		for(i=0;i<objImg.length;i++)
		{
			index = parseInt(index) - 1
			vetId = objImg[i].id.split("_")
			objImg[i].id = vetId[0] + "_" + vetId[1]
			
			if( parseInt(vetId[2]) > altMax)
			{
				altMax = vetId[2]
			}
			caminho = $("#mini_"+i).attr("src")
			
			$("#mini_"+i).click(function(){
				mudar_foto(this.id)						 
											 
			})
			if(i>0)
			{
				caminho = caminho.replace("mini","maxi")	
				idImg = "img_"+ i
				
				strImg = "<img src='" + caminho + "' id='" + idImg + "' style='z-index:" + index + "'>"
				
				$(strImg).appendTo("#corPrincipal")	
				$("#"+idImg).hide()
				
			}	
		
			
		}
		
		$("#caixaCores").css("height",100)
		$("#caixaCores").css("width",200)
		$("#caixaCores").css("top",wtop)
		$("#caixaCores").css("left",wleft)
			
		if(altMax == 0)
		{
			altMax = 350	
		}
		showCaixaCores()
		$("#"+idDet).click()
		
	},2000)
		

	
	
}
function carregaCores(url) {
	
	
	ajax = ajaxInit();
	if(ajax) {
		
		
		ajax.open("GET",url, true);
		ajax.onreadystatechange = function() {
			if(ajax.readyState == 4) {
				if(ajax.status == 200) {
					document.getElementById("corMininiaturas").innerHTML= ajax.responseText
					
				}
				else
				{	
					alert(ajax.statusText)
				}
			}
		}
		ajax.send(null);		
	}
}
function showCaixaCores()
{
	
	
	var walt = (parseInt(altMax)+20) + "px"
	$("#img_carregando").remove()
	
	$("#corPrincipal").animate({       
        height: walt
     }, 200 );
	walt = (parseInt(altMax) + 220) + "px"
	
	$("#caixaCores").animate({ 
        width: "500px",
        height: walt
      }, 1000 );
	
}
var foto_atual = 0;
var id_foto_atual = "#img_0"
function mudar_foto(foto)
{
	
	foto = foto.replace("mini_","")
	
	id_proxima_foto = "#img_"+foto;
	
	if(id_proxima_foto != id_foto_atual)
	{
		$("#tituloCor").text($("#mini_"+foto).attr("title"))
		
		$("#mini_"+foto).addClass("mini_bordaAzul")
		$("#mini_"+foto).removeClass("mini_bordaCinza")
		
		$("#mini_"+foto_atual).addClass("mini_bordaCinza")
		$("#mini_"+foto_atual).removeClass("mini_bordaAzul")
		
		$(id_foto_atual).animate( {'opacity':'hide'},'slow');
	
		$(id_proxima_foto).animate( {'opacity':'show'},'slow',function(){
			foto_atual = foto
			id_foto_atual = id_proxima_foto;
			
			
		})
	}
			
}