function visualizaObra(pRutaObra) {
	var $contenedorObra = $('div#contenedor3');
	var $loading = $('div#loading');
	
	$loading.removeClass('js');
	
	var img = new Image();
	$(img)
		.load(function() { //una vez cargada la imagen			
			$contenedorObra.fadeOut(250, function() {
				$loading.addClass('js');
				$contenedorObra.css('background', 'transparent url(' + pRutaObra + ') no-repeat center center');
				$contenedorObra.fadeIn(450);
			});			
		})
		.error(function() { //no debería dar error nunca, las rutas son correctas, etc			
		})
		.attr('src', pRutaObra);
}


$(document).ready(function() { //cuando el DOM esté cargado
	//cargamos la primera obra. Este código debe ir antes que jCarousel
	var obraInicial = $('ul#nav-miniaturas li:first a').attr('href');	
	visualizaObra(obraInicial);
	
	/* //este código no funciona con jCarousel circular = true
	$('ul#nav-miniaturas li a').click(function(event) {
		event.preventDefault();
		var elemento = $(this);
		visualizaObra(elemento.attr('href'));
	});
	*/
	
	$('ul#nav-miniaturas li a').livequery('click', function(event) {
		event.preventDefault();
		var elemento = $(this);
		visualizaObra(elemento.attr('href'));
		//return false; 
	});
	
	//jCarousel
	$('div#miniaturas').jCarouselLite({
		btnNext: ".next",
		btnPrev: ".prev",
		vertical: true,
		visible: 5,
		scroll: 3,
		//circular: false,
		mouseWheel: true
    });
	//fin: jCarousel
});