// JavaScript Document
function initCarousel_html_carousel()
	{
		carousel = new Carousel('html-carousel', {numVisible:5, scrollInc:5, animHandler:animHandler, animParameters:{duration:0.5}, buttonStateHandler:buttonStateHandler, nextElementID:'next-arrow', prevElementID:'prev-arrow', size: <?PHP echo $Fotos; ?>})
	};
	
	Event.observe(window, 'load', initCarousel_html_carousel);

	function loadImage(idCentro, idImagen, altText, texto)
	{
		var divFoto = document.getElementById("divFoto");
		divFoto.style.visibility = "visible";
		
		var img = document.getElementById("imgFoto");
		
		img.src = "img/fotos_centros/centro_" + idCentro + "/foto_" + idImagen + ".jpg";
		img.title = unescape(altText);
		img.style.visibility = "visible";
				
		var titulo = document.getElementById("divTituloFoto");
		titulo.innerHTML = "<span class='tituloFoto'>" + unescape(altText) + "</span><br/><br/>" + unescape(texto);
	}

	function buttonStateHandler(button, enabled) 
	{
		if (button == "prev-arrow") 
			$('prev-arrow').src = enabled ? "img/carousel/left_100_enabled.jpg" : "img/carousel/left_100_disabled.jpg"
		else 
			$('next-arrow').src = enabled ? "img/carousel/right_100_enabled.jpg" : "img/carousel/right_100_disabled.jpg"
	}

	function animHandler(carouselID, status, direction)
	{
 		var region = $(carouselID).down(".carousel-clip-region")
  		
		if (status == "before")
		{
    		Effect.Fade(region, {to: 0.3, queue: { position:'end', scope: "carousel" }, duration: 0.2})
  		}
		
		if (status == "after")
		{
			Effect.Fade(region, {to: 1, queue: { position:'end', scope: "carousel" }, duration: 0.2})
		}
	}