// Imagens
var myPix = new Array(4)
myPix[0] = "PAIXAI01";
myPix[1] = "PAIXAI02";
myPix[2] = "PAIXAI03";
myPix[3] = "PAIXAI04";

// Tarjas
var myText = new Array(4)
myText[0] = "Tarja U2";
myText[1] = "Tarja Skank";
myText[2] = "Tarja Red Hot Chili Peppers";
myText[3] = "Tarja Barão Vermelho";

// Variáveis
var format = ".jpg"; // formato das imagens
var timer = "4000"; // tempo, em milésimos de segundos
var i = 1; // não mexer.
var intervalo; // criada variável global da animação

function start() {
	intervalo = window.setInterval("change()",timer); // Inicia a animação
	document.getElementById(0).className = "imgatual";
}

// Função quando clica na imagem pequena exibe ela grande.
function abrir() {
	var main = document.getElementById("exibicao");
	var iten = main.getElementsByTagName("img");
	if (iten) {
		for (var i=0;i<iten.length;i++) {
			if (iten[i].className  == "imgmenu") {
				iten[i].onclick = function() { // quando clicar na imagem executar os comandos
					limpa(); // função limpa
					this.className = "imgclick"; // coloca borda do click
					document.getElementById("image").src = 'imagens/index/PAIXAO2010/' + myPix[this.id] + format; // exibe a imagem grande
					document.getElementById("tarja").innerHTML = myText[this.id]; // coloca a tarja
				}
			}
		}
	}
}

// Função que limpa as bordas que estão com class=imgclick
function limpa() {
	var main = document.getElementById("exibicao");
	var iten = main.getElementsByTagName("img");
	if (iten) {
		for (var i=0;i<iten.length;i++) {
			if (iten[i].className  == "imgclick") { // busca quais imagens estão com class=imgclick
				iten[i].className = "imgmenu"; // as quais forem muda para imgmenu
			}
		}
	}
}

function borda() {
	var img = arguments[0]; // recebe o por parametro a ID da imagem
	var main = document.getElementById("exibicao");
	var iten = main.getElementsByTagName("img");
	if (iten) {
		for (var i=0;i<iten.length;i++) { // aqui modifica a borda da imagem que está com a class=igmatual ou class="imgclick" para imgmenu
			if ((iten[i].className  == "imgatual") || (iten[i].className == "imgclick")) {
				iten[i].className = "imgmenu";
			}
		}
		document.getElementById(img).className = "imgatual"; // aqui coloca a borda na imagem atual
	}
}

// Função que exibe a imagem grande!
function change() {
	var tam = myPix.length;
	if (i < tam) {
		document.getElementById("image").src = 'images/' + myPix[i % tam] + format; // exibe a imagem grande
		borda(i); // modifica a borda nas imagens pequenas
		document.getElementById('tarja').innerHTML=myText[i]; // coloca a tarja na imagem
		if (i == tam) i = -1;
		i++;
	}else { i = 0; }
}

window.onload = function() {
			abrir();
			start();
		}