/**
 * Definicion de un elemento que muestra un listado de imagenes en formato slide
 * @param el Div que contiene el listado de imagenes
 * @param oConfig Configuracion que asociar al slide (Opcional)
 *		- slideLength Tamano del slide (Si no se establece por defecto es 5)
 *		- pathImgLeft Path de la imagen para el slide izquierdo
 *		- pathImgRight Path de la imagen para el slide derecho
 *		- imgWidth: Tamano de la imagen que va actuar como desplazador, por defecto sera de 15px
 * @param oEvents Array de objetos con los eventos que asociar a las imagenes
 *		- e: Evento que deseamos asociar
 *		- fn: Funcion que asociar al evento
 */
GALILEO.widget.GSlideImage = function(el, oConfig, oEvents) {
	if (el) {
	
		// Obtencion de elementos necesarios para crear el slide
		if (typeof el == "string") {
			el = YAHOO.util.Dom.get(el);
		}
	
		if (el) {
			var clon = el.cloneNode(true);
			var imagenes = el.getElementsByTagName('div');
			
			this._ul = el.getElementsByTagName('ul')[0];
			
			var elementosLista = null;
			if (this._ul) {
				elementosLista = el.getElementsByTagName('li');
			}
			
			// Si existen imagenes continuamos
			if (elementosLista && elementosLista.length > 0) {
			
				var imagenes = new Array();
				for (var i = 0; i < elementosLista.length; i++) {
					imagenes.push(elementosLista[i].getElementsByTagName('div')[0]);
				}
				
				// Establecemos los valores por defecto
				var paginacion = 5;
				var imgWidth = 15;
				this._counter = 1;
				
				var imgAnterior = new Image();
				imgAnterior.src = GALILEO.widget.SlideImage.config.pathImgLeft;
				var imgSiguiente = new Image();
				imgSiguiente.src = GALILEO.widget.SlideImage.config.pathImgRight;
				if (oConfig) {
					if (oConfig.slideLength) {
						paginacion = oConfig.slideLength;
					}
					if (oConfig.pathImgLeft) {
						imgAnterior.src = oConfig.pathImgLeft;
					}
					if (oConfig.pathImgRight) {
						imgSiguiente.src = oConfig.pathImgRight;
					}
					if (oConfig.imgWidth) {
						imgWidth = oConfig.imgWidth;
					}
				}
	
				// Calculo de pasos en relacion con la paginacion establecida
				this._totalPasos = parseInt(imagenes.length/paginacion);
				if ((this._totalPasos * paginacion) < imagenes.length) {
					this._totalPasos++;
				}
				
				// Creamos la capa los elementos slide
				var padre = GALILEO.util.Dom.createElement('div',[{name:'className', value:'slide'}]);
				el.parentNode.replaceChild(padre, el);
				var padreSlideLeft = GALILEO.util.Dom.createElement('div',[{name:'className', value:'slide-container-left'}]);
				padre.appendChild(padreSlideLeft);
				var slideLeft  = GALILEO.util.Dom.createElement('a', [{name:'href', value:'javascript:void(null);'}, {name:'className', value:'slide-a-left'}]);
				padreSlideLeft.appendChild(slideLeft);
				imgAnterior.className = 'slide-left';
				slideLeft.appendChild(imgAnterior);
				padre.appendChild(el);
				var padreSlideRight = GALILEO.util.Dom.createElement('div',[{name:'className', value:'slide-container-right'}]);
				padre.appendChild(padreSlideRight);
				var slideRight = GALILEO.util.Dom.createElement('a', [{name:'href', value:'javascript:void(null);'}, {name:'className', value:'slide-a-right'}]);
				padreSlideRight.appendChild(slideRight);
				imgSiguiente.className = 'slide-right';
				slideRight.appendChild(imgSiguiente);
				
				var maxWidth = 0;
				for (var i = 0; i < imagenes.length; i++) {
					if (maxWidth < imagenes[i].offsetWidth) {
						maxWidth = imagenes[i].offsetWidth;
					}
				}
				
				// Establecemos el tamano para los elementos li
				for (var i = 0; i < elementosLista.length; i++) {
					YAHOO.util.Dom.setStyle(elementosLista[i], 'width', (maxWidth + 5 + 'px'));
				}
	
				var tamanoSlide = (elementosLista[0].offsetWidth * paginacion);			
				this._width = (elementosLista[0].offsetWidth * paginacion);
	
				imgWidth += 5;
				YAHOO.util.Dom.setStyle(padreSlideLeft, 'width', imgWidth + 'px');
				YAHOO.util.Dom.setStyle(padreSlideRight, 'width', imgWidth + 'px');
				
				var tamanoTotal = tamanoSlide + (2*imgWidth) + 5;
				var tamanoUl = (elementosLista[0].offsetWidth * elementosLista.length);	
							
				YAHOO.util.Dom.addClass(el, 'slide-bd');
				YAHOO.util.Dom.addClass(this._ul, 'slide-ul');
				YAHOO.util.Dom.setStyle(this._ul, 'width', tamanoUl + 'px');
				YAHOO.util.Dom.setStyle(el, 'width', tamanoSlide + 'px');
				YAHOO.util.Dom.setStyle(padre, 'width', tamanoTotal + 'px');
				
				// Reubicamos los contenedores padre
				YAHOO.util.Dom.setStyle(padreSlideLeft, 'left', '1px');
				YAHOO.util.Dom.setStyle(el, 'left', (imgWidth + 5) + 'px');
				YAHOO.util.Dom.setStyle(padreSlideRight, 'left', (imgWidth + el.offsetWidth + 10) + 'px');
				
				YAHOO.util.Dom.setStyle(padre, 'height', (el.offsetHeight + 5) + 'px');
	
				YAHOO.util.Dom.setStyle(padreSlideLeft, 'height', el.offsetHeight + 'px');
				YAHOO.util.Dom.setStyle(padreSlideRight, 'height', el.offsetHeight + 'px');
				
				YAHOO.util.Dom.setStyle(padreSlideLeft, 'top', '5px');
				YAHOO.util.Dom.setStyle(padreSlideRight, 'top', '5px');
				
	
				// Reubicamos los slide
				var middlePadre = parseInt(el.offsetHeight/2);
				var middleSlideLeftHeight = parseInt(slideLeft.offsetHeight/2);
				var topLeft = middlePadre - middleSlideLeftHeight;
				var middleSlideRightHeight = parseInt(slideRight.offsetHeight/2);
				var topRight = middlePadre - middleSlideRightHeight;
				
				YAHOO.util.Dom.setStyle(slideLeft, 'top', topLeft + 'px');
				YAHOO.util.Dom.setStyle(slideRight, 'top', topRight + 'px');
				
				
				// Ocultamos los slide
				this._slideLeft = slideLeft;
				this._slideRight = slideRight;
				YAHOO.util.Dom.setStyle(this._slideLeft, 'display', 'none');
				
				// Anadimos los eventos de escucha para los elementos de paginacion
				YAHOO.util.Event.addListener(imgAnterior, 'click', this.move, this);
				YAHOO.util.Event.addListener(imgSiguiente, 'click', this.move, this);
	
				// Si existe evento de click, se lo asociamos a cada imagen
				if ((oEvents) && (oEvents.length > 0)) {
					for (var i = 0; i < imagenes.length; i++) {
						for(var j = 0; j < oEvents.length; j++) {
							YAHOO.util.Event.addListener(imagenes[i], oEvents[j].e, oEvents[j].fn);
						}
					}
				}
				
				// Ocultamos las flechas si no hay elementos
				if ((this._totalPasos == 0) || (this._totalPasos == 1)) {
					YAHOO.util.Dom.setStyle(this._slideLeft, 'display', 'none');
					YAHOO.util.Dom.setStyle(this._slideRight, 'display', 'none');
				}
			}
		}
	}
};

