$(document).ready(function()
{   
    var tiempoSlide = 8000; // 8seg;
    var estadoIntervaloSlide = 1; // comienzo automático
    var intervaloSlide = new Object();
    var indiceSlide = 0;
    var cantidadSlides = $("#slideshow ul").find("li").length;
 
    var liSlideInicial = $("#slideshow ul").find("li")[0];
    if ($(liSlideInicial) != null) $(liSlideInicial).css("display", "block");
    
    $("#slideshow .navegador").append("<a class=\"pausa\" href=\"#\" indice=\"-1\"></a>");
    $("#slideshow ul").find("li").each(function(i)
    {
        $("#slideshow .navegador").append("<a href=\"#\" indice=\"" + i + "\">" + (i + 1) + "</a>");
    });
    
    var enlaces = $(".#slideshow .navegador a");
    
    var anchoNavegador = $("#slideshow .navegador").css("width");
    anchoNavegador = anchoNavegador.substring(0, anchoNavegador.indexOf("px"));
    var anchoEnlace = $(enlaces[1]).css("width");
    anchoEnlace = anchoEnlace.substring(0, anchoEnlace.indexOf("px"));
    
    $(enlaces[0]).css({marginLeft: ((anchoNavegador - enlaces.length * anchoEnlace) - 10) + "px"});
    $(enlaces[1]).addClass("seleccionado");
    
    $("#slideshow .navegador a").click(function(e)
    {
        e.preventDefault();
        var indiceElemento = parseInt($(this).attr("indice"));
        
        if (indiceElemento == -1) // pausa/reproducir
        {
            if (estadoIntervaloSlide == 1 && intervaloSlide != null) // pausar
            { 
                slideEstadoPausa();
                $(this).removeClass("pausa");
                $(this).addClass("play");
            }
            
            else if (estadoIntervaloSlide == 0) // reproducir
            {
                $(this).removeClass("play");
                $(this).addClass("pausa");
                slideEstadoReproducir();
            }
        }
        
        else if (indiceElemento >= 0 && indiceElemento != indiceSlide) // cambiar de slide
        {
            slideEstadoPausa();
            $("#slideshow .navegador").find("a").each(function()
            {
                var indiceElemento = parseInt($(this).attr("indice"));
                if (indiceElemento == -1)
                {
                    $(this).removeClass("pausa");
                    $(this).addClass("play");
                }
            });
            
            ejecutarSlideSelecta(indiceElemento);
        }
    });
    
    function slideEstadoPausa()
    {
        estadoIntervaloSlide = 0;
        clearInterval(intervaloSlide);
    }
    
    function slideEstadoReproducir()
    {
        estadoIntervaloSlide = 1;
        intervaloSlide = setInterval(ejecutarSlides, tiempoSlide);
    }
    
    function ejecutarSlides()
    {
        $(enlaces[(indiceSlide+1)]).removeClass("seleccionado");
        
        var liSlideActual = $("#slideshow ul").find("li")[indiceSlide++];
        indiceSlide = (indiceSlide < cantidadSlides) ? indiceSlide : 0;
        var liSlideSiguiente = $("#slideshow ul").find("li")[indiceSlide];
    
        $(liSlideActual).fadeOut("slow");
        if (liSlideSiguiente != null)
        {
            $(enlaces[(indiceSlide+1)]).addClass("seleccionado");
            $(liSlideSiguiente).fadeIn("slow");
        }
    }
    
    function ejecutarSlideSelecta(indiceElemento)
    {
        $(enlaces[(indiceSlide+1)]).removeClass("seleccionado");
        var liSlideActual = $("#slideshow ul").find("li")[indiceSlide];
        var liSlideSiguiente = $("#slideshow ul").find("li")[indiceElemento];
        
        $(enlaces[(indiceElemento+1)]).addClass("seleccionado");
        $(liSlideActual).fadeOut("slow");
        if (liSlideSiguiente != null)
            $(liSlideSiguiente).fadeIn("slow");
        indiceSlide = indiceElemento;
    }
    
    if (estadoIntervaloSlide == 1) intervaloSlide = setInterval(ejecutarSlides, tiempoSlide);
});