/* =======================================================================================
    LIBRERÍA DE LA GALERÍA

     * $(document).ready(): Inicializa las galerias de una pagina
     * fotoSiguiente
     * fotoAnterior 
     * fotoEnFrame
     * mostrarFoto
	 
	 * albumSimplePreviewFoto
	 * albumSimplePreviewRelativa
  ======================================================================================== */
/* =======================================================================================

    La galeria funciona con 3 frames: frameI, frameX y frameD, cada uno de ellos contiene
    una imagen.
    
    Los 3 frames juntos forman el canvas, y todos estan contenidos en el "marco". frameX es
    el frame mostrado y frameI y frameD contienen la foto anterior y siguiente para poder
    hacer el slide.
    
    El marco es una div que actua como ventana, aunque contiene a los 3 frames, su tamaño
    se va adaptando al ancho y alto de la foto actual a mostrar.
    
    .wrapper-marco envuelve a todo ello con position=relative, esto permite posicionar el
    resto de elementos de manera absoluta (aunque el "marco" también es relative)
  ======================================================================================== */
  var LAST_FOTO_EN_FRAME=new Array();
  var DURACION_ANIMACIONES;
  var EFECTO_ALBUM;
  //var TIME_OUT
  
  $(document).ready(function(){
    console.info('**********************************************************************');

    //Si no hay album en esta pagina, sale
    if (!document.getElementById('id-album')) return;
    
    var idAlbum = $('#id-album').val();
    var NFotos = $('#album-N-fotos-'+idAlbum).val();

    DURACION_ANIMACIONES = parseInt($('#DURACION_TRANSICIONES_ALBUM-'+idAlbum).val());
    EFECTO_ALBUM = parseInt($('#efecto-album-'+idAlbum).val());

    //Si el album tiene marco...
    if (document.getElementById('marco-'+idAlbum))
    {
        var indice_actual;
        var prev_foto;
        
        //El hash del querystring da la foto a saltar
        var hash = getUrlHash();
        indice_actual = (hash && !isNaN(hash))?parseInt(hash):0;
        
        if (indice_actual>0)
        {
            new_share_url = setUrlHash(indice_actual);
            updateLinkSocial(new_share_url);
        }
            
        //Carga las fotos en el canvas y fija los tamaños
        //FrameI: ultima foto
        var ultima_foto =  (parseInt(NFotos)-1);

        if (indice_actual>ultima_foto) indice_actual=0;
        
        prev_foto = (indice_actual>0)?indice_actual-1:ultima_foto;
        $('#frameI-'+idAlbum).attr('src', $('#album-url-imagen-'+idAlbum+'-'+ prev_foto).val());
        $('#frameI-'+idAlbum).width($('#album-url-imagen-'+idAlbum+'-'+ prev_foto).css('width').replace('px',''));
        $('#frameI-'+idAlbum).height($('#album-url-imagen-'+idAlbum+'-'+ prev_foto).css('height').replace('px',''));
    
        //FrameX: primera foto
        $('#indice-actual-'+idAlbum).val(indice_actual);
        $('#frameX-'+idAlbum).attr('src', $('#album-url-imagen-'+idAlbum+'-'+indice_actual).val());
        $('#frameX-'+idAlbum).width($('#album-url-imagen-'+idAlbum+'-'+indice_actual).css('width').replace('px',''));
        $('#frameX-'+idAlbum).height($('#album-url-imagen-'+idAlbum+'-'+indice_actual).css('height').replace('px',''));
    
        //Informacion de primera foto
        setInformacionFoto(idAlbum, indice_actual);
        
        //FrameD: segunda foto
        var next_foto;
        next_foto = (indice_actual<ultima_foto)? (indice_actual+1) :0;

        $('#frameD-'+idAlbum).attr('src', $('#album-url-imagen-'+idAlbum+'-'+next_foto).val());
        $('#frameD-'+idAlbum).width($('#album-url-imagen-'+idAlbum+'-'+next_foto).css('width').replace('px',''));
        $('#frameD-'+idAlbum).height($('#album-url-imagen-'+idAlbum+'-'+next_foto).css('height').replace('px',''));
        
        var ancho_canvas = $('#frameI-'+idAlbum).width() + $('#frameX-'+idAlbum).width() + $('#frameD-'+idAlbum).width()+100;
        //var alto_canvas  = Math.max($('#frameI-'+idAlbum).height(), $('#frameX-'+idAlbum).height(), $('#frameD-'+idAlbum).height());
        var alto_canvas  = $('#altura-album-'+idAlbum).val();
        var ancho_marco = $('#frameX-'+idAlbum).width();
    
        //Fija las posiciones de los frames
        //slide dentro del marco digital
        // #marco tiene "position:relative", los frames se posicionan de manera absoluta dentro
        $('#frameI-'+idAlbum).css('left', '-' + $('#frameI-'+idAlbum).width() + 'px');
        $('#frameX-'+idAlbum).css('left','0px');
        $('#frameD-'+idAlbum).css('left', ancho_marco+'px');
        
        //Y los tamaños del marco y el canvas
        $('#canvas-'+idAlbum).width(ancho_canvas);
        $('#canvas-'+idAlbum).height(alto_canvas);
        $('#wrapper-marco-'+idAlbum).height(alto_canvas);
    
        $('#marco-'+idAlbum).width(ancho_marco);
        $('#marco-'+idAlbum).height($('#frameX-'+idAlbum).height());
        
        //AUTOPLAY
        if (document.getElementById('intervalo_autoplay-'+idAlbum))
        {
            setInterval('fotoSiguiente(' + idAlbum + ')', $('#intervalo_autoplay-'+idAlbum).val());
        }
    } //if (document.getElementById('#marco-'+idAlbum))
    else
    {
        //Si no tiene marco, simplemente se activa el prettyPhoto para el panel
        $("a[rel^='zoom-foto']").prettyPhoto
                ({theme: 'light_square', // light_rounded / dark_rounded / light_square / dark_square / facebook 
                  overlay_gallery: false}); 
    }
    $('#li-miniatura-imagen-'+idAlbum+'-'+ $('#indice-actual-'+idAlbum).val()).addClass('current');
  });

  //======================================================================================
  function fotoSiguiente(idAlbum, salto_a_foto)
  {
    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>');

    //Calcula la posicion y tamaño
    var alto_nueva_foto = $('#frameD-'+idAlbum).height();
    var ancho_nueva_foto = $('#frameD-'+idAlbum).width();

    //Realiza el desplazamiento
    $('#marco-'+idAlbum).animate({height:alto_nueva_foto, width:ancho_nueva_foto}, DURACION_ANIMACIONES); //

    $('#frameX-'+idAlbum).animate({left: -$('#frameX-'+idAlbum).width()}, DURACION_ANIMACIONES);
    $('#frameD-'+idAlbum).animate({left:0}, DURACION_ANIMACIONES,
        function()
        {
            //TODOS LOS CAMBIOS POSTERIORES LOS HACE SOLO CUANDO LA ANIMACION ESTE COMPLETA
            //Cambia los ID de los frames
            $('#frameI-'+idAlbum).remove();
            $('#frameX-'+idAlbum).attr('id', 'frameI-'+idAlbum);
            $('#frameD-'+idAlbum).attr('id', 'frameX-'+idAlbum);
            $('#frameX-'+idAlbum).after('<img id="frameD-'+idAlbum+'" class="frameD" style="position: absolute;z-index:100;top:0;" src="" />');
        
            //Ajusta la nueva foto en frameD
            var indice_actual = parseInt($('#indice-actual-'+idAlbum).val());
        
            var nuevo_indiceD, nuevo_indiceI;
            
            //if (!salto_a_foto)
            if (typeof(salto_a_foto) == "undefined")
            {
                //Si no llega este valor, es un desplazamiento normal de UNA foto
                nuevo_indiceD = (indice_actual+2) % $('#album-N-fotos-'+idAlbum).val();
                console.log("Slide,  nuevo_indiceD =" + nuevo_indiceD);
            }
            else
            {
                //Si hay salto_a_foto ha sido un salto desde el panel
                nuevo_indiceD = (salto_a_foto+1) % $('#album-N-fotos-'+idAlbum).val();
                
                //Cuando es un salto hay que ajustar tambien el frameI
                if (salto_a_foto-1 >= 0)
                    nuevo_indiceI = salto_a_foto-1;
                else
                    nuevo_indiceI = parseInt($('#album-N-fotos-'+idAlbum).val())-1;
        
                console.log("Era un salto a " + salto_a_foto + ' frameI se ajustará a ' + nuevo_indiceI);

                //Coloca la nueva foto en el frameI con un temporizador, para que acabe la animacion del slide
                LAST_FOTO_EN_FRAME['#frameI-'+idAlbum]=nuevo_indiceI;
                setTimeout("fotoEnFrame("+idAlbum +", '#frameI-"+idAlbum +"', "+ nuevo_indiceI +")",DURACION_ANIMACIONES-1);
            }
        
            //Coloca en el nuevo frameD la foto siguiente, en este caso no hace falta el "setTimeOut"
            //ya que la direccion de la animacion es contraria a la direccion de crecimiento del marco
            LAST_FOTO_EN_FRAME['#frameD-'+idAlbum]=nuevo_indiceD;
            fotoEnFrame(idAlbum, '#frameD-'+idAlbum, nuevo_indiceD);
        
            $('#frameD-'+idAlbum).css('left', $('#frameX-'+idAlbum).width() +'px');
            
            //if (!salto_a_foto)
            if (typeof(salto_a_foto) == "undefined")
                $('#indice-actual-'+idAlbum).val((indice_actual+1) % $('#album-N-fotos-'+idAlbum).val());
            else
                $('#indice-actual-'+idAlbum).val(salto_a_foto);
        
            indice_actual = $('#indice-actual-'+idAlbum).val()
            setInformacionFoto(idAlbum, indice_actual);
            //setUrlParam('f', $('#indice-actual-'+idAlbum).val());
            //Esta funcion no se puede implementar sin recargar la pagina, hay que utilizar #
            //http://www.sitepoint.com/forums/javascript-15/can-javascript-change-url-without-refreshing-page-552283.html
            
            new_share_url = setUrlHash(indice_actual);
            updateLinkSocial(new_share_url);
            
            $('#panel-miniaturas-'+idAlbum + ' .li-miniatura-imagen-'+idAlbum).removeClass('current');
            $('#li-miniatura-imagen-'+idAlbum+'-'+ $('#indice-actual-'+idAlbum).val()).addClass('current');
        });
  }

  //======================================================================================
  function fotoAnterior(idAlbum, salto_a_foto)
  {
    console.log('<<<<<<<<<<<<<<<<<<<<<<<<<<<<');

    var alto_nueva_foto = $('#frameI-'+idAlbum).height();
    var ancho_nueva_foto = $('#frameI-'+idAlbum).width();

    //En el caso de foto anterior debe ocultar temporalmente frameD, ya que si la foto a mostrar
    //es mas ancha que la foto que sale, se veria momentaneamente frameD al crecer el marco a lo ancho
    //Para evitarlo, se oculta y al final se vuelve a mostrar
    var alto_previo_frameD = $('#frameD-'+idAlbum).height();
    var ancho_previo_frameD = $('#frameD-'+idAlbum).width();

    $('#frameD-'+idAlbum).animate({width:0,height:0},1,
        function()
        {
            $('#marco-'+idAlbum).animate({height:alto_nueva_foto, width: ancho_nueva_foto}, DURACION_ANIMACIONES);
        });
        
    //$('#marco-'+idAlbum).animate({height:alto_nueva_foto, width: ancho_nueva_foto}, DURACION_ANIMACIONES);

    $('#frameX-'+idAlbum).animate({left:ancho_nueva_foto}, DURACION_ANIMACIONES);

    $('#frameI-'+idAlbum).animate({left:0}, DURACION_ANIMACIONES,
        function()
        {
            //Cambia los ID de los frames
            $('#frameD-'+idAlbum).remove();
            $('#frameX-'+idAlbum).attr('id', 'frameD-'+idAlbum);
            $('#frameI-'+idAlbum).attr('id', 'frameX-'+idAlbum);
            $('#frameX-'+idAlbum).before('<img id="frameI-'+idAlbum +'" class="frameI" style="position:absolute;z-index:100;top:0;" src="" />');
        
            //Ajusta la nueva foto en frameD
            var indice_actual = parseInt($('#indice-actual-'+idAlbum).val());
            
            var nuevo_indiceD, nuevo_indiceI;
            
            //if (!salto_a_foto)
            if (typeof(salto_a_foto) == "undefined")
            {
                nuevo_indiceI = (indice_actual-2);
                if (nuevo_indiceI<0) nuevo_indiceI = parseInt($('#album-N-fotos-'+idAlbum).val()) + nuevo_indiceI;

                console.log("Slide,  nuevo_indiceI =" + nuevo_indiceI);
            }
            else
            {
                //Cuando es un salto hay que ajustar tambien el frameD
                nuevo_indiceD = (salto_a_foto+1)%parseInt($('#album-N-fotos-'+idAlbum).val());
                nuevo_indiceI = salto_a_foto-1;
        
                if (nuevo_indiceI<0) nuevo_indiceI = parseInt($('#album-N-fotos-'+idAlbum).val()) + nuevo_indiceI;
        
                console.log("Slide con un salto a " + salto_a_foto + '. frameD se ajustará a ' + nuevo_indiceD);

                //Coloca la nueva foto en el frameI con un temporizador, para que acabe
                //la animacion del slide
                LAST_FOTO_EN_FRAME['#frameD-'+idAlbum]= nuevo_indiceD;
                setTimeout("fotoEnFrame("+idAlbum+", '#frameD-"+idAlbum+"', " + nuevo_indiceD +")",DURACION_ANIMACIONES-1);
            }
        
            //Coloca en el nuevo frameI la foto anterior
            LAST_FOTO_EN_FRAME['#frameI-'+idAlbum]=nuevo_indiceI;
            fotoEnFrame(idAlbum, '#frameI-'+idAlbum, nuevo_indiceI);
            //Tras colocar la foro en el frame, este se resitua hacia la izquierda hasta su propio ancho
            $('#frameI-'+idAlbum).css('left','-' + $('#frameI-'+idAlbum).width() + 'px');
           
            //if (!salto_a_foto)
            if (typeof(salto_a_foto) == "undefined")
            {
                if (indice_actual-1 >= 0)
                    $('#indice-actual-'+idAlbum).val(indice_actual-1);
                else
                    $('#indice-actual-'+idAlbum).val(parseInt($('#album-N-fotos-'+idAlbum).val())-1);
            }
            else
                    $('#indice-actual-'+idAlbum).val(salto_a_foto);
                    
            indice_actual = $('#indice-actual-'+idAlbum).val()
            setInformacionFoto(idAlbum, indice_actual);

            new_share_url = setUrlHash(indice_actual);
            updateLinkSocial(new_share_url);

            $('#panel-miniaturas-'+idAlbum + ' .li-miniatura-imagen-'+idAlbum).removeClass('current');
            $('#li-miniatura-imagen-'+idAlbum+'-'+ $('#indice-actual-'+idAlbum).val()).addClass('current');
        });

        $('#frameD-'+idAlbum).height(alto_previo_frameD);
        $('#frameD-'+idAlbum).width(ancho_previo_frameD);
  }
  
  //======================================================================================
  function fotoEnFrame(idAlbum, id_frame, salto_a_foto)
  {
    //console.group("fotoEnFrame");
    //Si LAST_FOTO_EN_FRAME no coincide, sale, ya que se trata del final de la anterior transicion
    if (LAST_FOTO_EN_FRAME[id_frame]!=salto_a_foto)
    {
        console.warn("Intento de adelanto en " + id_frame + " con foto " + salto_a_foto + " cuando debia ser la " + LAST_FOTO_EN_FRAME[id_frame]);
        return;
    }
    else
    {
        console.log("Cambio correcto en frame " + id_frame + ". LAST_FOTO_EN_FRAME: " + LAST_FOTO_EN_FRAME[id_frame]);
    }

    console.log("En " + id_frame + " poner foto " + salto_a_foto);
    
    $(id_frame).attr('src', $('#album-url-imagen-'+idAlbum+'-'+salto_a_foto).val());
    
    $(id_frame).width($('#album-url-imagen-'+idAlbum+'-'+salto_a_foto).css('width').replace('px',''));
    $(id_frame).height($('#album-url-imagen-'+idAlbum+'-'+salto_a_foto).css('height').replace('px',''));
    
    //console.groupEnd();
  }
  
  //======================================================================================
  function mostrarFoto(idAlbum, salto_a_foto)
  {
    //console.group("mostrarFoto");
    var indice_actual = parseInt($('#indice-actual-'+idAlbum).val());
    console.log('-------------------------------');
    console.log('Saltar a ' + salto_a_foto + ' desde ' + indice_actual);

    if (indice_actual < salto_a_foto)
    {
        LAST_FOTO_EN_FRAME['#frameD-'+idAlbum]=salto_a_foto;
        fotoEnFrame(idAlbum, '#frameD-'+idAlbum, salto_a_foto);
        fotoSiguiente(idAlbum, salto_a_foto);
    }
    else if (indice_actual > salto_a_foto)
    {
        LAST_FOTO_EN_FRAME['#frameI-'+idAlbum]=salto_a_foto;
        fotoEnFrame(idAlbum, '#frameI-'+idAlbum, salto_a_foto);
        fotoAnterior(idAlbum, salto_a_foto);
    }

    //console.groupEnd();
  }

    //======================================================================================
    function setInformacionFoto(idAlbum, nfoto)
    {
        $('#titulo-foto-en-marco-'+idAlbum).html($('#album-titulo-imagen-'+idAlbum+'-'+nfoto).val());
        
        $('#fecha-foto-en-marco-'+idAlbum).html($('#album-fecha-imagen-'+idAlbum+'-'+nfoto).val());
        $('#descripcion-foto-en-marco-'+idAlbum).html($('#album-descripcion-imagen-'+idAlbum+'-'+nfoto).val());
        $('#localizacion-foto-en-marco-'+idAlbum).html($('#album-localizacion-imagen-'+idAlbum+'-'+nfoto).val());
    }
    

    //======================================================================================
    //Funciones para el album simple:
	//Muestra la foto "NFoto" en el marco de preview
    function albumSimplePreviewFoto(NFoto, IdAlbum)
    {
        var ruta_foto = $('#album-url-imagen-'+IdAlbum+'-'+NFoto).val();
        //$('#album-marco-preview-'+IdAlbum).hide("slide", { direction: "left" }, "slow");
        //$('#album-marco-preview-'+IdAlbum).effect('slide', { direction: "right" }, "slow")

        $('#album-marco-preview-'+IdAlbum).attr('src', ruta_foto);
        $('#album-marco-preview-indice-'+IdAlbum).val(NFoto);
        $('#titulo-imagen-preview-'+IdAlbum).html($('#album-titulo-imagen-'+IdAlbum+'-'+NFoto).val());
        $('#descripcion-imagen-preview-'+IdAlbum).html($('#album-descripcion-imagen-'+IdAlbum+'-'+NFoto).val());
    }
    
    //Muestra la foto anterior/siguiente en la galeria tipo "preview"
    function albumSimplePreviewRelativa(salto, IdAlbum)
    {
        var NFotoActual = parseInt($('#album-marco-preview-indice-'+IdAlbum).val());
        var NFoto = NFotoActual + salto;

        var MaxFotos = parseInt($('#preview-N-fotos-'+IdAlbum).val());
        
        if (NFoto<0) NFoto = MaxFotos-1;
        if (NFoto>=MaxFotos) NFoto = 0;

        albumSimplePreviewFoto(NFoto, IdAlbum);
    }