var eventosCarrusel_tiempo = 5;


/*
 * Inicio de los carruseles
 */
$(document).ready(function() {
    jQuery('#carrusel').jcarousel({
        auto: 3,
        wrap: 'last',
        initCallback: carrusel_setEventos,
        visible: 5
    });

    jQuery('#eventos_carrusel').jcarousel({
    	auto: eventosCarrusel_tiempo, // Define el tiempo por cada diapositiva, variable al inicio del archivo
    	wrap: 'last',
    	visible: 1, // Número de diapositivas visibles. Debe ser 1 (se armó así el HTML/CSS)
    	scroll: 1, // Número de diapositivas que se avanzan por cambio. Se armó para 1.
    	buttonNextHTML: null, // Evita que se cree automáticamente el botón Siguiente
    	buttonPrevHTML: null, // Evita que se cree automáticamente el botón Anterior
    	initCallback: carruselEventos_setEventos, // Función que se llama al iniciar el carrusel
    	itemVisibleInCallback: { // Función que se llama al mostrar una diapositiva en pantalla
	        onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
    	},
    	itemVisibleOutCallback: { // Función que se llama al desaparecer una diapositiva de la pantalla
    		onBeforeAnimation:  mycarousel_itemVisibleOutCallbackBeforeAnimation
    	}
    });
});

/*
 * Definición del carrusel de promociones (el que sólo tiene imágenes,
 * con flechas a los lados).
 */
function carrusel_setEventos(carousel) {
    /*
     * Detiene el carrusel si el mouse está encima de las diapositivas
     * y lo activa si el mouse sale de ese contenedor.
     */
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
}

function carruselEventos_actualizarTitulo(numEvento) {
	$("#eventosCarrusel-titulo").html($("#eventos_semana-titulo_evento-"+numEvento).html());
}

function carruselEventos_setEventos(carousel) {
	/*
	 * Setea el título de la ventana al de la primera noticia
	 */
	carruselEventos_actualizarTitulo(1);
	
	/*
	 * Define la clase "actual" a la página 1 (inicial). Le cambia el color al número.
	 */
	$("#carruselEventos-elige-1").addClass("actual");

    /*
     * Detiene el carrusel al darle click a anterior-siguiente
     */
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });

    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });

    /*
     * Define la acción de los botones anterior/siguiente
     */
    $("#carruselEventos_anterior").bind('click', function() {
		carousel.prev();
		return false;
	});

	$("#carruselEventos_siguiente").bind('click', function() {
		carousel.next();
		return false;
	});
	
	/*
	 * Define la acción de los botones que permiten elegir
	 * una diapositiva particular (números).
	 */
	$('.carruselEventos_control').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
    
    /*
     * Detiene el carrusel al pasar el mouse por encima y lo reactiva
     * al quitar el mouse de encima del contenedor.
     */
	$("#eventos").hover(
    	function() {
    		carousel.startAuto(0);
    	}, function() {
    		carousel.startAuto(eventosCarrusel_tiempo);
    	}
    );
}


/*
 * Funciones que se ejecutan para cambiar el estado del número
 * de la diapositiva actual.
 */
function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
	$("#carruselEventos-elige-" + idx).removeClass("actual");
}

function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
	$("#carruselEventos-elige-" + idx).addClass("actual");
	carruselEventos_actualizarTitulo(idx);
}