/*-----------------------------------------------------------------------------
  Carrusel de imágenes v1.0 - 21/12/2011
-----------------------------------------------------------------------------*/

// Indice de ficha actual
var _fichaActual = 0;

// Milisegundos entre transiciones de fichas
var _transicionMs = 5000;

// Manejador para la función setTimeout()
var _timeoutHandler = null;


//-----------------------------------------------------------------------------
// Inicia la reproducción del carrusel en la primera ficha. El parámetro
// msTransicion indica el número de milisegundos entre transiciones y es
// opcional.
//-----------------------------------------------------------------------------
function iniciarCarrusel(msTransicion) {
	if (typeof msTransicion != 'undefined')
		_transicionMs = msTransicion;
	cargarFichaInmediato(_fichaActual);
	_timeoutHandler = setTimeout('mostrarSiguienteFicha()', _transicionMs);
}


//-----------------------------------------------------------------------------
// Muestra la siguiente ficha, manteniendo activa la reproducción del carrusel.
//-----------------------------------------------------------------------------
function mostrarSiguienteFicha() {
	var totalFichas = $('#carrusel .fichas li').length;
	_fichaActual = (_fichaActual+1)%totalFichas;
	cargarFichaSuave(_fichaActual);
	_timeoutHandler = setTimeout('mostrarSiguienteFicha()', _transicionMs);
}


//-----------------------------------------------------------------------------
// Finaliza la reproducción contínua del carrusel y muestra una ficha.
//-----------------------------------------------------------------------------
function pararReproduccionCarrusel(ficha) {
	clearTimeout(_timeoutHandler);
	cargarFichaSuave(ficha);
}


//-----------------------------------------------------------------------------
// Muestra una ficha inmediatamente.
//-----------------------------------------------------------------------------
function cargarFichaInmediato(ficha) {
	var $fichas = $('#carrusel .fichas li').eq(ficha);  // Accede al elemento <li> con el contenido de la ficha a mostrar
	var h3 = $fichas.children().eq(0).html();           // Coge el título
	var texto = $fichas.children().eq(1).html();        // Coge la descripción
	var img = $fichas.children().eq(2).html();          // Coge la url de la foto
	var color = $fichas.children().eq(3).html();        // Coge el color de fondo de la ficha
	
	// Clona la ficha actual para ser reemplazada por la nueva
	$('#carrusel .ficha-actual').hide();
	var $fichaCache = $('#carrusel .ficha-actual').clone();
	$fichaCache.children('.info').children('h3').html(h3);
	$fichaCache.children('.info').children('div').html(texto);
	$fichaCache.children('.foto').removeAttr('src');  // Necesario para que IE lance el evento load()
	$fichaCache.children('.foto').load(function() {
		$('#carrusel').css('background-color', color);
		$('#carrusel .ficha-actual').html($fichaCache.html());
		$('#carrusel .ficha-actual').show();
		actualizarNavegacionCarrusel(ficha);
	});
	$fichaCache.children('.foto').attr('src', img);   // Necesario para que IE lance el evento load()
}


//-----------------------------------------------------------------------------
// Muestra una ficha mediante un efecto Fade. NOTA: El método fadeOut() de
// jQuery establece la propiedad 'display' de CSS al valor 'none', provocando
// un efecto de scroll indeseable. Para solucionar esto, se usa el método
// fadeTo(), sustituyendo las llamadas a fadeIn() y fadeOut().
//-----------------------------------------------------------------------------
function cargarFichaSuave(ficha) {
	var $fichas = $('#carrusel .fichas li').eq(ficha);  // Accede al elemento <li> con el contenido de la ficha a mostrar
	var h3 = $fichas.children().eq(0).html();           // Coge el título
	var texto = $fichas.children().eq(1).html();        // Coge la descripción
	var img = $fichas.children().eq(2).html();          // Coge la url de la foto
	var color = $fichas.children().eq(3).html();        // Coge el color de fondo de la ficha
	
	// Clona la ficha actual para ser reemplazada por la nueva
	var $fichaCache = $('#carrusel .ficha-actual').clone();
	$fichaCache.children('.info').children('h3').html(h3);
	$fichaCache.children('.info').children('div').html(texto);
	$fichaCache.children('.foto').removeAttr('src');  // Necesario para que IE lance el evento load()
	$fichaCache.children('.foto').load(function() {
		$('#carrusel').fadeTo('slow', 0, function () {
			$('#carrusel').css('background-color', color);
			$('#carrusel .ficha-actual').html($fichaCache.html());
			$('#carrusel').fadeTo('slow', 1);
			actualizarNavegacionCarrusel(ficha);
		});
	});
	$fichaCache.children('.foto').attr('src', img);   // Necesario para que IE lance el evento load()
}


//-----------------------------------------------------------------------------
// Actualiza el panel de navegación del carrusel.
//-----------------------------------------------------------------------------
function actualizarNavegacionCarrusel(fichaSeleccionada) {
	var $fichas = $('#carrusel .fichas li');
	var $navegacion = $('#carrusel .navegacion');
	
	// Crea el panel de navegación
	$navegacion.empty();
	for (var i=0; i<$fichas.length; i++) {
		var numero = i+1;
		var cssClass = 'enlaceFicha';
		if (i < 10)
			numero = ('0'+numero);
		if (i == fichaSeleccionada)
			cssClass += ' seleccionado';
		$navegacion.append('<a href="#" class="'+cssClass+'">'+numero+'.</a>');
	}
	
	// Añade el evento onclick a los enlaces de navegación de fichas
	$('#carrusel a.enlaceFicha').click(function () {
		// Obtiene la posición del enlace pulsado respecto al padre
		var pos = $(this).parent().children().index(this);
		pararReproduccionCarrusel(pos);
		return false;
	});
}