/**
 * Variables privadas que utilizara el objeto
 **/
GALILEO.widget.GSlideImage._totalPasos = null;
GALILEO.widget.GSlideImage._width = null;
GALILEO.widget.GSlideImage._slideLeft = null;
GALILEO.widget.GSlideImage._slideRight = null;
GALILEO.widget.GSlideImage._counter = 1;
GALILEO.widget.GSlideImage._ul = null;

/**
 * Metodo encargado de la realizacion del movimiento en el slide
 */
GALILEO.widget.GSlideImage.prototype.move = function(e, obj) {
	YAHOO.util.Event.stopEvent(e);
	var elemento = YAHOO.util.Event.getTarget(e);

	if (GALILEO.util.String.trim(elemento.className) == 'slide-left') {
		if (obj._counter === 1) {
			YAHOO.util.Dom.setStyle(obj._slideLeft, 'display', 'none');
			return;
		}
		YAHOO.util.Dom.setStyle(obj._slideRight, 'display', 'block');
		var attributes = {points: {by : [obj._width, 0]}};
		obj._counter--;
		if (obj._counter === 1) {
			YAHOO.util.Dom.setStyle(obj._slideLeft, 'display', 'none');
		}
	}
	else if (GALILEO.util.String.trim(elemento.className) == 'slide-right') {
		if (obj._counter === obj._totalPasos) {
			YAHOO.util.Dom.setStyle(obj.slideRight, 'display', 'none');
			return;
		}
		YAHOO.util.Dom.setStyle(obj._slideLeft, 'display', 'block');
		var attributes = {points: {by : [-obj._width, 0]}};
		obj._counter++;
		if (obj._counter === obj._totalPasos) {
			YAHOO.util.Dom.setStyle(obj._slideRight, 'display', 'none');
		}
	}
	var anim = new YAHOO.util.Motion(obj._ul, attributes, 0.5, YAHOO.util.Easing.easeOut);
	anim.animate();
};