// Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9
/**
 
-- Author:			Bernardo Zand
-- Create date: 	1 febrero 2009
-- Description:		Galera con Thmbnails
					Hay que pasar el id de:
						* Botones anterior y siguiente
						* Titulo de la imagen (lo obtiene del Title del Thumb)
						* Numero de imagen Ej.: 2/10
						* Imagen grande
						* Contendor de Thumbnails
						
-- Ejemplo:
			<script language="javascript">
			$$(document).ready(function(){
			  $$('#contenedorThumbs').galleriaThumbs({
				 botonPrev:"prev",
				 botonNext:"next",
				 idTexto:"tituloThumb",
				 idNumber:"numberThumb",
				 idBig:"big",
				 contenedorThumbs:"contenedorThumbs",
				 textoNumber:"/",
				 thumbEspecial:"fachadaThumb",
				 cssEspecial:"galleryPhotoSml"
			  });
			});
			</script>
			
			botonPrev:			ID del boton anterior
			botonNext:			ID del boton siguiente
			idTexto:			ID de titulo de la imagen. El texto lo obtiene del Title del Thumbnail seleccinado
			idNumber:			ID donde se muestra la cantidad de imagenes. Ej.: 2/10
			idBig:				ID de la imagen grande
			contenedorThumbs:	ID del contenedor de Thumbnails
			textoNumber:		Texto para indicar la cantidad de imagenes: Ej.: 1/10, 1 of 10, etc.
			thumbEspecial:		Class del thumbnail especial para cambiarle el class a la imagen grande.
			cssEspecial:		Class que pega el thumbnail a la imagen grande.

**/

$$.fn.galleriaThumbs = function(options) {
	
	var current = '';
	var totThumbs = 0;
	var posCurrent = 0;
	
	// set default options
	var defaults = {
		botonPrev:"prev",
		botonNext:"next",
		idTexto:"tituloThumb",
		idNumber:"numberThumb",
		idBig:"big",
		contenedorThumbs:"contenedorThumbs",
		textoNumber:"/",
		thumbEspecial:"fachadaThumb",
		cssEspecial:"galleryPhotoSml",
		imagesArray: [], //arreglo con rel de cada Thumb
		codigoEspecial:""
	};
	

	// extend the options
	var options = $$.extend(defaults, options);
	//Ejeculta cualquier funcion
	if(options.codigoEspecial!=""){eval(options.codigoEspecial);	}

	var height_idBig = $$('#'+options.idBig).height();
	
	// create a caption span
	//var _span = $$(document.createElement('span')).addClass('caption');
	
	//-------------
	
	return this.each(function(){
	
		totThumbs = $$(this).children('li').size();
		// loop through list
		$$(this).children('li').each(function(i) {
			
			// reference the original image as a variable and hide it
			var _img = $$(this).children('img');
			
			// Guarda en un arreglo todos los rel de las imagenes
			options.imagesArray[options.imagesArray.length] = _img.attr('id');
				
			// add the click functionality to the _thumb
			_img.click(function() {
				cargaImagen(_img.attr('id'));
			});
			
			// check active class and activate image if match
			if ($$(this).hasClass('active')) {
				cargaImagen(_img.attr('id'));
			}
	
		}); //$$(this).children('li').each(function(i) {
		
		// Boton Previous
		$$('#'+options.botonPrev).click(function() {
			cargaImagen($$(prevThumb($$('#'+options.contenedorThumbs+' img[id="'+current+'"]').parents('li'))).find('img').attr('id'));
		});
		
		// Boton Next
		$$('#'+options.botonNext).click(function() {
			cargaImagen($$(nextThumb($$('#'+options.contenedorThumbs+' img[id="'+current+'"]').parents('li'))).find('img').attr('id'));
		});
		
		// Returns the previous sibling, or the last one
		function prevThumb(selector) {
			return $$(selector).is(':first-child') ?
				   $$(selector).siblings(':last-child') :
				   $$(selector).prev();   
		};

		// Returns the next sibling, or the first one
		function nextThumb(selector) {
			return $$(selector).is(':last-child') ?
				   $$(selector).siblings(':first-child') :
				   $$(selector).next(); 	   
		};
		
		// Carga imagen que tenga el id = _id
		function cargaImagen(_id) {
			$$('#'+options.idBig).empty();
			$$('#'+options.idBig).addClass("loading");
			$$('#'+options.idBig).removeClass('fondo');
			
			// get the thumb
			var _thumb = $$('#'+options.contenedorThumbs+' img[id="'+_id+'"]');
			
			if (_id) {
				// alter the active classes
				_thumb.parents('li').siblings('.active').removeClass('active');
				_thumb.parents('li').addClass('active');
			
				// define a new image
				var _img   = new Image();
				
				$$(_img).load(function () {
					$$(this).hide();
					//Agrega class especial en caso de cumplir con options.thumbEspecial
					if((_thumb.attr("class") == options.thumbEspecial)) $$(this).addClass(options.cssEspecial);
					$$('#'+options.idBig).removeClass('loading');
					$$('#'+options.idBig).addClass('fondo');
					$$('#'+options.idBig).empty().append(this);
					if(parseInt($$(this).height()) > height_idBig) 
						$$('#'+options.idBig).css('height',parseInt($$(this).height()));
					else
						$$('#'+options.idBig).removeAttr('style');
					$$(this).css({'position' : 'relative', 'top' : '50%', 'left' : '50%', 'margin-left' : ((parseInt($$(this).width())/2)*-1), 'margin-top' : ((parseInt($$(this).height())/2)*-1)});
					$$(this).fadeIn();
				}).attr('src',_thumb.attr("rel").replace("/Hoteles/","/Hotels/"));
				
				//Busca la posicion de la imagen seleccionada. Ej.: 10 de 30
				for (i = 0; i < options.imagesArray.length; i++){
					if(options.imagesArray[i] == _id) {
						posCurrent = i;
					}
				}
				
				// inserta el titulo de la foto
				$$('#'+options.idTexto).text(_thumb.attr('title'));
				
				
				// inserta la posicion de la foto. Ej.: 10 de 30
				$$('#'+options.idNumber).text((posCurrent+1) +'  '+ options.textoNumber + '  ' +totThumbs);
				
				
			} else {
				// clean up the container if none are active
				//$$('#'+options.contenedorThumbs).siblings().andSelf().empty();
				// remove active classes
				$$('#'+options.contenedorThumbs+' li.active').removeClass('active');
			}
			
			// place the source in the galleria.current variable
			current = _id;
			
		}
		
		
	}); //return this.each(function(){
}; //$$$$ = $$.fn.galleria = function(options) {