/**
 * Requisitos del sistema de paginación:
 *
 * Estructura HTML:
 *
 * <div class="slideshow">  # Se puede cambiar slideshow por otra cosa, se pasa como parámetro a configSlideShow el selector
 *   <span class="prev">
 *     <img class="on" style="display:none;">
 *     <img class="foc" style="display:none;">
 *     <img class="off" style="display:none;">
 *   </span>
 *   <span class="next">
 *     <img class="on" style="display:none;">
 *     <img class="foc" style="display:none;">
 *     <img class="off" style="display:none;">
 *   </span>
 */


/**
 * Configura un enlace (anterior o siguiente) en un slideshow.
 * @param slideLink: El objeto jQuery del enlace
 * @param onClass: Clase para la imagen ON
 * @param overClass: Clase para la imagen Over
 */
function configSlideLink(slideLink)
{
	slideLink.css('cursor', 'pointer');
	slideLink.find('.on').show();
	slideLink.mouseover(function(){
		$(this).find(':not(.foc)').hide();
		$(this).find('.foc').show();
	});
	slideLink.mouseout(function(){
		$(this).find(':not(.on)').hide();
		$(this).find('.on').show();
	});
}

/**
 * Configura un slideshow.
 * @param selector: Selector que filtra los divs de las diferentes páginas del slideshow
 */
function configSlideShow(selector)
{
	$(selector+':not(:first)').hide();
	var pages = $(selector);
	var lastPage = pages.length-1;
	pages.each(function(index){
		var prevLink = $(this).find('.prev');
		var nextLink = $(this).find('.next');
		var page = $(this);
		// Colocamos el cursor tipo "enlace" s�o cuando realmente se puede avanzar o retroceder
		if (index > 0) {
			configSlideLink(prevLink);
			prevLink.click(function(){
				page.hide();
				page.prev().show();
			});
		} else {
			prevLink.find('.off').show();
		}
		if (index < lastPage) {
			configSlideLink(nextLink);
			nextLink.click(function(){
				page.hide();
				page.next().show();
			});
		} else {
			nextLink.find('.off').show();
		}
	});
}

/**
 * Configura imagenes de dos estados de manera sencilla. onClass y overClass debe estar sobre el tag img directamente.
 */
function configureOnOverImages()
{
	$('img').filter(function() { return $(this).attr('my:over'); }).each(function(index){
		$(this).data('normal', this.src);
		$(this).mouseover(function(){
			this.src = $(this).attr('my:over');
		});
		$(this).mouseout(function(){
			this.src = $(this).data('normal');
		});
	});
}

/**
 * Configura posiciones absolutas (en X) para todos los <li> de una barra de menu
 */
function actualConfigureMenuPositions(menuBarSelector)
{
	var x = 0;
	$(menuBarSelector+' li').each(function(index){
		var firstImage = $('#'+this.id+' img').get(0);
		$(this).css('left', x+'px');
		x = x + firstImage.width;
	});
}

/**
 * Configura posiciones absolutas (en X) para todos los <li> de una barra de menu cuando se han cargado
 * todas las imágenes (firefox)
 */
function configureMenuPositions(menuBarSelector)
{
	$(menuBarSelector).data('toLoad', 0);
	$(menuBarSelector+' img').each(function(){
		if (!this.complete)
		{
			$(menuBarSelector).data('toLoad', $(menuBarSelector).data('toLoad') + 1);
			$(this).load(function(){
				$(menuBarSelector).data('toLoad', $(menuBarSelector).data('toLoad') - 1);
				if ($(menuBarSelector).data('toLoad') == 0)
				{
					actualConfigureMenuPositions(menuBarSelector)
				}
			});
		}
	});
	if ($(menuBarSelector).data('toLoad') == 0)
	{
		actualConfigureMenuPositions(menuBarSelector)
	}
}