/* based on: http://www.brunoew.com.br/blog/efeito-accordion-na-horizontal-com-jquery-css3/ */
$(function() {
    var pannels = $('#accordion > li');
	var pannelsAuto;
	var curPannelIndex = 0;
	var curPannel = $(pannels[curPannelIndex]);
	
	pannels
		.prepend('<div class=\"pannelOverlay\"></div>')
		.hover(
			function () {
				clearTimeout(pannelsAuto);
				
				animateOpen(this);
			},
			function () {
				animateClose(this);
			}
		)
		.each(function() {
			var $this = $(this);
			
			$this.data("pannelWidth", $this.width());
		});
	
	
	function waitPannel() {
		pannelsAuto = setTimeout(function() { autoAnimatePannels(); }, 4000);
	};
	
	
	function autoAnimatePannels() {
		clearTimeout(pannelsAuto);
		
		animateOpen(curPannel);
		curPannel = pannels[++curPannelIndex % pannels.length];
		
		waitPannel();
	}
	
	function animateOpen(sel) {
		var $this = $(sel);
		
		pannels.not($this).each(function () {
			animateClose(this);
		});
		
		$this.stop().animate({'width':'305px' },500).data("estado", "aberto");
		$('.pannelOverlay',$this).stop(true,true).css('display', 'block');
		$('.description, .shadow',$this).stop(true,true).fadeIn();
	}
		
	function animateClose(sel) {
		var $this = $(sel);
		
		$this.stop().animate({'width': $this.data("pannelWidth") + 'px'},500).data("estado", "fechado");
		$('.pannelOverlay',$this).stop(true,true).css('display', 'none');
		$('.description, .shadow',$this).stop(true,true).fadeOut();
	}
	
	//autoAnimatePannels(); // começar direto;
	waitPannel(); // esperar para começar;
});