/* Clase para el manejo de la galeria... Necesita la libreria prototype*/
var Galeria = Class.create({
  initialize: function(liFotos , contenedorFotoGrande) {
	this.liFotos  = liFotos; 							//Contiene los li donde estan las fotos
	this.cantFotos = this.liFotos.size();				//Cantidad de Fotos
	if(this.cantFotos == 0){
		/* No hay fotos, no tiene sentido construir este objeto */
		return;
	}
	this.contenedorFotoGrande = contenedorFotoGrande;	//Contenedor (div) donde esta la foto grande
	this.index = 1;										//Foto en la que estamos actualmente, inicia en 1 pero pudiera ser cualquiera
	this.liFotos.each(
		function(e,i) {
			// Asignarle una funcion al onclick de cada li de las fotos
			e.setStyle("cursor:pointer").observe('click',function(event){objGall.buscarFoto(this,i);});
		}
	)
	//Hacer la foto que esta fuera del li clicleable, y mostrar la primera foto del li
	$('eswProdFotoPortada').setStyle("cursor:pointer").observe('click',function(event){objGall.buscarFoto(objGall.liFotos[0],0);});

	//Crear los elementos HTML para la foto
	this.FotoGrandeToda 	= new Element('div', {id: 'FotoGrandeToda'});
	this.FotoGrandeCerrar 	= new Element('div', {id: 'FotoGrandeCerrar', style: 'cursor:pointer'}).observe('click',function(event){contenedorFotoGrande.hide();});
	this.FotoCerrar 		= new Element('img', {src:"/images/ESTCerrarFotoGrande.png", alt:'Cerrar'});
	this.FondoFotoGrande 	= new Element('div', {id: 'FondoFotoGrande'});
	this.ContPagFotoGrande 	= new Element('div', {id: 'ContPagFotoGrande'});
	this.fotoGrande 		= new Element('img',{id: 'eswProdFotoGrande', src: 'http://miweb.estoesweb.com/catalogo/productos/buscarfoto'}).observe('load',function(event){this.setStyle('visibility:visible');});
	//Relacionar los elementos	
	this.FotoGrandeCerrar.insert(this.FotoCerrar);
	this.FotoGrandeToda.insert(this.FotoGrandeCerrar);
	this.FotoGrandeToda.insert(this.ContPagFotoGrande);
	if(this.cantFotos > 1){//Si hay mas de una foto, se necesita el link de anterior
		this.ContPagFotoGrande.insert(new Element('div',{id: 'eswProdAnterior', style: 'cursor:pointer;'}).update('<span>Anterior</span>').observe("click", function(event){objGall.pasarFoto(true);}));
	}
	if(this.cantFotos > 1){//Si hay mas de una foto, se necesita el link de siguiente
		this.ContPagFotoGrande.insert(new Element('div',{id: 'eswProdSiguiente', style: 'cursor:pointer;'}).update('<span>Siguiente</span>').observe("click", function(event){objGall.pasarFoto(false);}));
	}
	this.FotoGrandeToda.insert(this.fotoGrande);
	this.contenedorFotoGrande.insert(this.FotoGrandeToda);
	this.contenedorFotoGrande.insert(this.FondoFotoGrande);
	//Pasar de foto
	this.pasarFoto = function(anterior){
		//Mostrar la anterior o siguiente foto segun sea el caso
		if(anterior){
			this.buscarFoto(this.liFotos[this.index-1],this.index - 1);					
		}else{
			this.buscarFoto(this.liFotos[this.index+1],this.index + 1);					
		}
	}
	//Setear la posicion de la foto que estamos viendo
	this.setFotoOffset = function(i){
		this.index = i;
		$('eswProdAnterior').show();
		$('eswProdSiguiente').show();
		//Esconder el link de anterior o siguiente segun sea el caso
		if(this.index == 0){
			$('eswProdAnterior').hide();
		}else if(this.index == this.cantFotos - 1){
			$('eswProdSiguiente').hide();		
		}
	}
	/* Funcion para buscar las fotos, recibe el elemento li donde esta la foto y la muestra grande */
	this.buscarFoto = function(elementLi,i){
		//Esconder la foto actual
		this.fotoGrande.setStyle('visibility:hidden');
		//Seleccionar dentro del li solo los elementos tipo img				
		var foto = elementLi.getElementsBySelector("img");
		//Seleccionar la primera foto que supones es la que contiene el thumbnail
		var foto = foto[0];
		//setear la foto en la que estamos si hay mas de una foto
		if(this.cantFotos > 1){
			this.setFotoOffset(i);
		}
		//Mostrar el contenedor de las fotos
		this.contenedorFotoGrande.setStyle("display:block");
		//Redireccionar a miweb, plugin de catalogo, para que pueda mostrar la foto
		fotoSrc = foto.readAttribute("src").gsub(new RegExp("http://miweb.estoesweb.com/"), function(match){ return "http://miweb.estoesweb.com/catalogo/productos/buscarfoto/"; });
		//Quitar la extension del archivo para que mi web pueda parsear el programa
		ext = fotoSrc.substring(fotoSrc.length-3);
		//Concatenar la extension como un parametro del url
		fotoSrc = fotoSrc.substring(0,fotoSrc.length-4) + "/ext/" + ext;
		//Mostrar la imagen
		this.fotoGrande.writeAttribute("src", fotoSrc);
	}	
  }
});//Fin de la clase Galeria

/* Inicializar el objecto galeria */
window.onload = function() {
	objGall = new Galeria($$('#eswProdListFotos li'), $('ContenedorFotoGrande'));
	}
/* Objeto galeria de acceso global*/
var objGall = null;