// JavaScript Document
$(document).ready(function(){
	
	// VARIAVEIS GLOBAIS
	banners = $(".bannerItem").length; // numero de banners
	mainWidth = 875; // largura do banner principal
	tumbHeigh = 120; // altura dos tumbs
	mainAtual = 1; // estado atual dos banners principais
	navAtual = 1; // estado atual dos navegadores de banners
	navegadores = 0;
	i = 0;
	
	//clases iniciais
	$(".bannersNavContainer").mouseenter(function(){
		$(this).animate({width:230});
	});
	
	$(".bannerDestaque").mouseleave(function(){
		$(".bannersNavContainer").animate({width:40});
	});
	

	// determina o tamanho dos carroucels
	$(".mainBannerContainers ul").css("width", mainWidth * banners)
	$(".navigatorsBanners").css("height", tumbHeigh * banners)
	
	$(".bannerDestaque").append('<ul class="btNavigators"></ul>');
	$(".bannerDestaque").find(".bannerItem").each(function(){
		$(".btNavigators").append('<li id="' + navegadores + '" class="main' + navegadores + '"></li>');	
		navegadores++;
	});
	
	$(".bannersNavContainer").append('<div class="topTop"></div>');
	$(".bannersNavContainer").append('<div class="topBottom"></div>');
	
	
	// adiciona efeito fade ao carroulcel
	$(".navigatorsBanners").find("li").each(function(){
		$(this).attr("id", i);
		$(this).addClass("tumb" + i);
		i++;
   });
	
	
	// executa a animacao automaticamente
	setInterval(function(){
		if(mainAtual < 2){
			navAtual = 0;	
		} else if(mainAtual > banners - 3){
			navAtual = banners - 3;	
		}
		mainBPosition = mainWidth * mainAtual * -1;
		navBPosition = tumbHeigh * navAtual * -1;
		$(".navigatorsBanners").animate({marginTop: navBPosition});
		$(".mainBannerContainers ul").animate({marginLeft: mainBPosition});
		
		$(".btNavigators li").removeClass("navFocus");
		$(".main" + mainAtual).addClass("navFocus");
		
		$(".navigatorsBanners li").css("opacity","0.5");
		$(".tumb" + mainAtual).css("opacity","1");
		
		mainAtual ++;
		navAtual ++;
		
		if(mainAtual < 3){
			$(".topTop").css("display","none");
		} else {
			$(".topTop").css("display","block");
		};
		
		if(mainAtual > banners - 3){
			$(".topBottom").css("display","none");
		} else {
			$(".topBottom").css("display","block");
		};
		
		if(mainAtual == banners){
			mainAtual = 0;
			navAtual = 0;
		}
		
		
	
	}, 6000);
	
	
	// executa a animacao ao clicar
	$(".btNavigators li").click(function(){
		mainPosition = $(this).attr('id');
		navPosition = $(this).attr('id');
		if(navPosition >= banners - 2){
			navPosition = banners - 3;
			$(".navigatorsBanners").animate({marginTop: tumbHeigh * navPosition * -1});
		} else {
			$(".navigatorsBanners").animate({marginTop: tumbHeigh * navPosition * -1});
		};
		$(".mainBannerContainers ul").animate({marginLeft: mainWidth * mainPosition * -1});
		
		$(".btNavigators li").removeClass("navFocus");
		$(".main" + mainPosition).addClass("navFocus");
		
		$(".navigatorsBanners li").css("opacity","0.5");
		$(".tumb" + mainPosition).css("opacity","1");
		
		mainAtual = mainPosition;
		navAtual = navPosition;
		
		if(mainAtual < 3){
			$(".topTop").css("display","none");
		} else {
			$(".topTop").css("display","block");
		};
		
		if(mainAtual > banners - 3){
			$(".topBottom").css("display","none");
		} else {
			$(".topBottom").css("display","block");
		};
		
	 });
	
	$(".navigatorsBanners li").click(function(){
		mainPosition = $(this).attr('id');
		navPosition = $(this).attr('id');
		if(navPosition >= banners - 2){
			navPosition = banners - 3;
			$(".navigatorsBanners").animate({marginTop: tumbHeigh * navPosition * -1});
		} else {
			$(".navigatorsBanners").animate({marginTop: tumbHeigh * navPosition * -1});
		};
		$(".mainBannerContainers ul").animate({marginLeft: mainWidth * mainPosition * -1});
		
		$(".btNavigators li").removeClass("navFocus");
		$(".main" + mainPosition).addClass("navFocus");
		
		$(".navigatorsBanners li").css("opacity","0.5");
		$(".tumb" + mainPosition).css("opacity","1");
		
		mainAtual = mainPosition;
		navAtual = navPosition;
		
		if(mainAtual < 3){
			$(".topTop").css("display","none");
		} else {
			$(".topTop").css("display","block");
		};
		
		if(mainAtual > banners - 3){
			$(".topBottom").css("display","none");
		} else {
			$(".topBottom").css("display","block");
		};
			
	 });
	
	
	$(".topTop").click(function(){

			if(navAtual < 2){
				$(this).css("display","none");
			}
			
			mainAtual = mainAtual - 1;	
			navAtual = navAtual - 1;
			
			
			$(".mainBannerContainers ul").animate({marginLeft: mainWidth * mainAtual * -1})						
			$(".navigatorsBanners").animate({marginTop: tumbHeigh * navAtual * -1});
			
			$(".navigatorsBanners li").css("opacity","0.5");
			$(".tumb" + mainAtual).css("opacity","1");
			
			$(".btNavigators li").removeClass("navFocus");
			$(".main" + mainAtual).addClass("navFocus");
			
			if(mainAtual > banners - 3){
				$(".topBottom").css("display","none");
			} else {
				$(".topBottom").css("display","block");
			};

	});
	
	$(".topBottom").click(function(){
		
			
		$(".mainBannerContainers ul").animate({marginLeft: mainWidth * mainAtual * -1})						
		$(".navigatorsBanners").animate({marginTop: tumbHeigh *  navAtual * -1});
		
		$(".navigatorsBanners li").css("opacity","0.5");
		$(".tumb" + mainAtual).css("opacity","1");
		
		$(".btNavigators li").removeClass("navFocus");
		$(".main" + mainAtual).addClass("navFocus");
		
		mainAtual = mainAtual + 1;	
		navAtual = navAtual + 1;
		
		if(mainAtual > banners - 3){
			$(this).css("display","none");
		}
		
		if(mainAtual < 3){
			$(".topTop").css("display","none");
		} else {
			$(".topTop").css("display","block");
		};
	});
	

	$(".main0").addClass("navFocus");
	$(".navigatorsBanners li").css("opacity","0.5");
	$(".tumb0").css("opacity","1");
	$(".topTop").css("display","none");
});