$(document).ready(function(){
  var EmptyfileList=$("#fileBrowse")[0].files;
  $(".btnDiagnosticar").click(upload);
  loadExternHTML();

  function upload(){
    var formData=new FormData(); //La imagen va aquí, en esta estructura.
    var file=$("#fileBrowse")[0].files; //Se obtiene la imagen.
    console.log(file);
    console.log(file.length);
    if(file.length==1){
      console.log(file[0]);
      formData.append("tipo", "imagen");  //Se añade el tipo de peticion para poder ser gestionada mediante el controlador.
      formData.append("miFichero", file[0]); //Se añade el fichero, el nombre que aparece al comienzo es el que permitirá recuperar el mismo en el servidor.
      $(".modal-loader").css("display", "block");
      $.ajax({
        type: "POST",
        url: "/",
        data: formData,
        contentType: false, //De este modo no se añade el tipo de contenido en la cabecera.
        processData: false, //Incluyendo esta opción se evita que se combiertan los datos transferidos a texto puesto que no se desea que el fichero se convierta en texto.
        success: function(response){
          document.getElementById("btnResultado").submit();
        },
        error: function(error){
          console.log(error);
          $(".modal-loader").css("display", "none");
          alert("Error", error);
        }
      });
    }
    else{
      alert("Debe subir una única imagen");
    }
  }

  //Permite cambiar la etiqueta al nombre del fichero (se lanza cuando se elige el fichero).
  $("#fileBrowse").change(verificarFichero);

  //Se lanza cuando se arrastra.
  $("#drop_zone").on("drop", function(event){
    event.preventDefault(); //Evitamos la acción por defecto cuando arrastras un elemento al navegador.
    $("#fileBrowse")[0].files=event.originalEvent.dataTransfer.files;  //Se asigna el fichero al input.
    verificarFichero();
  });

  //Cuando se arrastra un fichero dentro del cuadro donde se depositan.
  $("#drop_zone").on('dragover dragenter', function() {
    $(".boxUpload").css("background-color", "#0190af");
    $("#drop_zone").css("border-color", "#EEE");
    $("#drop_zone p").css("color", "white");
    $("#drop_zone i").css("color", "white");
  });

  //Cuando se suelta un fichero dentro del cuadro donde se depositan.
  $("#drop_zone").on('dragleave dragend drop', function() {
    $(".boxUpload").css("background-color", "#EEE");
    $("#drop_zone").css("border-color", "#0190af");
    $("#drop_zone p").css("color", "black");
    $("#drop_zone i").css("color", "#0190af");
  });

  function verificarFichero(){
    var file=$("#fileBrowse")[0].files;
    if(file[0]!=null){  //Se busca solucionar la excepción que se produce en chrome por llamar varias veces a verificarFichero generando las últimas excepción.
      var extension= getFileExtension(file[0].name);

      if(extension=="jpg" || extension=="JPG" || extension=="PNG" || extension=="png" || extension=="jpeg" || extension=="JPEG"){  //Comprobamos que la extensión se corresponda con las existentes.
        $(".inputNameFile").text(file[0].name);
        $("#drop_zone p").text(file[0].name);
        $(".inputNameFile").prepend('<i class="far fa-file-image" style="font-size:24px;color:#0190af;margin-right:10px;"></i>');
        $("#drop_zone p").prepend('<i class="far fa-file-image" style="font-size:48px;color:#0190af;margin-right:10px;">');
      }
      else{
        $(".inputNameFile").text("Nombre de la imagen");
        $("#drop_zone p").text("Arrastrar imagen aquí");
        $(".inputNameFile").prepend('<i class="far fa-file-image" style="font-size:24px;color:#0190af;margin-right:10px;"></i>');
        $("#drop_zone p").prepend('<i class="fa fa-download" style="font-size:48px;color:#0190af">');
        $("#fileBrowse")[0].files=EmptyfileList;  //Vaciamos la lista de imagenes.
        alert("Error  extensión invalida");
      }
    }
  }

  function getFileExtension(cadena){
    aux=cadena.split("."); //Se obtiene la extensión del fichero.
    if (aux.length>=2){
      return aux[aux.length-1];  //Se devuelve la extensión.
    }
    else{
      return ""; //Se devuelve una cadena vacía si no tiene extensión.
    }
  }

  //Permite cargar las ventanas externas (HTML externo).
  function loadExternHTML(){
    $("#ContenedorSecundario").load("../static/StaticHTML/Cargando.html");
  }
});