var banner = 1; //banner atual que est sendo mostrado
	var retInterval = null;
	var animando = 0; //indice do banner que est sendo animado no momento. 0 - no est animando nada.
	var intervalRodando = false;

	$(document).ready(function(){
		iniciaInterval();
		
		for (var i = 1; i <= 4; i++){
			$('#btnBanner' + i.toString()).click(function(){
				var clicado = this.id.substr(9, 1);

				clearInterval(retInterval);
				intervalRodando = false;
				mudaBanner(banner, clicado);
			});
		}
	});

	function iniciaInterval(){
		intervalRodando = true;

		retInterval = setInterval(function(){
			var ant = banner;
			banner++;
			
			if (banner > 4)
				banner = 1;

			mudaBanner(ant, banner);
		}, 5000);
	}

	function mudaBanner(de, para){
		if (animando > 0)
			return ;

		animando = de;

		$('#imgBanner' + de.toString()).fadeOut('slow', function(){
			banner = para;
			animando = para;

			$('#imgBanner' + para.toString()).fadeIn('slow', function(){
				//terminou de mudar os banners
				animando = 0;

				if (!intervalRodando) //significa que foi clicado na mao, entao parou o interval. reinicia
					iniciaInterval();
			});
		});
	}