$(function()
{
	var u = 0;
	var itemAtual = 1;
	var itens = $('#boxBenefits li');
	var boxes = $('#boxBenefitsExplanation div');
	
	itens.css({backgroundPosition: "0 -240px"})
		.click(function()
		{
			boxes.removeAttr('style');
			boxes.css('display','none');
			altInfoBox($(this), 'benefitSelected');
			
			$(this).css({backgroundColor: "#cee3f8"});
			
			itens.stopTime();
			return false;
		})
		.mouseover(function()
		{
			boxes.removeAttr('style');
			boxes.css('display','none');
			altInfoBox($(this), 'benefitSelected');
			
			$(this).css({backgroundColor: "#cee3f8"});
			
			itens.stopTime();
		})
		.everyTime(5000, function(i)
		{
			if( u == 0 )
			{itens.eq(itemAtual).css({backgroundColor: "#cee3f8"});
				goAnimation(itens.eq(itemAtual-1), "(0 -240px)", 700);
				goAnimation(itens.eq(itemAtual), "(0 0)", 1000);
				
				boxes.removeAttr('style');
				boxes.css('display','none');
				altInfoBox(itens.eq(itemAtual), 'benefitSelected');
				itens.eq(itemAtual).css({backgroundColor: "#cee3f8"});
				itemAtual++;
				u++;
				
				
			}
			else if ( u == 4 )
			{
				if(itemAtual == itens.length) itemAtual = 0;
				u = 0;
			}
			else
				u++;
		});
	
	$('#boxBenefits li.benefitSelected').css({backgroundPosition: "0 0"});
	
	function goAnimation(obj, bgPos, dur)
	{
		obj.stop().animate({backgroundPosition:bgPos},{duration:dur});
	}
	
	function altInfoBox(obj, action)
	{
		itens.removeClass(action);
		
		$('#' + obj.find('a').attr('rel')).stop().fadeIn('fast');
		
		obj.addClass(action);
	
		itens.css({
			backgroundColor: "transparent",
			backgroundPosition: "0 -240px"
		});
	}
});