//variables por defecto
var posicion=0;
var en_proceso=0;
var tiempo;
var cantidad_img;

//funcion para la animacion entre imagen e imagen. Solo hay q definir el numero de imagen con la variable "posicion"
function animacion(posicion)
{
   
    clearTimeout(tiempo);
    imagen_nueva=directorio_img+galeria[posicion];
    $("#div_imagen_nueva").html('<img id="img_nueva" width="650"  src="'+imagen_nueva+'">');
    $("#img_nueva").css('display','none');
    $("#cargando").css('background','url("/global/img/loading.gif") no-repeat center');
    //$("#cargando").css('z-index','3');
    $("#img_nueva").load(function()
    {
        $("#cargando").css('background','none');
        $("#img_nueva").css('display','block');
        $("#div_imagen_actual").animate({opacity:0},1000);
        $("#div_imagen_nueva").animate({opacity:1},1000,function()
        {
            $("#div_imagen_actual").html('<img id="img_actual" width="650"  src="'+imagen_nueva+'">');
            $("#div_imagen_actual").css("opacity","1");
            $("#div_imagen_nueva").css("opacity","0");
            $("#div_imagen_nueva").html(' ');
            en_proceso=0;
            tiempo = setTimeout('automatico()', 7000);
        });
    });
}
    
//funcion automatico
function automatico()
{

        en_proceso=1;
        posicion++;
        if (posicion==(cantidad_img-1))
        {
            $("#siguiente").css('display','none');
        }
        if (posicion>(cantidad_img-1))
        {
            posicion=0;
            $("#atras").css('display','none');
            $("#div_imagen_nueva").css("opacity",'0');
            $("#siguiente").css('display','block');
        }
        if (posicion>0)
        {
            $("#atras").css('display','block');
        }
        if (galeria.length>1)
        {
            animacion(posicion);
            //alert('llego');
        }
        else
        {
            en_proceso=0;
        }
}

//---------------- Carga el programa cuando termine de cargar el sitio -------------//
$(document).ready(function()
{

    
    //variables por defecto
    cantidad_img=galeria.length;
    
    
    //Escondo el boton atras si es la primer imagen
    if (posicion==0)
    {
        $("#atras").css('display','none');
        $("#div_imagen_nueva").css("opacity",'0');
    }
    
    //Si hay una sola imagen no coloco el boton siguiente
    if (cantidad_img==1)
    {
        $("#siguiente").css('display','none');
    }
    else
    {
        tiempo = setTimeout('automatico()', 7000);
    }
    
    //imagen por defecto cuando arranca
    animacion(posicion,cantidad_img);
    
    
    //Agrego al elemento con el ID="siguiente" la funcion click 
    $("#siguiente").click
    (
        function()
        {
            if (en_proceso==0)
            {
                en_proceso=1;
                posicion++;
                
                if (posicion==(cantidad_img-1))
                {
                    $("#siguiente").css('display','none');
                }
                else
                {
                    $("#siguiente").css('display','block');
                }
                
                if (posicion>0)
                {
                    $("#atras").css('display','block');
                }
                animacion(posicion);
            }
            
        }
    );
    
    //Agrego al elemento con el ID="atras" la funcion click 
    $("#atras").click
    (
        function()
        {
            if (en_proceso==0)
            {
                en_proceso=1;
                posicion--;
                if (posicion==0)
                {
                    $("#atras").css('display','none');
                }
                else
                {
                    $("#atras").css('display','block');
                }
                if (posicion<(cantidad_img-1))
                {
                    $("#siguiente").css('display','block');
                }
                animacion(posicion);
            }
            
        }
    );
});