// -----------------------------------------------------------------------------------
//
//  Desenvolvido por:
//  Rodrigo Fante
//	Fazedor de Site - http://www.fazedordesite.com
//	FS Galeria de Imagens - Versão 2.1.0
//
//  Navegadores testados:
//  Internet Explorer 6, Internet Explorer 7, Firefox 2
//  Opera 9, Netscape 8, Safari para Windows 3
//
//  Em caso de erros, sugestoes, peço que reportem para:
//  fazedordesite@gmail.com ou pelo site: http://www.fazedordesite.com
//
//  Mantenha os créditos pelo menos - Totalmente gratis :D
//
// -----------------------------------------------------------------------------------
// || Tudo começa na ultima linha ||
// \/                             \/
//
// VARIAVEL GLOBAL COM TODAS IMAGENS
var todasImagens = new Array;
var Atual = "";
var proxLink = "";
var antLink = "";
//==============================
// Mesma funçao utilizada em diversos frameworks facilita a construçao do codigo
// um exemplo de seu utilizo, possui outros, eh ao usar o document.getElementById(id) usar apenas $(id)
// isso permite uma grande reduçao de codigo e facilita a visualizaçao do mesmo
function $() {
  var elements = new Array();
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string') element = document.getElementById(element);
    if (arguments.length == 1) return element;
    elements.push(element);
  }
  return elements;
}

