// JavaScript Document
// Diego Buscá


$(document).ready(function(){
		
	
	var ELAPSED_TIME=5000;	// Tiempo de duracion del display de banners
	var BANNER_WIDTH=630; //Ancho fijo de los banners
	var CANT_BANNERS=$('#banner-slider').find('.banner-cont').length; //Recupera la cantidad de banners en display	
	var moverTimeOut=0; //inicializacion de la variable para el setTimeout
	
	var index=0; //Indica el banner actual en el display
	var left_amount=0; //lleva el control del ancho de todo el contenedor de banners
	var i=0; //Indica el indice del banner que se va a mostrar a continuacion
	var play=true;	//Flag que indica si la secuencia esta en play o no
	var on_transition=false; //Flag que impide que se se haga click en un boton durante la transicion
	
	
	//Oculta los snipets de cada botón
	//$('.banner-msg').eq(0).show();
	
	//Precarga las imagenes antes de mostrar el banner-rotator
	var preloadImgs=function(){
		
		for(var j=0;j<CANT_BANNERS;j++){
			
			var nImage=new Image();
			nImage.src=$('#banner-wrapper > img').eq(j).attr('src');
		
			}	
			
			return true;
		
		}
		
		
	//Funcion que agrega los anchos a cada div
	
	var addWidthDiv= function(){
		
		for(var j=0;j<CANT_BANNERS;j++){			
			$('.banner-cont').eq(j).css('left',BANNER_WIDTH * j + 'px');	
			}
		}
		
    //Funcion inserta la información de los botones en la botonera "chim pum fuera"
	var addSelectorButtons=function(){
		for(var j=0;j<CANT_BANNERS;j++){
			
			var htmlContent=$('.selector-aux').eq(j).html();

			$('.play-btn').before(htmlContent)
			$('#banner-selector .selector').eq(j).text(String(j+1));
			}
			
			$('.selector-aux').hide();
			$('.selector-aux').remove();
		}
	
	
	//Funcion para el click del boton play/pause
	$('.play-pause').click(function(){			
		
		if(play){	
			clearInterval(moverTimeOut);
			$(this).addClass('pause');
			
			//$(this).text('Play');	
			play=false;
		}
		else{
			$(this).removeClass('pause');
			//$(this).text('Pause');	
			play=true;
			moverBanner(index);
		}						
	});
	
	
	var detenerBanner=function(){
		clearInterval(moverTimeOut);
	}
	
	$('.banner a').click(function(){
		detenerBanner();
	});
	
	
	//Funcion que realizar el movimiento de los banners
	var moverBanner=function(i){
	
		
		detenerBanner();
		on_transition=true;		
		left_amount+=((index - i)* BANNER_WIDTH);	
		
		//Agrega las clases css para el banner q actualmente se está ejecutando
		$('.selector').eq(index).removeClass('current');
		$('.selector').eq(i).addClass('current');
		
		
		
		
		if(i==CANT_BANNERS){
			index=0;
			i=0;
			left_amount=0;
			$('.selector').eq(index).removeClass('current');
			$('.selector').eq(i).addClass('current');
		}
        
		//Funcion que realiza la animación de los banners
		$('#banner-slider').animate(
			{left:left_amount},600,'swing',function(){
				index=i;
				i++;
				on_transition=false;
				
				//Si el control esta en estado de play se ejecuta la transcion al siguiente banner
				if(play)
					moverTimeOut=setTimeout(function(){moverBanner(i)},ELAPSED_TIME);
				
				})	;	
			
		}
		
		
	
	var addClick=function(){		
		//Funcion qure resuelve el Click de los botones
		$('.selector').click(function(){
			
			if(!on_transition){		
				var link_index=$('.selector').index(this);
				moverBanner(link_index);
			}
												   
		});
	}
	
	
	
	var addMouseOver=function(){
		//Mouse over, mouse out link promo	
		$('#banner-selector .selector').mouseover(function(){
				
			
			$(this).addClass('selected');									  
			var link_index=$('.selector').index(this);
			
			
			$('.banner-msg').eq(link_index).show();
			
		}).mouseout(function(){
			 $(this).removeClass('selected');	
			var link_index=$('.selector').index(this);
			$('.banner-msg').eq(link_index).hide();
			
			});
	}
		
	
	//Main Function / Inicia la secuencia
	//Si se cargaron todas las imagenes se muestra el banner rotator
	
	
							
		addWidthDiv(); // agrega el ancho de los divs que contienen las imagenes "dinamicamente"
		addSelectorButtons() //inserta la información de los botones en la botonera "chim pum fuera"
		addClick();  //Agrega la funcion de click al boton selector de banners
		addMouseOver(); //Agrega la funcion de mouseOver/Out al boton selector de banners
		
		if(preloadImgs()){
		
		$('#banner-rotator').show();
		$('.selector').eq(i).addClass('current'); //agrega la clase current al primer banner (i=0);
		
		}
		
		$(window).load(function(){
								
			
			moverTimeOut=setTimeout(function(){moverBanner(i+1)},ELAPSED_TIME);		


		});

		
	
											 
});