/**
 * Carrusel de fotos
 * 
 * Forma de uso:
 *
 * var c = new FotoCarrusel({
 *    id : 'carrusel',							//identificador del contenedor del carrusel
 *    contenedor : { ancho:'50%', alto:'80px' },//tamaño del contenedor
 *    imagen : { ancho:180, alto:80 },			//tamaño de cada imagen
 *    margen : 10,								//tamaño del margen entre una imagen y la siguiente
 *    desplazamiento : 2,						//desplazamiento en pixels de cada iteracion, positivo o negativo
 *    delay : 100,								//retraso de cada iteracion en milisegundos
 *    vertical : false							//carrusel vertical u horizontal
 * });
 *
 * c.start();									//comienza el movimiento del carrusel
 * c.stop();									//detiene el movimiento del carrusel
 * c.anterior();								//detiene el movimiento del carrusel y retrocede a la imagen anterior
 * c.siguiente();								//detiene el movimiento del carrusel y avanza a la imagen siguiente
 */
function FotoCarrusel(properties) {

	this.id = document.getElementById(properties.id);

	this.desplazamiento = properties.desplazamiento;
	this.delay = properties.delay;

	this.vertical = properties.vertical;

	//tamaño del contenedor del carrusel
	this.contenedor = properties.contenedor;

	//margen entre una imagen y la siguiente
	this.margen = properties.margen;

	//tamaño de las imagenes
	this.imagen = { ancho : properties.imagen.ancho + this.margen, alto : properties.imagen.alto + this.margen };

	/**
	 * Devuelve una funcion a partir de un metodo de un objeto concreto
	 * Es muy util para llamar a la funcion "setInterval" o "setTimeout" con metodos de un objeto
	 */
	this.associateObjWithEvent = function(obj, methodName) {
		return (function(e){
			e = e||window.event;
			return obj[methodName](e, this);
		});
	}

	/**
	 * Inicializa los estilos del carrusel y asocia eventos
	 */
	this.init = function()
	{
		this.id.style.position = 'relative';
		this.id.style.width = this.contenedor.ancho;
		this.id.style.height = this.contenedor.alto;
		this.id.style.padding = '0';
		this.id.style.overflow = 'hidden';

		this.contenedor = { ancho : this.id.clientWidth, alto : this.id.clientHeight };

		this.id.onmouseover = this.associateObjWithEvent(this, "stop");
		this.id.onmouseout = this.associateObjWithEvent(this, "start");

		var lis = this.id.getElementsByTagName('LI');

		for (i=0; i < lis.length; i++)
		{
			lis[i].style.listStyleType = 'none';

			lis[i].width = this.imagen.ancho;
			lis[i].height = this.imagen.alto;

			lis[i].getElementsByTagName('IMG')[0].width = this.imagen.ancho - this.margen;
			lis[i].getElementsByTagName('IMG')[0].height = this.imagen.alto - this.margen;

			lis[i].style.position = 'absolute';
			lis[i].style.top = '0px';
			lis[i].style.left = '0px';

			if (this.vertical)
				if (this.desplazamiento > 0)
					lis[i].style.top = (this.contenedor.alto - this.imagen.alto * (i+1)) + 'px';
				else
					lis[i].style.top = (this.imagen.alto * i) + 'px';
			else
				if (this.desplazamiento > 0)
					lis[i].style.left = (this.contenedor.ancho - this.imagen.ancho * (i+1)) + 'px';
				else
					lis[i].style.left = (this.imagen.ancho * i) + 'px';
		}
	}

	/**
	 * Avanza las imagenes del carrusel en horizontal
	 */
	this.mueveHorizontal = function()
	{
		var lis = this.id.getElementsByTagName('LI');
		for (i=0; i < lis.length; i++)
		{
			lis[i].style.left = new Number(lis[i].style.left.replace("px","")) + this.desplazamiento + 'px';

			if (this.desplazamiento < 0 && lis[i].style.left.replace("px","") < -this.imagen.ancho)
				lis[i].style.left =  new Number(lis[i].style.left.replace("px","")) + lis.length * this.imagen.ancho + 'px';
			else
			if (this.desplazamiento > 0 && lis[i].style.left.replace("px","") > this.contenedor.ancho)
				lis[i].style.left =  new Number(lis[i].style.left.replace("px","")) - lis.length * this.imagen.ancho + 'px';
		}
	}

	/**
	 * Avanza las imagenes del carrusel en vertical
	 */
	this.mueveVertical = function()
	{
		var lis = this.id.getElementsByTagName('LI');
		for (i=0; i < lis.length; i++)
		{
			lis[i].style.top = new Number(lis[i].style.top.replace("px","")) + this.desplazamiento + 'px';

			if (this.desplazamiento < 0 && lis[i].style.top.replace("px","") < -this.imagen.alto)
				lis[i].style.top = new Number(lis[i].style.top.replace("px","")) + lis.length * this.imagen.alto + 'px';
			else
			if (this.desplazamiento > 0 && lis[i].style.top.replace("px","") > this.contenedor.alto)
				lis[i].style.top = new Number(lis[i].style.top.replace("px","")) - lis.length * this.imagen.alto + 'px';
		}
	}

	/**
	 * Comienza el movimiento indefinido del carrusel
	 */
	this.start = function()
	{
		if (this.vertical)
			this.tid = setInterval(this.associateObjWithEvent(this, "mueveVertical"), this.delay);
		else
			this.tid = setInterval(this.associateObjWithEvent(this, "mueveHorizontal"), this.delay);
	}

	/**
	 * Detiene el avance de las imagenes
	 */
	this.stop = function()
	{
		clearInterval(this.tid);
	}

	/**
	 * Detiene el carrusel y retrocede a la imagen anterior
	 */
	this.anterior = function()
	{
		this.stop();
		this.id.onmouseover = null;
		this.id.onmouseout = null;

		if (this.desplazamiento < 0)
			this.desplazamiento = -this.desplazamiento;

		if (this.vertical) {
			for (i=0; i<=Math.abs(this.imagen.alto/this.desplazamiento); i++)
				setTimeout(this.associateObjWithEvent(this, "mueveVertical"), 10*i);
		}
		else {
			for (i=0; i<=Math.abs(this.imagen.ancho/this.desplazamiento); i++)
				setTimeout(this.associateObjWithEvent(this, "mueveHorizontal"), 10*i);
		}
	}

	/**
	 * Detiene el carrusel y avanza a la siguiente imagen
	 */
	this.siguiente = function()
	{
		this.stop();
		this.id.onmouseover = null;
		this.id.onmouseout = null;
		
		if (this.desplazamiento > 0)
			this.desplazamiento = -this.desplazamiento;

		if (this.vertical) {
			for (i=0; i<=Math.abs(this.imagen.alto/this.desplazamiento); i++)
				setTimeout(this.associateObjWithEvent(this, "mueveVertical"), 10*i);
		}
		else {
			for (i=0; i<=Math.abs(this.imagen.ancho/this.desplazamiento); i++)
				setTimeout(this.associateObjWithEvent(this, "mueveHorizontal"), 10*i);
		}
	}

	this.init();

};