/**
 * @author Iván Rodríguez
 * @date 2007-06
 *
 * NOTA: moodificar setup para que inicialice a modo de
 * carrusel en caso de que se inicialice y sino que se
 * muestre con una lista simple de imágenes.
 */
var BikoCarrusel = new Class({
	startPosition  : 0,    // Posición inicial
	endPosition    : 0,    // Posición final
	increment      : 0,  // Incremento (anchura de la imagen)
	nextLink       : null, // Nombre del ID siguiente
	prevLink       : null, // Nombre del ID anterior
	debug          : false, // Activa o desactiva el debug de consola
	imagesDiv      : null, // Nombre del ID contenedor
	effectDuration : 500,  // Duración del efecto (milisegundos)
	nImages        : 0,    // Número de imágenes en el carrusel
	length         : 0,    
	transition     : Fx.Transitions.linear,
	totalLength    : 0,
	
	/**
	 * Método que inicializa la clase
	 * 
	 * @param string  next    ID del elemento de enlace siguiente
	 * @param string  prev    ID del elemento de enlace anterior
	 * @param string  images  ID de la capa contenedora del carrusel
	 * @param integer nImages Número de imágenes que contiene el carrusel
	 */
	initialize : function(next, prev, images, nImages, increment) {
		this.nextLink  = next;
		this.prevLink  = prev;
		this.imagesDiv = images;
		this.nImages   = nImages;
		this.increment = increment;
		//Debemos controlar que sea múltiplo de 4
		this.length    = ((this.nImages / 4) * this.increment) * -1;
		this.totalLength = this.length;
		
		//alert(this.length);
		
		//this.length    = this.setLength(this.nImages, this.increment);
		
		//alert(this.length)
		
		if(this.debug) {
			if(!$(this.imagesDiv)) {
				console.log('La capa ' + images + ' no es válida');
			}
		}
		
		$(this.nextLink).addEvent('click', this.next.bindWithEvent(this));
		$(this.prevLink).addEvent('click', this.previous.bindWithEvent(this));
		
		/**
		 * Control del carrusel mediante la rueda del ratón
		 */ 
		//document.addEvent('mousewheel', this.mouseWhell.bindWithEvent(this));
		
		/**
		 * Controlamos la aparición de los enlaces según
		 * corresponda con la posición del contendor.
		 */
		
		if(this.startPosition == 0 && this.increment > 260) {
			$(this.prevLink).setStyle('visibility', 'hidden');
			$(this.nextLink).setStyle('visibility', 'visible');
		} else if(this.startPosition == 0 && this.increment < 260) {
			$(this.prevLink).setStyle('visibility', 'hidden');
			$(this.nextLink).setStyle('visibility', 'hidden');
		} else {
			$(this.prevLink).setStyle('visibility', 'hidden');
			$(this.nextLink).setStyle('visibility', 'visible');
		}
			
	},
	
	/**
	 * Método que mueve el contenedor carrusel
	 * hacía la derecha o izquierda dependiendo
	 * de la posición de la rueda del ratón.
	 *
	 * @param event e
	 */
	mouseWhell : function(e) {
		event = new Event(e);

		if(event.wheel > 0) {
			this.next(event);
		} else if (event.wheel < 0) {
			this.previous(event)
		}
		
		e.stop();
	},
	
	/**
	 * Método que mueve el contenedor carrusel
	 * hacía la derecha.
	 *
	 * @param event e
	 */
	previous : function(e) {
		e = new Event(e);
		
		/**
		 * Efecto de estilo que nos modificara el margen izquierdo
		 * con una duración de 500 milisegundos.
		 */
		var marginChange = new Fx.Style(this.imagesDiv, 'margin-left', {transition:this.transition, duration:this.effectDuration});
			
		if(this.debug)		
			console.log('BEFORE: PosicionInicial: ' + this.startPosition + ', PosicionFinal: ' + this.endPosition);
		
		/**
		 * Cálculo de las posiciones inicial y final
		 */
		this.startPosition = this.endPosition;
		this.endPosition   = (this.endPosition + this.increment);
		
		this.length -= this.increment;
		
		/**
		 * Inicio de animación de estilo
		 */
		marginChange.start(this.startPosition, this.endPosition);		

		if(this.debug)	
			console.log('AFTER: PosicionInicial: ' + this.startPosition + ', PosicionFinal: ' + this.endPosition + ', Length: ' + this.length);
		
		
		if(this.startPosition == (this.increment * -1)) {
			$(this.prevLink).setStyle('visibility', 'hidden');
			$(this.nextLink).setStyle('visibility', 'visible');
		} else {
			$(this.prevLink).setStyle('visibility', 'visible');
			$(this.nextLink).setStyle('visibility', 'visible');
		}
		
			
		e.stop();
	},
	
	/**
	 * Método que mueve el contenedor carrusel
	 * hacía la izquierda.
	 *
	 * @param event e
	 */
	next : function(e) {
		e = new Event(e);
		
		/**
		 * Efecto de estilo que nos modificara el margen izquierdo
		 * con una duración de 500 milisegundos.
		 */
		var marginChange = new Fx.Style(this.imagesDiv, 'margin-left', {transition:this.transition, duration:this.effectDuration});
		
		if(this.debug)	
			console.log('BEFORE: PosicionInicial: ' + this.startPosition + ', PosicionFinal: ' + this.endPosition);
		
		/**
		 * Cálculo de las posiciones inicial y final
		 */
		this.startPosition = this.endPosition;
		this.endPosition   = (this.endPosition - this.increment);
		
		this.length += this.increment;
		
		/**
		 * Inicio de animación de estilo
		 */
		marginChange.start(this.startPosition, this.endPosition);
		
		if(this.debug)
			console.log('AFTER: PosicionInicial: ' + this.startPosition + ', PosicionFinal: ' + this.endPosition + ', Length: ' + this.length);
				
		/**
		 * Controlamos la aparición de los enlaces según
		 * corresponda con la posición del contendor.
		 */		 		
		if(this.length > (this.endPosition) && this.length == this.endPosition) {
			$(this.nextLink).setStyle('visibility', 'visible');
			$(this.prevLink).setStyle('visibility', 'visible');
		} else if((this.endPosition) < this.lengt) {
			$(this.nextLink).setStyle('visibility', 'hidden');
			$(this.prevLink).setStyle('visibility', 'visible');
		} else if(this.length == (this.increment * -1)) {			
			$(this.nextLink).setStyle('visibility', 'hidden');
			$(this.prevLink).setStyle('visibility', 'visible')
		} else {
			$(this.nextLink).setStyle('visibility', 'visible');
			$(this.prevLink).setStyle('visibility', 'visible');
		}
						
		e.stop();
	}
});