//==============================
function preCarrega(img,atual){
	nova_img = new Image();
	nova_img.onload=function(){
		total = img.length;
		proxima = atual+1;
		if(proxima<total) preCarrega(img,proxima);
	}
	nova_img.src = img[atual][1];
}
function preCarregarImgs(){
	// Aqui montaremos o array com todos endereços validos das imagens
	var todosLinks = document.getElementsByTagName('a');
	var cl = 0;
	for (var i=0; i<todosLinks.length; i++){
		var cada_link = todosLinks[i];
		var atributo_rel = String(cada_link.getAttribute('rel'));
		if (cada_link.getAttribute('href') && (atributo_rel.toLowerCase().match('aumenta'))){ 
			todasImagens.push(new Array(cl, cada_link.getAttribute('href'), cada_link.getAttribute('title')));
			cl++;
		}
	}
	// deopis de montado o array, chamamos a funçao que vai pré-carregar uma por uma
	preCarrega(todasImagens,0);
}
function centralizaObj(larg, alt){
	window.scrollTo(0,0); // coloca a rolagem no topo da pagina
	// pega medidas da pagina sem rolagem
	medidas = pegaMedidas(false); 
	larguraPag = medidas[0];
	alturaPag = medidas[1];
	
	// centraliza horizontal
	margemH = -1*(larg/2);
	limiteH = -1*(larguraPag/2);
	if(margemH<limiteH) margemH = limiteH+5;
	$("quadro").style.marginLeft=margemH+"px";
	
	// centraliza vertical
	margemY = -1*(alt/2);
	limiteY = -1*(alturaPag/2);
	if(margemY<limiteY) margemY = limiteY+5;
	$("quadro").style.marginTop=margemY+"px";	
}
function pegaMedidas(rolagem){
	// Pega altura e largura do conteudo da pagina
	var larguraPag, alturaPag;
	if (self.innerHeight) {	// Todos exceto IE entram aqui
		larguraPag = self.innerWidth;
		alturaPag = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // IE 6, IE 7 entraram aqui
		larguraPag = document.documentElement.clientWidth;
		alturaPag = document.documentElement.clientHeight;
	} else if (document.body) { // Nenhum testado entrou aqui, deixo por garantia
		larguraPag = document.body.clientWidth;
		alturaPag = document.body.clientHeight;
	}
	if(rolagem){ // se foi pedidos os valores incluindo barra de rolagem
		var rolagemH, rolagemV;
		
		if (window.innerHeight && window.scrollMaxY) {	// Nenhum testado entrou aqui, mas deixo por garantia
			rolagemH = document.body.scrollWidth;
			rolagemV = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ 
			// Opera9, Mac 3 para windows entram aqui
			rolagemH = document.body.scrollWidth;
			rolagemV = document.body.scrollHeight;
		} else { //IE6, IE7, FF, Netscape entram aqui.
			rolagemH = document.body.offsetWidth;
			rolagemV = document.body.offsetHeight;
		}	
		// Verifica se deve usar a altura do quadro do navegador ou da rolagem se existir
		if(rolagemV > alturaPag) {
			alturaPag = rolagemV;
			if(/Internet Explorer/.test(navigator.appName)) alturaPag+=30; // corrigir bug IE
		}
		// Verifica se deve usar a largura do quadro do navegador ou da rolagem se existir
		if(rolagemH > larguraPag) larguraPag = rolagemH;
	}
	valores = new Array(larguraPag,alturaPag); 
	return valores;
}
function criaObjetos(){
	// pega medidas da pagina
	medidas = pegaMedidas(true); 
	larguraPag = medidas[0];
	alturaPag = medidas[1];

	// criamos os elementos necessarios para exibir a imagem maior
	var objBody = document.getElementsByTagName("body").item(0);
	
	// cria a div transparente que cobre todo o fundo
	var objFundo = document.createElement("div");
	objFundo.setAttribute('id','fundo_img'); // define o id
	// CSS do objeto
	objFundo.style.position="absolute"; 
	objFundo.style.top="0px";
	objFundo.style.left="0px";
	objFundo.style.width=larguraPag+"px";
	objFundo.style.height=alturaPag+"px";
	objFundo.style.background="#000";
	objFundo.style.zIndex=998;
	objFundo.style.MozOpacity=.4; // transparencia FF
	objFundo.style.opacity=.4; // transparencia  FF, Opera, Safari, Netscape
	objFundo.style.filter="Alpha(Opacity=40)"; // transparencia  IE
	// Adiciona o objeto no Body do html
	objBody.appendChild(objFundo);

	// cria a div onde sera inserida a imagem
	var objQuadroext = document.createElement("div");
	objQuadroext.setAttribute('id','quadro');
	objQuadroext.style.position="absolute";
	objQuadroext.style.border="solid 2px #CCC";
	objQuadroext.style.top="50%";
	objQuadroext.style.left="50%";
	objQuadroext.style.width="50px";
	objQuadroext.style.height="50px";
	objQuadroext.style.background="#FFF";
	objQuadroext.style.padding="5px";
	objQuadroext.style.zIndex=999;
	objBody.appendChild(objQuadroext);
	
	// cria a div do cabeçalho
	var objTopo = document.createElement("div");
	objTopo.setAttribute('id','topo_quadro');
	objTopo.style.display='none';	
	objTopo.style.width="100%";
	objTopo.style.height="25px";
	objTopo.style.position='relative';
	objQuadroext.appendChild(objTopo);	
	
	// cria o link de fechar a janela
	var objFechar = document.createElement("a");
	objFechar.setAttribute('id','Fechar');
	objFechar.setAttribute('href','javascript:void(0)');
	objFechar.style.position='absolute';
	objFechar.style.right='5px';
	objFechar.onclick = function() {
		$("quadro").style.display="none";
		$("fundo_img").style.display="none";
		return false;
	}
	objTopo.appendChild(objFechar);
	
	// cria um span para o titulo
	var objTitulo = document.createElement("span");
	objTitulo.setAttribute('id','titulo_quadro');
	objTitulo.style.fontWeight='bold';
	objTitulo.style.position='absolute';
	objTitulo.style.left='5px';
	objTopo.appendChild(objTitulo);	
	
	
	// cria a imagem de fechar dentro do link fechar
	var objimgFechar = document.createElement("img");
	objimgFechar.setAttribute('id','imgFechar');
	objimgFechar.src='fechar.gif';
	objimgFechar.alt='Fechar';
	objimgFechar.style.border='0';
	objFechar.appendChild(objimgFechar);
	
	
	// cria a imagem loading
	var objImagemLoad = document.createElement("img");
	objImagemLoad.setAttribute('id','img_loading');
	objImagemLoad.src='loading.gif';
	objImagemLoad.style.position='absolute';
	objImagemLoad.style.left='50%';
	objImagemLoad.style.top='50%';
	objImagemLoad.style.margin='-17px 0 0 -17px';
	objQuadroext.appendChild(objImagemLoad);
	
	// cria a imagem vazia
	var objImagem = document.createElement("img");
	objImagem.setAttribute('id','img_maior');
	objImagem.style.display='none';
	objQuadroext.appendChild(objImagem);
	
	// cria a div do rodape
	var objRodape = document.createElement("div");
	objRodape.setAttribute('id','rodape_quadro');
	objRodape.style.display='none';	
	objRodape.style.width="100%";
	objRodape.style.height="25px";
	objRodape.style.position='relative';
	objQuadroext.appendChild(objRodape);	
	
	// cria o link de ir a imagem anterior
	var objAnterior = document.createElement("a");
	objAnterior.setAttribute('id','link_anterior');
	objAnterior.setAttribute('href','javascript:void(0)');
	objAnterior.style.position='absolute';
	objAnterior.style.left='5px';
	objAnterior.style.bottom='0';
	objAnterior.onclick = function() {
		preparaImg(todasImagens[antLink][1], todasImagens[antLink][2]);
		return false;
	}
	objRodape.appendChild(objAnterior);
	
	// cria o icone de ir a imagem anterior
	var objimgAnterior = document.createElement("img");
	objimgAnterior.setAttribute('id','imgAnterior');
	objimgAnterior.src='anterior.gif';
	objimgAnterior.style.border='0';
	objAnterior.appendChild(objimgAnterior);
	
	// cria o link de ir a imagem posterior
	var objPosterior = document.createElement("a");
	objPosterior.setAttribute('id','link_posterior');
	objPosterior.setAttribute('href','javascript:void(0)');
	objPosterior.style.position='absolute';
	objPosterior.style.right='5px';
	objPosterior.style.bottom='0';
	objPosterior.onclick = function() {
		preparaImg(todasImagens[proxLink][1], todasImagens[proxLink][2]);
		return false;
	}
	objRodape.appendChild(objPosterior);		

	// cria o icone de ir a imagem posterior
	var objimgPosterior = document.createElement("img");
	objimgPosterior.setAttribute('id','imgPosterior');
	objimgPosterior.src='posterior.gif';
	objimgPosterior.style.border='0';
	objPosterior.appendChild(objimgPosterior);
}
function preparaImg(img, titulo){	
	totalImgs = todasImagens.length;
	var Ultima = totalImgs-1;
	for(var i=0;i<totalImgs;i++){
		if(todasImagens[i][1]==img) Atual = i;
	}
	proxLink = Atual+1;
	antLink = Atual-1;
	// primeiro checo se ja existe a DIV "quadro"
	if($("quadro")==null)	criaObjetos();
	else {
		// caso os objetos ja tenham sido criados altera a propriedade display para que o quadro seja exibido
		$("quadro").style.display="";
		$("quadro").style.width="50px";
		$("quadro").style.height="50px";
		$("img_loading").style.display="";
		$("fundo_img").style.display="";
		$("img_maior").style.display="none";
		$("topo_quadro").style.display="none";
		$("rodape_quadro").style.display="none";
	}
	// quando a imagem for carregada some com o gif loading e mostra a imagem
	$("img_maior").onload=function(){
		$("img_loading").style.display="none";
		this.style.display="";
		largura_quadro=this.offsetWidth;
		altura_quadro=this.offsetHeight+50; // um pouco mais alto para o espaço do botao fechar
		
		centralizaObj(largura_quadro,altura_quadro);
				
		$("quadro").style.width=largura_quadro+"px";
		$("quadro").style.height=altura_quadro+"px";
		$("topo_quadro").style.display="";
		$("rodape_quadro").style.display="";
		//$("titulo_quadro").innerHTML=titulo; // titulo do quadro
		// Controla se a imagem atual é a primeira ou a ultima imagem
		// Esconde os icones de anterior ou posterior se for o caso
		// atribui o link para proximas imagens
		if(Atual==0) {
			$("link_anterior").style.display="none";
			$("link_posterior").style.display="none";
		}else if(Atual==Ultima){
			$("link_posterior").style.display="none";
			$("link_anterior").style.display="none";
		}
		else {
			$("link_anterior").style.display="none";
			$("link_posterior").style.display="none";
		}
		
	}
	//tratamento de erros
	$("img_maior").onerror=function(){ 
		alert("Erro: Impossivel carregar a imagem");
		$("quadro").style.display="none";
		$("fundo_img").style.display="none";
		$("img_loading").style.display="none";
		$("img_maior").src='loading.gif'; // sem essa linha ocorre um erro que somem os botoes anterior/posterior
	}	
	// altera o  src da imagem, antes ele ficava em cima do onload, joguei para baixo
	// por garantia, para nao correr o risco de carregar a imagem antes de ler toda funçao 
	// o que causaria erro
	$("img_maior").src=img;
}
function ajustaQuadro(){
	centralizaObj($("quadro").offsetWidth,$("quadro").offsetHeight);
	medidas = pegaMedidas(true); 
	larguraPag = medidas[0];
	alturaPag = medidas[1];
	$("fundo_img").style.height = alturaPag+"px";
	$("fundo_img").style.width = larguraPag+"px";
}
function checaLinks(){
	preCarregarImgs();
	var todosLinks = document.getElementsByTagName("a"); // pega todos os links 
	for (var i=0; i<todosLinks.length; i++){ 
			var cada_link = todosLinks[i]; // varre os links um por um
			var atributo_rel = String(cada_link.getAttribute('rel')); // pega o valor do atributo rel no link
			if (cada_link.getAttribute('href') && (atributo_rel.toLowerCase().match('aumenta'))){ 
				// Entra se o link tiver um valor de href e o valor de rel for igual a aumenta
				cada_link.onclick = function () { preparaImg(this.getAttribute('href'), this.getAttribute('title')); return false; } 
				// quando o link for clicado chama a funçao aumentaImg
				// O return false serve para anular a açao do href
			}
	}	
}
window.onload=checaLinks; 
window.onresize=ajustaQuadro;
// Quando a pagina for carregada chama a funçao que vai varrer os links em busca das
// do atributo rel com o valor "aumenta", estes links quando clicados
// executam a funcao aumentaImg para exibir a imagem em tamanho maior.