var slideAtual = 0;
var slideSeguinte = 0;
var slideTotal = 0;
var intervalo = "";

$(function(){
		slideTotal = $(".banner ul:last li").size();
		$(".banner ul:last li").css("opacity", 0)
		$(".banner ul:last li").each(function(i){
			$(this).attr("id", i+1)
			$(".banner .controls").append('<li><a href="#" rel="'+i+'" title="' + $(this).attr("title") + '">'+ $(this).attr("title") +'</a></li>')
			i++
		})

		//inicia com imagem
		slideChange(0)

		//inicia contagem
		playSlide();

		//play pause
		$(".banner ul:last li a").mouseover(function(){
			stopSlide()
		}).mouseout(function(){
			playSlide()
		})
		
		$(".banner .controls a").live("click", function(){
			slideSeguinte = $(this).attr("rel");
			stopSlide()
			slideChange();
			playSlide()
			return false;
		})
})

function stopSlide(){
		clearInterval(intervalo)
	}

function playSlide(){
		intervalo = window.setInterval(slideShow, 8000);
	}

function slideShow(){
		slideSeguinte = slideSeguinte + 1;
		slideChange();
}

function slideChange(rel) {
		if(slideSeguinte >= slideTotal) slideSeguinte = 0;
		if(slideSeguinte < 0) slideSeguinte = slideTotal;

		caminhoAtual = $(".banner ul:last li")[slideAtual]
		$(caminhoAtual).animate({'opacity': 0}, 100);
		//
		caminho = $(".banner ul:last li")[slideSeguinte];
		$(caminho).animate({'opacity': 1}, 200);
		
		$(".banner .controls a").removeClass("ativo")
		$(".banner .controls a[rel=" + slideSeguinte + "]").addClass("ativo")
		
		slideAtual = slideSeguinte
	}