var bannerAtual = 0;//var para banner atual
var corInicial;//cor de fundo do primeiro banner
var bannersCorreto = new Array();//var que vai receber apenas as divs dos banners, como citado acima
var j = 0;//var que vai contar os banners recebidos na var bannersCorreto

function portfolio(){
	
	var banners = document.getElementById('portfolioGeral').getElementsByTagName('div');//var com todas as divs dos banners, mas aqui ainda pega a div dos titulos, entao temos que separar
	
	for (var i = 0; i < banners.length; i++){//for que vai adicionar na var bannersCorreto apenas as divs de banner
		
		if (banners[i].className == 'portfolioDuplica'){
			
			bannersCorreto[j] = banners[i];
			j++;
			
		}
		
	}
	
	$('#portfolioGeral').css('width', bannersCorreto.length*597);//coloca a largura de todos os banners juntos na div pai
	
	corInicial = $(bannersCorreto[0]).attr('corbanner');//coloca a cor de fundo do primeiro banner	
	$('.item4').css('background-color', corInicial);//coloca a cor de fundo do primeiro banner	
	
	$('.portfolioConteudo').mouseover(function (){//se passar o mouse em cima dos banners aparecem as setas
		
		$('.portfolioSeta').css('visibility', 'visible');
		$('.portfolioSeta').stop().animate({opacity:1}, 400); 
		
	});
	
	$('.portfolioConteudo').mouseleave(function (){//se tirar o mouse de cima dos banners desaparecem as setas
		
		$('.portfolioSeta').stop().animate({opacity:0}, 400, 
			function(){																
				$('.portfolioSeta').css('visibility', 'hidden');
			}); 		
	});
	
	verificaSetas();//verificar quais setas aparecem
	
	$('.portfolioSetaEsq').attr('onclick', "portfolioTroca('esq')");//adicionar clique da seta esquerda
	$('.portfolioSetaDir').attr('onclick', "portfolioTroca('dir')");//adicionar clique da seta direita
	
}

function portfolioTroca(lado){
	
	if (lado == 'esq'){
		
		bannerAtual--;
		$('#portfolioGeral').stop().animate({left:-((bannerAtual)*597)}, 1000);
		
	}
	if (lado == 'dir'){
		
		bannerAtual++;
		$('#portfolioGeral').stop().animate({left:-((bannerAtual)*597)}, 1000);
		
	}
	
	$('.item4').stop().animate({backgroundColor:$('#portfolioDuplica'+bannerAtual).attr('corbanner')}, 1000);
	
	verificaSetas();//verificar quais setas aparecem

}

function verificaSetas(){
	
	if (bannerAtual == 0){ $('.portfolioSetaEsq').css('display', 'none'); }//se estiver no primeiro banner, esconde a seta esq
	else { $('.portfolioSetaEsq').css('display', 'block'); }//senao mostra
	
	if (bannerAtual >= (bannersCorreto.length-1)){ $('.portfolioSetaDir').css('display', 'none'); }
	else { $('.portfolioSetaDir').css('display', 'block'); }	
	
}