/* 
** FUNÇÕES EM JQUERY PARA O SLIDER
** Autor: Hilder Santos
** http://www.hildersantos.com
*/

// Primeiro, defino uma variável para não haver conflito com nenhum outro script
var $j = jQuery.noConflict(); 

// Crio a função do slider propriamente dito
jQuery.fn.extend({
	hSlider: function(tempoEspera, a){
		/*
		** n = elemento que será responsável pela paginação
		*/
		var larg = $j(this).width();
		var qtdeLinhas = $j('ul li', this).length;		
		var Pai = $j(this);
		var altCaixa = $j('ul li', Pai).height() + 20;
		if(a == null) {
			var a = 0;
		}
		

		// Animando
		$j('ul li', Pai).eq(a).children('.spoiler').animate({'bottom' : 0}, 800, 'easeOutBounce').animate({'bottom' : 0}, tempoEspera, '', function() {
			if(qtdeLinhas > 1) {
			$j(this).animate({'bottom' : '-'+altCaixa+'px'}, 500, '', function() {
				if(a < qtdeLinhas - 1 || a == 0) {															   
				$j('ul', Pai).animate({'left' : '-'+(larg * (a + 1))+'px'}, 'slow', 'easeOutQuint', function() {
					a++;
					$j(Pai).hSlider(tempoEspera, a);
				});
				} else {
				 $j('ul', Pai).animate({'left' : '0'}, 300 * qtdeLinhas, 'easeOutQuint', function() {
					a = 0;
					$j(Pai).hSlider(tempoEspera, a);
				});
				}
			});
			}

		});
		
		
		// Botão Próximo
		$j('#DestaqueNavDir a', Pai).click(function(e) {						
				e.preventDefault();	
				$j('ul li ', Pai).eq(a).children('.spoiler').stop('clearQueue').animate({'bottom' : '-'+altCaixa+'px'}, 500, '', function() {
				if(a < qtdeLinhas - 1 || a == 0) {															   
				$j('ul', Pai).stop('clearQueue').animate({'left' : '-'+(larg * (a + 1))+'px'}, 600, 'easeOutQuint', function() {
					a++;
					$j(Pai).hSlider(tempoEspera, a);
				});
				} else {
				 $j('ul', Pai).stop('clearQueue').animate({'left' : '0'},  300 * qtdeLinhas, 'easeOutQuint', function() {
					a = 0;
					$j(Pai).hSlider(tempoEspera, a);
				});
				}
			});
			});
		
		// Botão Anterior
				$j('#DestaqueNavEsq a', Pai).click(function(e) {
				e.preventDefault();
				$j('ul li ', Pai).eq(a).children('.spoiler').stop('clearQueue').animate({'bottom' : '-'+altCaixa+'px'}, 500, '', function() {
					if(a == 0) {	
						$j('ul', Pai).stop('clearQueue').animate({'left' : '-'+(larg * (qtdeLinhas-1))+'px'},  300 * qtdeLinhas, 'easeOutQuint', function() {
							a = qtdeLinhas - 1;
							$j(Pai).hSlider(tempoEspera, a);
						});
					} else {
						$j('ul', Pai).stop('clearQueue').animate({'left' : '-'+(larg * (a - 1))+'px'}, 600, 'easeOutQuint', function() {
							a--;
							$j(Pai).hSlider(tempoEspera, a);
						});
					}
			});
			});
	
	}	
});


/* INICIANDO O JQUERY */

// Inicio o script e chamo a função nos elementos que eu quero
$j(function() {
			
		// Transparência da navegação do slide
		$j('#DestaqueNavDir a, #DestaqueNavEsq a').animate({'opacity' : 0}, 0);
		$j('#DestaquesJQuery').hover(function() {
			$j('#DestaqueNavDir a, #DestaqueNavEsq a').stop('clearQueue').animate({'opacity' : 1}, 600);		
		}, function() {
			$j('#DestaqueNavDir a, #DestaqueNavEsq a').stop('clearQueue').animate({'opacity' : 0}, 300);		  
		});
			
		// Primeiro, crio a div que vai dar a transparência de fundo e aplico a transparência
		var altCaixa = $j('#DestaquesJQuery ul li .spoiler').height() + 20;
		
		$j('#DestaquesJQuery ul li .spoiler').css({'bottom' : '-'+altCaixa+'px'}).prepend('<div class="inner">&nbsp;</div>');
		$j('#DestaquesJQuery ul li .spoiler .inner').animate({'opacity': 0.7}, 0);
		
		$j('#DestaquesJQuery').hSlider(6500);
});