//Coias a fazer
// mais tarde gerar automaticamente as cetas
$.fn.extend({

  sliderCandy: function() {
  
		return this.each(function() {
			
			var id = $(this).attr('id');
			var containerWidth  = $(this).parent().width();
			var containerHeight = $(this).parent().height();
			var containterHalfHeight = containerHeight/2;
			var liWidth = 0;
			var margin = 20;

			$(".setaAfrenteNoClick").hide();
			$(".setaAtrasNoClick").hide();
			
			$(window).load(function() {
				
				//Saber a soma das larguras das li, se for superior a largura do wrapper mostra as cetas
				//Senão oculta-as
				var pos = 0;
				$("#" + id + " ul > li").each(function(){
					liWidth += $(this).width();
					//vertical alignment
					padding = containterHalfHeight - ($(this).height() /2);
					$(this).css("padding-top", padding + "px");
					//Posicionamos absolutamente os elementos sendo que começa do 0 e o seguinte é igual a
					//largura do anterior + 20
					$(this).css("position", "absolute");
					$(this).css("left", pos);
					pos += $(this).width() + margin;
					
				});

				//Oculta as cetas
				if(liWidth < containerWidth){
					$(".setaAtras").hide();
					$(".setaAfrente").hide();
				}else{
					//Senão adapta o wrapper que passa a ter por largura a largura do container - a soma das
					//larguras das cetas considerando as margins e paddings
					arrawWidths = $(".setaAtras").width() + $(".setaAtras").width();
					arrawWidths += 6;
					$("#" + id).width(containerWidth - arrawWidths);
					
					//Coloca o último para a primeira posição caso a primeira intensão é retroceder
					cloneLastToFirst(id, margin);
					$("#" + id + " ul > li:last").remove();
					
					
					//A premir a ceta para avançar
					$(".setaAfrente").hover(function(){
						goForward(id, margin);
					}, function(){});

					
					$(".setaAtras").hover(function(){
						goBackward(id, margin);
					}, function(){});
					
					//Timer para andar sozinho
					/*$.doTimeout(5000, function(){
						goForward(id, margin);
						return true;
					});*/
				}
				
				$("#" + id + " ul").find('img').hover(
					function(){
					
						if($(this).attr("alt") != ""){
							tmp = $(this).attr("src");
							$(this).attr("src", $(this).attr("alt"));
							$(this).attr("alt", tmp);
						}
					}, 
					function(){
						if($(this).attr("alt") != ""){
							tmp = $(this).attr("src");
							$(this).attr("src", $(this).attr("alt"));
							$(this).attr("alt", tmp);
						}
					}
				);
				
			});
			
			function goForward(id, margin){
				//Largura do primeiro visível = a distancia a movimentar
				var movPos = $("#" + id + " ul > li:first").next().width() + margin;
				
				$(".setaAfrente").hide();
				$(".setaAtras").hide();
				$(".setaAfrenteNoClick").show();
				$(".setaAtrasNoClick").show();
				
				$("#" + id + " ul > li").each(function(){
					//Posição actual em inteiro
					actPos = $(this).css("left");
					actPos = actPos.replace("px", "");
					actPos = parseInt(actPos);
					//Nova posição é igual a posição actual - a largura do primeiro visível
					actPos = actPos - movPos;
					
					$(this).animate({left:actPos+"px"}, 1000);
					
				});
				
				$.doTimeout(1100, function(){
					$(".setaAfrenteNoClick").hide();
					$(".setaAtrasNoClick").hide();
					$(".setaAfrente").show();
					$(".setaAtras").show();
				});
				
				//Copia o primeiro para o fim
				cloneFirstToLast(id, margin, actPos);
				//remove o primeiro
				$("#" + id + " ul > li:first").remove();
			}
			
			function goBackward(id, margin){
				//Largura do primeiro abosluto (invisível) = a distancia a movimentar
				var movPos = $("#" + id + " ul > li:first").width() + margin;
				
				$(".setaAfrente").hide();
				$(".setaAtras").hide();
				$(".setaAfrenteNoClick").show();
				$(".setaAtrasNoClick").show();
				
				$("#" + id + " ul > li").each(function(){
					//Posição actual em inteiro
					actPos = $(this).css("left");
					actPos = actPos.replace("px", "");
					actPos = parseInt(actPos);
					//Nova posição é igual a posição actual + a largura do primeiro absoluto
					actPos = actPos + movPos;
					
					$(this).animate({left:actPos+"px"}, 1000);
					
				});
				
				$.doTimeout(1100, function(){
					$(".setaAfrenteNoClick").hide();
					$(".setaAtrasNoClick").hide();
					$(".setaAfrente").show();
					$(".setaAtras").show();
				});
				//Copia o último para o início
				cloneLastToFirst(id, margin);
				//remove o último
				$("#" + id + " ul > li:last").remove();
			}
			
			
			function cloneLastToFirst(id, margin){
				var newPos = $("#" + id + " ul > li:last").width() + margin;
				var obj = $("#" + id + " ul > li:last").clone(true);
				
				// a sua posição é a origem - largura dele
				$(obj).css("left", "-" + newPos + "px");
				$("#" + id + " ul").prepend(obj);
			}
			
			function cloneFirstToLast(id, margin, lastOne){
				// A posição da imagem a clonar resulta da soma da posição do último + a sua largura
				var lastWidth = $("#" + id + " ul > li:last").width() + margin;
				lastOne += lastWidth;
				
				var obj = $("#" + id + " ul > li:first").clone(true);
				$(obj).css("left", lastOne + "px");
				$("#" + id + " ul").append(obj);
			}
			
		});
    
	}

});