var galeria = [
   { persona:"Buddha - ??????",
     frase:"En la confrontación entre el arrollo y la roca, el arrollo siempre ganará, no por la fuerza, sino por la persistencia.",
     foto:"http://www.imagexia.com/img/Cara-de-Buda.jpg"
   },
   { persona:"Khalil Gibran - ????? ???? ????? ?? ?????? ?? ???",
     frase:"El silencio del envidioso está lleno de ruidos.",
     foto:"http://www.hannaharendtcenter.org/wp-content/uploads/2015/05/111.jpg"
   },
   { persona:"Confucio - ??",
     frase: "Todo tiene belleza pero no todo el mundo la puede ver.",
     foto:"http://3.bp.blogspot.com/-VlsuMSoivLU/VeMlD-LymUI/AAAAAAABKPU/Q8PYwsFbqxg/s1600/confucio.jpeg"
   },
   { persona:"Lev Nikoláievich Tolstói - ??? ?????????? ???????",
     frase:"Mi felicidad consiste en que sé apreciar lo que tengo y no deseo con exceso lo que no tengo.",
     foto:"http://malba.s3-website-sa-east-1.amazonaws.com/wp-content/uploads/2014/09/tolstoi-05.jpg"
   },
   { persona:"Platón - ???t??",
     frase:"El más importante y principal negocio público es la buena educación de la juventud.",
     foto:"https://s-media-cache-ak0.pinimg.com/236x/ee/c4/f3/eec4f3420f7024c58f1b44de233d8ecd.jpg"
   },
   { persona:"Henrik Ibsen - h?n??k 'jo?h?n '?ps?n",
     frase:"Si dudas de ti mismo, estás vencido de antemano.",
     foto:"https://ebooks.adelaide.edu.au/i/ibsen/henrik/gosse/images/bust2.jpg"
   }
];

var t, actual, datos, persona, frase, foto, galeriaManiobra;

function select(i){
   actual = i;
    
  $("nav a")
    .removeClass("on off")
    .addClass(function(j){return(j===i)?"on":"off";});

  persona.html(galeriaManiobra[i].persona);
  frase.html(galeriaManiobra[i].frase);
  foto.attr("src", galeriaManiobra[i].foto);

  clearTimeout(t);
  t = setTimeout( function(){select((i + 1) % galeriaManiobra.length);}, 2000);
}

function generar_selector(){ // regenera la botonera
  var selector = $("#selector");

  selector.html("");
  
  galeriaManiobra.forEach(function(elem,i) {
    selector.append("<li><a onClick='select("+i+")'></a></li>");
  });
}

function cerrar_Editar() {
    datos.css("display", "none");
    
}

function actualizar_localStorage() {
    //actualizamos el localStorage
    localStorage.setItem("citas", JSON.stringify(galeriaManiobra));
}

function inicializar_Datos() {
    galeriaManiobra = JSON.parse(JSON.stringify(galeria.slice(0)));
}


$(function() {

    //asignamos DOM a variables 
    datos = $("#datos");
    persona = $("#persona");
    frase = $("#frase");
    foto = $("#foto");

    inicializar_Datos();        //cargamos los datos en la galeria que usaremos

    
// ------ Gestionamos la carga de las citas en localStorage ------------
   /* guardar la base de datos serializada en JSON en localStorage, de forma que al cargar la aplicación en un navegador, está deberá detectar si existe una base de datos de citas almacenada en localStorage y si es así deberá presentar está en vez de las citas de la galería incluidas en el código de la aplicación.*/
    //estas líneas inicializan o crean la variable citas en localStorage
    var comprobar = localStorage.getItem("citas");
    if (comprobar === null) {           //no existe la propiedad en localStorage
        actualizar_localStorage();      //la creamos
    } else {
        //existe la propiedad en localStorage, recuperamos su contenido con JSON
        galeriaManiobra = JSON.parse(localStorage.getItem("citas"));
    }
    
    generar_selector();                     //cargamos los datos en pantalla

    //al pulsar click sobre el botón de inicializar se regeneran las citas iniciales de la aplicación, eliminando los cambios introducidos. Se debe pedir confirmación, avisando de lo que se va a hacer
    $("#refresh").on("click", function() {
        clearTimeout(t);                    //paramos el carrusel
        if (confirm("Va a borrar todos los cambios y citas nuevas añadidas a la Aplicación. \n ¿Está seguro?") == true) {
            inicializar_Datos();            //cargamos los datos originales
            actualizar_localStorage();      //actualizamos el localStorage
            generar_selector();             //regenera la pantalla
            select(0);                      //inicia desde la primera cita
        } else {
            select(actual);                 //continuamos el carrusel donde estabamos
        }
        
    });
    
    $("#abrirEditar").on("click", function() {
        clearTimeout(t);                    //paramos el carrusel

        $("#persona_d").html(galeriaManiobra[actual].persona);
        $("#frase_d").html(galeriaManiobra[actual].frase);
        $("#foto_d").html(galeriaManiobra[actual].foto);

        datos.css("display", "block");      //mostramos la zona de edición
    });

    //control del botón de cierre de la sección "datos"
    $("#cerrarEditar").on("click", function() {
        cerrar_Editar();
        select(actual);
    });


    $("#nuevo").on("click", function() {
        datos.css("display", "none");       //ocultamos la zona de edición

        actual = galeriaManiobra.push({
            persona: $("#persona_d").html(),
            frase: $("#frase_d").html(),
            foto: $("#foto_d").html()
        }) - 1;

        
        actualizar_localStorage();      //actualizamos el localStorage
        
        generar_selector();             //regenera la pantalla
        select(actual);                 //reinicia desde la posición actual
    });

    $("#borrar").on("click", function () {
        if (galeriaManiobra.length > 1) {
            if (confirm("Va a borrar un registro \n ¿Está seguro?") === true) {
            galeriaManiobra.splice(actual, 1);   //borra la posición actual
            
            actualizar_localStorage();  //actualizamos el localStorage
            
            generar_selector();         //regenera la pantalla
            select(0);                  //inicia desde el primero
                cerrarEditar();
        } else {
            alert("Operación cancelada");
        }
        } else {
            confirm("No es posible eliminar más registros.");
        }

    });

    $("#guardar").on("click", function() {
        galeriaManiobra.splice(actual,1,{persona: $("#persona_d").html(), frase: $("#frase_d").html(), foto: $("#foto_d").html()});
        
        actualizar_localStorage();      //actualizamos el localStorage
        
        generar_selector();             //regenera la pantalla
        select(actual);                 //continuamos carrusel donde estabamos
        cerrar_Editar();
    });

    select(0);                          //iniciamos el programa con la primera cita
});