// Carousel.js
// Clase para gestionar el carousel de www.wezstudio.com 
// Jose Carlos Gil - carlos@wezstudio.com 
// 09 Jun 2009 Wezstudio


function Carousel(_autoPlay, _secondsBetweenAnims) {
	//Variables configurables
	this.autoPlay=_autoPlay || true; //si autoPlay=true las animaciones se reproducen cada "secondsBetweenAnims" segundos de forma rotativa.
	this.secondsBetweenAnims=_secondsBetweenAnims || 4; //segundos entre animaciones (en modo autoPlay=true)


	this.doingAnimation=false; //guarda para no reproducir animaciones mientras otra todavia funciona
	this.currentPanel;
	this.periodicalExec=null;

	this.setup=function() {
		//ocultar todos los paneles
		$$('.panel').each(Element.hide);

		//ponemos como panel actual el último
		this.currentPanel=$$('.panel').size();		
		//y mostramos el primero		
		this.showPanel(1);
	}


	this.showNextPanel=function() {
		var nextPanel=this.currentPanel+1;
		var totalPanels=$$('.panel').size();
		if (nextPanel>totalPanels) {
			nextPanel=1;
		}			
		this.showPanel(nextPanel);
	}
	
	this.clickOnPanel=function(number) {
		this.autoPlay=false;
		this.showPanel(number);
	}
	
	this.showPanel=function(number) {
		//cancelamos cualquier evento periodico previsto
		if (this.periodicalExec!=null) {
			this.periodicalExec.stop();
		}
	
		//si es mostrar el mismo panel que ya se está mostrando no hacemos nada (caso de usuario haciendo click muchas veces sobre el mismo botón)
		if (number==this.currentPanel) {
			return;
		}
	
		//Esta variable doingAnimation indica si hay una animación en curso. Quiere decir que la animación anterior todavia no ha acabado (por ejemplo, usuario haciendo click insistentemente).
		//Si hay una en curso cancelamos
		if (this.doingAnimation) {
			return;
		}
	
		//empezamos el proceso de animación, de modo que activamos la guarda de animación
		this.doingAnimation=true;
	
		//cambiar el estado de los botones	
		//quitar el 'selected' de anterior link
		$$('.panel_button')[this.currentPanel-1].removeClassName('selected');
		//poner el selected al link actual
		$$('.panel_button')[number-1].addClassName('selected');
	
		this.animate(number);
	}
	
	this.animate=function(number) {
		//animación: fade del frame antiguo y appear del nuevo		
		var oldPanel=$$('.panel')[this.currentPanel-1];
		var newPanel=$$('.panel')[number-1];
	
		var link=newPanel.getElementsByClassName('panel_link')[0];
		var text=newPanel.getElementsByClassName('panel_text')[0];
		var image=newPanel.getElementsByClassName('panel_img')[0];
	
	
		//oldPanel.hide();
		oldPanel.fade({ duration: 0.2 , queue: 'end'});
	
		//enviamos fuera de la vista el texto antes de mostrar el panel
		text.setStyle({'left':'650px'});
	
		//Diferentes estilos si es IE7/IE8 que en otros navegadores
		if ( (Prototype.Browser.IE7) || (Prototype.Browser.IE8) ) {
			link.setStyle({
				'clear':'right',
				'float':'left',
				'position':'relative',
				'width':'250px',
				'left':'600px',
				'top':'145px'
			});
		} else {
			link.setStyle({
				'clear':'both',
				'float':'right',
				'left':'600px',
				'position':'relative',
				'top':'-70px'
			});
		}
	
		newPanel.appear({ duration: 0.1 , queue: 'end' });
		image.appear({ duration: 0.2 , queue: 'end' });
		//Cuando acabe la animación llamará a endShowPanel(), que terminará este proceso
		
		var carousel=this;
		new Effect.Move(text, { x: -650, y: 0, mode: 'relative' , duration: 0.5 ,queue: 'end' , afterFinish: function() {animateMoveLinkFn(carousel, number, link); } });
		
		//function(p){ scrollTo(scrollOffsets.left, p.round()); }
	}

	this.animateMoveLink=function(number, link) {
		var dx=-695;
		if ( (Prototype.Browser.IE7) || (Prototype.Browser.IE8) ) {
			dx=-825;
		}			
		var carousel=this;
		new Effect.Move(link, { x: ''+dx, y: 0, mode: 'relative' , duration: 0.5 ,queue: 'end' , afterFinish: function() { endShowPanelFn(carousel,number); } });
	}

	this.endShowPanel=function(number) {
		//Establecer el panel mostrado como el actual
		this.currentPanel=number;
		//Mostrar siguiente panel automáticamente a los X segundos
		
		var carousel=this;
		if (this.autoPlay) {
			this.periodicalExec=new PeriodicalExecuter(function(){showNextPanelFn(carousel)}, this.secondsBetweenAnims); 
		}
		this.doingAnimation=false;
	}

	function showNextPanelFn(carousel) {
		carousel.showNextPanel();
	}

	animateMoveLinkFn=function(carousel, number, link) {
		carousel.animateMoveLink(number,link);
	}

	endShowPanelFn=function(carousel, number) {
		carousel.endShowPanel(number);
	}

}