Progetto_2023-OVI/site2/js/ricerca.js

// Config data -- could be whatever
// should be moved to a different file if/when there's a lot of it
const flask_be_address = 'http://127.0.0.1:5000'

// Separate function to handle HTTP requests -- could be moved to different file (a service)
function getData(endpoint, queryDTO){

    let url = flask_be_address.concat(endpoint);

    // This seems to work and it's definitely better than previous version
    return $.ajax(
      {
        url: url,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(queryDTO),
      }
    );

    // // This seems to work too (but it's missing the 'return' statement, I'm not sure what 'fetch' returns)
    // fetch(url,
    //     {
    //         method: 'POST',
    //         headers: {
    //             'Content-Type': 'application/json'
    //         },
    //         body: JSON.stringify(queryDTO)
    //     }
    // );


    // // THE OLD, STUPID WAY
    // // This is a stupid way of handling the JSON data, but it works;
    // // trying to send application/json data causes Flask to complain and I can't understand why!    
    // return $.post(url,  {stringifiedDTO: JSON.stringify(queryDTO)});
}

let arrayResponse = [];
// Separate function to handle response data -- could be moved to different file (a service)
function processData(response){
    console.log(response);
    $("#loader").css("display", "none");
    if(response.length==0){
        alert('No results!')
    }
    else {
      arrayResponse = response;
      var keys = Object.keys(response[0]);
      createFirstRow(keys);
      var ll = response.length;
      for (var i=0; i<ll; i++) {
        let newRow = response[i];
        createRow(i, newRow);
      }
    }
    //$("#result").append(response);
}

function processOccData(response){
  console.log(response);
  $("#loader").css("display", "none");
  if(response.length==0){
      alert('No results!')
  }
  else {
    arrayResponse = response;
    var keys = Object.keys(response[0]);
    createFirstRowOcc(keys);
    var ll = response.length;
    let pags = Math.floor(ll / 10);
    let extraP = ll % 10;
    if (extraP != 0) {
      pags = pags + 1;
    }
    let pp = 9;
    let ref = 1;

    createPagination(pags);

    for (var j=1; j<pags+1; j++) {
      var newDiv = document.createElement('div');
      newDiv.id = "pag_" + j;
      newDiv.className = "page";
      $("#result").append(newDiv)
    }
    

    for (var i=0; i<ll; i++) {
      if (i >= pp) {
        pp = pp + 10;
        ref = ref + 1;
      } else {
        pp = pp;
      }
      let newRow = response[i];

      createOccRow(i, newRow, ref);
    }
  }
  //$("#result").append(response);
}

function createPagination(num) {
  $("#navPagination").html("");

  var navbar = document.createElement('nav');
  
  var ulNav = document.createElement('ul');
  ulNav.className = "pagination";

  var liNavP = document.createElement('li');
  //liNavP.className = "page-item";
  liNavP.id = "prev";
  
  var aPrev = document.createElement('a');
  aPrev.className = "page-link";
  aPrev.innerHTML = "&laquo;";

  liNavP.append(aPrev);
  ulNav.append(liNavP);

  for (var i=1; i<num+1; i++) {
    var liNav = document.createElement('li');
    liNav.className = "page-item";
    if (i==1) {
      liNav.classList.add("active");
    }
    liNav.id = "getPage_" + i;
    var aNum = document.createElement('a');
    aNum.className = "page-link";
    aNum.innerHTML = i;
    liNav.append(aNum)
    ulNav.append(liNav);
  }

  var liNavN = document.createElement('li');
  //liNavN.className = "page-item";
  liNavN.id = "next";
  var aNext = document.createElement('a');
  aNext.className = "page-link";
  aNext.innerHTML = "&raquo;";
  liNavN.append(aNext);
  ulNav.append(liNavN);

  navbar.append(ulNav);

  
  $("#navPagination").append(navbar);
}

//Funzione per gestire i contesti
function processSingleContext(response){
  if(response.length==0){
      alert('No results!')
  }
  else {
    console.log(response);
    createPage(response[0]);
  }
}

let queryDTO = {};

function funzioneRicerca(){
  $("#result").html("");
  $("#loader").css("display", "block");
  let collection_elementoDaRicercare = document.getElementsByClassName("barraDiRicerca");
  var collection_types = document.getElementsByClassName("flViewBy");
  var collection_lenght = collection_elementoDaRicercare.length;
  let distanza = document.getElementById("distanza").value;
  let queryList = [];
  var periodo = 0;
  var ordinate = 0;

  var i = 0;
  for (i; i < collection_lenght; i++) {
    elementoDaRicercare = collection_elementoDaRicercare[i].value;
    let word = elementoDaRicercare;
    var tipo = "";
    var espansa = 0;
    var raddoppiata = 0;
    var noLemma = 0;
    var formeLemmi = 0;
    var check_tipo = collection_types[i].value;
 
    //NOLEMMA DEVE ESSERE CONVERTITO IN TIPO (TIPO = 0, 1, 2), TIPO = 2 SE NOLEMMA è SELEZIONATO
       
    if ($('#occ_' + i + ' .ricercaEx').prop("checked"))
    {
      espansa = 1;
    }
    if ($('#occ_' + i + ' .raddoppiata').prop("checked"))
    {
      raddoppiata = 1;
    }
    if ($('#occ_' + i + ' .showOther').prop("checked"))
    {
      formeLemmi = 1;
    }
    if ($('#occ_' + i + ' .lemmatizzata').prop("checked"))
    {
      noLemma = 1;
    }
    

    if ((check_tipo == "forma") && (formeLemmi == 0)) {
      tipo = "forma";
    }
    else if ((check_tipo == "forma") && (formeLemmi == 1)) {
      tipo = "formaLemma";
    }
    else if ((check_tipo == "lemma") && (noLemma == 1)) {
      tipo = "soloLemmatizzate";
    }
    else if ((check_tipo == "lemma") && (formeLemmi == 0)) {
      tipo = "lemma";
    }
    else if ((check_tipo == "lemma") && (formeLemmi == 1)) {
      tipo = "lemmaForma";
    }

    queryList.push( {"stringa": word, "espansa": espansa, "raddoppiata": raddoppiata, "tipo": tipo} );
    //$("#params").append("I tuoi parametri: " + word + "; " + tipo + "; " + espansa + "; " + raddoppiata + "; " + formeLemmi);
  
  }

  if ($('#periodo').prop("checked"))
  {
    periodo = 1;
  }
  if ($('#ordinate').prop("checked"))
  {
    ordinate = 1;
  }

  let cooccorrenze = {"distanza": distanza, "stesso_periodo": periodo, "ordinate": ordinate};

  let numb = document.getElementById("search_form").childElementCount;
  if (numb < 2) {
      queryDTO = {
        queryList: queryList
    }
    getData('/simple_get_query', queryDTO)
    // After request finishes, process response data
    .done(response => processData(response))
    .fail(err => {
      console.log(err);
      $("#loader").css("display", "none");
      alert('Something went wrong!');
    });
  } else {
      queryDTO = {
        queryList: queryList,
        cooccorrenze: cooccorrenze
    }
    getData('/simple_get_query', queryDTO)
    // After request finishes, process response data
    .done(response => processOccData(response))
    .fail(err => {
      console.log(err);
      $("#loader").css("display", "none");
      alert('Something went wrong!');
    });
  } 

  console.log(queryDTO);

  $("#lauchSearchContext").css("display", "flex");
  
} 

function checkContext() {
  let resulTable = document.getElementById("result");
  const checkBoxes = resulTable.querySelectorAll('input[type="checkbox"]');
  let arrayContesti = [];

  var selected = [];
  $('#result input:checked').each(function() {
      //selected.push($(this).attr('id'));
      var checkNum = $(this).attr('id');
      selected.push(checkNum);
  });

  for (var i=0; i<arrayResponse.length; i++) {
    for (var j=0; j<selected.length; j++) {
      if (arrayResponse[i]["cod"] == selected[j]) {
        arrayResponse[i]["selected"] = true;
        arrayContesti.push(arrayResponse[i]);
      }
    }
  }

  queryDTO["listResults"] = arrayContesti; 

  console.log(queryDTO);

  $("#result").html("");
  $("#loader").css("display", "block");

  getData('/get_context', queryDTO)
  // After request finishes, process response data
  .done(response => processOccData(response))
  .fail(err => {
    console.log(err);
    $("#loader").css("display", "none");
    alert('Something went wrong!');
  });
//  .always(response => console.log(response));
}


$( document ).ready(function() {
  $("select").on("change", function(event) {
    var e = this.value;
    var word = "";
    if (e == "forma") {
      word = "lemmi";
      var parent = this.parentElement.parentElement.parentElement.parentElement.parentElement;
      var pp = parent.getElementsByClassName("lemmatizzata");
      console.log(pp[0]);
    }
    else {
      word = "forme";
    }
    $("#mostraFormaLemma").html(word);
  });

  var occ = 0;

  $("#btnGroupAddon").click(function() {
    $("#cooccorrenze_options").css("display", "flex");
    $("#inner_altro").css("display", "none");
    $("#inner_lemmatizzato").css("display", "flex");

    if (occ > 8) {
      alert("Hai esaurito i parametri a disposizione");
    }
    else {
      occ = occ + 1;
      
      createNewCC(occ);
      
    }
  });

  $( "#context-title" ).click(function() {
    $( "#additional_info" ).toggle( "slow", function() {
      // Animation complete.
    });
  });
  
});

function createNewCC(occ) {
  
  var new_id = "occ_" + occ;
  var new_par = document.createElement('div');
  new_par.className = "row height d-flex justify-content-center align-items-center";
  new_par.id = new_id;
  
  var search_params = document.createElement('div');
  search_params.className = "col search_params";

  var choose_param = document.createElement('div');
  choose_param.className = "row choose_param";

  var col_6 = document.createElement('div');
  col_6.className = "col-5";

  var input_group = document.createElement('div');
  input_group.className = "input-group form-check";

  var inputSel = document.createElement('input');
  inputSel.className = "barraDiRicerca form-control";
  inputSel.type = "text";

  //Create and append select list
  var selectList = document.createElement("select");
  selectList.className = "flViewBy";

  //Create and append the options
  var optionForma = document.createElement("option");
  optionForma.value = "forma";
  optionForma.text = "Forma";
  optionForma.selected = "selected";
  selectList.appendChild(optionForma);

  var optionLemma = document.createElement("option");
  optionLemma.value = "lemma";
  optionLemma.text = "Lemma";
  selectList.appendChild(optionLemma);

  var col_form = document.createElement("div");
  col_form.className = "col-2";

  var form_check = document.createElement("div");
  form_check.className = "form-check";

  var input_ricerca_espansa = document.createElement("input");
  input_ricerca_espansa.className = "ricercaEx form-check-input";
  input_ricerca_espansa.value = "ricerca_espansa";
  input_ricerca_espansa.type = "checkbox";
  input_ricerca_espansa.name = "espansa";

  var label_ricerca_espansa = document.createElement("label");
  label_ricerca_espansa.className = "form-check-label";
  label_ricerca_espansa.innerHTML = "Ricerca espansa";

  var col_form2 = document.createElement("div");
  col_form2.className = "col-2";

  var form_check2 = document.createElement("div");
  form_check2.className = "form-check";

  var input_ricerca_raddoppiata = document.createElement("input");
  input_ricerca_raddoppiata.className = "raddoppiata form-check-input";
  input_ricerca_raddoppiata.value = "raddoppiata";
  input_ricerca_raddoppiata.type = "checkbox";
  input_ricerca_raddoppiata.name = "raddoppiata";

  var label_ricerca_raddoppiata = document.createElement("label");
  label_ricerca_raddoppiata.className = "form-check-label";
  label_ricerca_raddoppiata.innerHTML = "Iniziale raddoppiata";

  var col_form3 = document.createElement("div");
  col_form3.className = "col-2";

  var form_check3 = document.createElement("div");
  form_check3.className = "form-check";

  var input_ricerca_lemmatizzata = document.createElement("input");
  input_ricerca_lemmatizzata.className = "lemmatizzata form-check-input";
  input_ricerca_lemmatizzata.value = "lemmatizzata";
  input_ricerca_lemmatizzata.type = "checkbox";
  input_ricerca_lemmatizzata.name = "lemmatizzata";
  input_ricerca_lemmatizzata.disabled = "true";

  var label_ricerca_lemmatizzata = document.createElement("label");
  label_ricerca_lemmatizzata.className = "form-check-label";
  label_ricerca_lemmatizzata.innerHTML = "Cerca solo lemmatizzate";

  var col_form4 = document.createElement("div");
  col_form4.className = "col-1";

  var form_check4 = document.createElement("div");
  form_check4.className = "form-check deleteCC";
  form_check4.id = occ;

  var trash_button = document.createElement("button");
  trash_button.className = "btn";
  var trash_icon = document.createElement("i");
  trash_icon.className = "fa fa-trash";

  input_group.appendChild(inputSel);
  input_group.appendChild(selectList);
  col_6.appendChild(input_group);

  form_check.appendChild(input_ricerca_espansa);
  form_check.appendChild(label_ricerca_espansa);
  col_form.appendChild(form_check);

  form_check2.appendChild(input_ricerca_raddoppiata);
  form_check2.appendChild(label_ricerca_raddoppiata);
  col_form2.appendChild(form_check2);

  form_check3.appendChild(input_ricerca_lemmatizzata);
  form_check3.appendChild(label_ricerca_lemmatizzata);
  col_form3.appendChild(form_check3);

  trash_button.appendChild(trash_icon);
  form_check4.appendChild(trash_button);
  col_form4.appendChild(form_check4);

  choose_param.appendChild(col_6);
  choose_param.appendChild(col_form);
  choose_param.appendChild(col_form2);
  choose_param.appendChild(col_form3);
  choose_param.appendChild(col_form4);

  search_params.appendChild(choose_param);

  new_par.appendChild(search_params);

  $("#search_form").append(new_par);
}

function changeFL(word) {
  $("#mostraFormaLemma").html(word);
}

function createFirstRow(param) {

  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center";
  row.id = "first_row";

  
    if (param.includes("forma")) {
      var colForma = document.createElement('div');
      colForma.className = "col formaCol";
      colForma.append("Forma");
      row.append(colForma);
    }

    if (param.includes("lemma")) {
      var colLemma = document.createElement('div');
      colLemma.className = "col lemmaCol";
      colLemma.append("Lemma");
      row.append(colLemma);
    }
    
    if (param.includes("cat_gr")) {
      var categoria = document.createElement('div');
      categoria.className = "col cat_gr";
      categoria.append("Categoria Grammaticale");
      row.append(categoria);
    }
    
    if (param.includes("disambiguatore")) {
      var colDis = document.createElement('div');
      colDis.className = "col disambiguatore";
      colDis.append("Disambiguatore");
      row.append(colDis);
    }
    
    if (param.includes("occ")) {
      var colOcc = document.createElement('div');
      colOcc.className = "col occorrenze";
      colOcc.append("Occorrenze");
      row.append(colOcc);
    }

  var colSel = document.createElement('div');
    colSel.className = "col seleziona_elemento";
    colSel.append("Seleziona");
    row.append(colSel);


  $("#result").append(row);

}

//Crea prima riga per contesti multipli 

function createFirstRowOcc(param) {

  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center";
  row.id = "first_row";

  var colRif = document.createElement('div');
  colRif.className = "col-4 rifCol";
  colRif.append("Riferimenti");
  row.append(colRif);

  var colInfoLemma = document.createElement('div');
  colInfoLemma.className = "col-2 lemmaCol";
  row.append(colInfoLemma);

  var colContesto = document.createElement('div');
  colContesto.className = "col-6 contestoCol";
  colContesto.append("Contesto");
  row.append(colContesto);

  /*
    if (param.includes("Titolo Abbreviato")) {
      var colTitolo = document.createElement('div');
      colTitolo.className = "col-2 abbrCol";
      colTitolo.append("Titolo Abbreviato");
      row.append(colTitolo);
    }

    if (param.includes("Rif_organico")) {
      var colRif = document.createElement('div');
      colRif.className = "col rifCol";
      colRif.append("Rif organico");
      row.append(colRif);
    }
    
    if (param.includes("pag")) {
      var colPag = document.createElement('div');
      colPag.className = "col pag";
      colPag.append("Pag");
      row.append(colPag);
    }
    
    if (param.includes("riga")) {
      var colRiga = document.createElement('div');
      colRiga.className = "col riga";
      colRiga.append("Riga");
      row.append(colRiga);
    }
    
    if (param.includes("stanza")) {
      var colStanza = document.createElement('div');
      colStanza.className = "col stanza";
      colStanza.append("Stanza");
      row.append(colStanza);
    }

    if (param.includes("tipostanza")) {
      var colTipoStanza = document.createElement('div');
      colTipoStanza.className = "col tipostanza";
      colTipoStanza.append("Tipo stanza");
      row.append(colTipoStanza);
    }

    if (param.includes("verso")) {
      var colVerso = document.createElement('div');
      colVerso.className = "col verso";
      colVerso.append("Verso");
      row.append(colVerso);
    }

    if (param.includes("contesto")) {
      var colContesto = document.createElement('div');
      colContesto.className = "col-4 contesto";
      colContesto.append("Contesto");
      row.append(colContesto);
    }*/


  $("#result").append(row);

}

//

function createRow(num, elem) {
  var cat_gr = elem["cat_gr"];
  var disambiguatore = elem["disambiguatore"];
  var forma = elem["forma"];
  var lemma = elem["lemma"];
  var occ = elem["occ"];
  var cod = elem["cod"];

  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center";
  row.id = num;

  if (elem.hasOwnProperty('forma')) {
    var colForma = document.createElement('div');
    colForma.className = "col formaCol";
    colForma.append(forma);
    row.append(colForma);
  }
  
  if (elem.hasOwnProperty('lemma')) {
    var colLemma = document.createElement('div');
    colLemma.className = "col lemmaCol";
    colLemma.append(lemma);
    row.append(colLemma);
  }
  
  if (elem.hasOwnProperty('cat_gr')) {
    var categoria = document.createElement('div');
    categoria.className = "col cat_gr";
    categoria.append(cat_gr);
    row.append(categoria);
  }
  
  if (elem.hasOwnProperty('disambiguatore')) {
    var colDis = document.createElement('div');
    colDis.className = "col disambiguatore";
    colDis.append(disambiguatore);
    row.append(colDis);
  }
  
  if (elem.hasOwnProperty('occ')) {
    var colOcc = document.createElement('div');
    colOcc.className = "col occorrenze";
    colOcc.append(occ);
    row.append(colOcc);
  }
  
  var colSel = document.createElement('div');
  colSel.className = "col seleziona_elemento";
  var inputSel = document.createElement('input');
  inputSel.className = "form-check-selected";
  inputSel.id = cod;
  inputSel.type = "checkbox";
  colSel.append(inputSel);
  row.append(colSel);

  $("#result").append(row);

}

//Crea tabella cooccorrenze

function createOccRow(num, elem, pp) {
  var titolo_abbreviato = elem["Titolo Abbreviato"];
  var contesto = elem["contesto"];
  contesto = contesto.replace(/\n/g, "<br />");
  let words = elem["highlights_combined"];
  var rif_organico = elem["Rif_organico"];
  var pag = elem["pag"];
  var riga = elem["riga"];
  var stanza = elem["stanza"];
  var tipostanza = elem["tipostanza"];
  var ts = writeStanza(tipostanza);
  var verso = elem["verso"];
  var lemma = elem["lemma"];
  var cat_gr = elem["cat_gr"];

 
  var riferimenti = titolo_abbreviato + ", " + rif_organico + ", " + ts + "." + stanza +
  " v. " + verso + ", " + pag + "." + riga;

  var info_lemma = lemma + " " + cat_gr;

  /*
  for (var i=0; i<words.length; i++) {
    contesto = contesto.replace(words[i], '<span class="highlight">' + words[i] + '</span>');
  }*/
  
  var row = document.createElement('div');
  row.className = "row height d-flex justify-content-center align-items-center pag_" + pp;
  row.id = num;
  var onClickCommand = "goToSingleContext(" + num + ", 31, 0, 0)";
  row.setAttribute("onclick", onClickCommand);

  var colRiferimenti = document.createElement('div');
  colRiferimenti.className = "col-4 rifCol";
  colRiferimenti.append(riferimenti);
  row.append(colRiferimenti);

  var colInfoLemma = document.createElement('div');
  colInfoLemma.className = "col-2 lemCol";
  colInfoLemma.append(info_lemma);
  row.append(colInfoLemma);

  var colContesto = document.createElement('div');
  colContesto.className = "col-6 contestoCol";
  colContesto.innerHTML = contesto;
  row.append(colContesto);

  /*if (elem.hasOwnProperty('Titolo Abbreviato')) {
    var colTitolo = document.createElement('div');
    colTitolo.className = "col-2 abbrCol";
    colTitolo.append(titolo_abbreviato);
    row.append(colTitolo);
  }

  if (elem.hasOwnProperty('Rif_organico')) {
    var colRif = document.createElement('div');
    colRif.className = "col rifCol";
    colRif.append(rif_organico);
    row.append(colRif);
  }

  if (elem.hasOwnProperty('pag')) {
    var colPag = document.createElement('div');
    colPag.className = "col pagCol";
    colPag.append(pag);
    row.append(colPag);
  }

  if (elem.hasOwnProperty('riga')) {
    var colRiga = document.createElement('div');
    colRiga.className = "col rigaCol";
    colRiga.append(riga);
    row.append(colRiga);
  }

  if (elem.hasOwnProperty('stanza')) {
    var colStanza = document.createElement('div');
    colStanza.className = "col stanzaCol";
    colStanza.append(stanza);
    row.append(colStanza);
  }

  if (elem.hasOwnProperty('tipostanza')) {
    var colTipoStanza = document.createElement('div');
    colTipoStanza.className = "col tipostanzaCol";
    colTipoStanza.append(tipostanza);
    row.append(colTipoStanza);
  }

  if (elem.hasOwnProperty('verso')) {
    var colVerso = document.createElement('div');
    colVerso.className = "col versoCol";
    colVerso.append(verso);
    row.append(colVerso);
  }

  if (elem.hasOwnProperty('contesto')) {
    var colContesto = document.createElement('div');
    colContesto.className = "col-4 contestoCol";
    colContesto.innerHTML = contesto;
    row.append(colContesto);
  }*/

  $("#pag_" + pp).append(row);

}

//

//WRITE TIPOSTANZA 

function writeStanza(stanza) {
  var tipo_stanza = "";

  if (stanza = 0) {
    tipo_stanza = "prosa";
  } else if (stanza = 1) {
    tipo_stanza = "verso";
  } else if (stanza = 2) {
    tipo_stanza = "distico";
  } else if (stanza = 4) {
    tipo_stanza = "terzina";
  } else if (stanza = 8) {
    tipo_stanza = "quartina";
  } else if (stanza = 16) {
    tipo_stanza = "sestina";
  } else if (stanza = 32) {
    tipo_stanza = "ottava";
  } else if (stanza = 64) {
    tipo_stanza = "sonetto";
  } else if (stanza = 99) {
    tipo_stanza = "stanza";
  } else {
    tipo_stanza = stanza;
  }

  return tipo_stanza;
}
//

//START GET SINGLE CONTEXT

function goToSingleContext(num, parole, periodi, brani) {
  let params = {"indice": num, "parole": parole, "periodi": periodi, "brani": brani};

  let queryGSC = {
    elem: arrayResponse[num],
    params: params
  }

  getData('/get_single_context', queryGSC)
    // After request finishes, process response data
    .done(response => processSingleContext(response))
    .fail(err => {
      console.log(err);
      $("#loader").css("display", "none");
      alert('Something went wrong!');
    });
}

//CREATE NEW PAGE FOR SINGLE CONTEXT

function createPage(elem) {

  $("#single-context-box").css("display", "block");

  var contesto = elem["contesto"];
  var titolo_abbreviato = "";
  var rif_organico = "";
  var tipo_stanza = "";
  var stanza = "";
  var verso = "";
  var pag = "";
  var riga = "";

  var autore = "";
  var titolo = "";
  var data_descr = "";
  var area_gen = "";
  var area_spec = "";
  var genere = "";
  var curatore = "";
  var sigla = "";

  var note = "";
  var testo_associato = "";

  console.log(elem);

  if (elem.hasOwnProperty('Titolo Abbreviato')) {
    titolo_abbreviato = elem["Titolo Abbreviato"];
  }
  if (elem.hasOwnProperty('Rif_organico')) {
    rif_organico = elem["Rif_organico"];
  }
  if (elem.hasOwnProperty('tipostanza')) {
    var ts = elem["tipostanza"];
    tipo_stanza = writeStanza(ts);
  }
  if (elem.hasOwnProperty('stanza')) {
    stanza = elem["stanza"];
  }
  if (elem.hasOwnProperty('verso')) {
    verso = elem["verso"];
  }
  if (elem.hasOwnProperty('pag')) {
    pag = elem["pag"];
  }
  if (elem.hasOwnProperty('riga')) {
    riga = elem["riga"];
  }

  if (elem.hasOwnProperty('Autore')) {
    autore = elem["Autore"];
  }
  if (elem.hasOwnProperty("Area generica")) {
    area_gen = elem["Area generica"];
  }
  if (elem.hasOwnProperty("Area specifica")) {
    area_spec = elem["Area specifica"];
  }
  if (elem.hasOwnProperty("Data descrittiva")) {
    data_descr = elem["Data descrittiva"];
  }
  if (elem.hasOwnProperty("Genere")) {
    genere = elem["Genere"];
  }
  if (elem.hasOwnProperty("sigla")) {
    sigla = elem["sigla"];
  }
  if (elem.hasOwnProperty('Curatore')) {
    curatore = "a cura di " + elem["Curatore"];
  }
  if (elem.hasOwnProperty('Titolo')) {
    titolo = elem["Titolo"];
  }

  if (elem.hasOwnProperty('nota')) {
    note = elem["nota"];
    $("#notes_box").css("display", "block");
  } else {
    $("#notes_box").css("display", "none");
  }

  if (elem.hasOwnProperty('testo associato')) {
    testo_associato = elem["testo associato"];
    $("#associated-text-box").css("display", "block");
  } else {
    $("#associated-text-box").css("display", "none");
  }

  var title_box = "<p>" + titolo_abbreviato + ", " + rif_organico + ", " + tipo_stanza + 
  "." + stanza + ", v." + verso + ", " + pag + "." + riga + "</p>";

  var add_info = "<p>" + "Autore: " + autore + "<br />" +
  "Titolo: " + titolo + "<br />" +
  "Titolo abbreviato: " + titolo_abbreviato + "<br />" +
  "Riferimenti cronologici: " + data_descr + "<br />" +
  "Area generica: " + area_gen + "<br />" +
  "Area specifica: " + area_spec + "<br />" +
  "Genere: " + genere + "<br />" +
  "Curatore: " + curatore + "<br />" +
  "Sigla: " + sigla + "<br />" +
  "</p>";

  var container_div = document.getElementsByClassName('search_params');
  var count = container_div.length;
  console.log(count);
  let highlights = elem['highlights_combined'];
  let firstNum = highlights[0];
  let ind = parseInt(firstNum);
  let arrayStrings = [];
  console.log(highlights);

  let split_index = [ind];

  if (count>0) {
    for (var i=1; i<count; i++) {
      var hh = highlights[i][0];
      var ii = parseInt(hh);
      split_index.push(ii);
    }
  }

  split_index.sort(function(a, b){return a-b});

  var ll = split_index.length;
  var tmp = 0;

  for (var j=0; j<split_index.length; j++) {
    var num = split_index[j];
    var snip = contesto.substring(tmp, num);
    tmp = num;
    arrayStrings.push(snip);
  }

  var lastSnip = contesto.substring(split_index[ll-1]);
  arrayStrings.push(lastSnip);

  console.log(arrayStrings);

  var la = arrayStrings.length;

  var newString = arrayStrings[0] + "<span class='highlight'>";

  
    for (var x=1; x<arrayStrings.length; x++) {
      var stringToAdd = arrayStrings[x].replace(" ", "</span> ");
      newString = newString + stringToAdd + "<span class='highlight'>";
    }
  

  newString = newString.replace(/\n/g, "<br />");

  document.getElementById("context-text").innerHTML = newString;
  document.getElementById("context-title").innerHTML = title_box;
  document.getElementById("additional_info").innerHTML = add_info;

  document.getElementById("notes-text").innerHTML = note;
  document.getElementById("associated-text").innerHTML = testo_associato;
  
}


$(document).on("click", ".deleteCC", function (ev) {
  var deleteID = "occ_" + this.id;
  const element = document.getElementById(deleteID);
  element.remove();

  let numb = document.getElementById("search_form").childElementCount;
  if (numb < 2) {
    $("#cooccorrenze_options").css("display", "none");
    $("#inner_altro").css("display", "flex");
    $("#inner_lemmatizzato").css("display", "none");
  }

});

$(document).on("change", ".flViewBy", function (ev) {
  var check_tipo = this.value;
  var parent = this.parentElement.parentElement.parentElement.parentElement.parentElement;
  var cc = parent.getElementsByClassName("lemmatizzata");
  
  if (check_tipo == "forma") {
    cc[0].disabled = true;
    cc[0].checked = false;
  } 
  else if (check_tipo == "lemma"){
    cc[0].disabled = false;
  }

});

$( "#context-title" ).on( "click", function() {
  $( "#additional_info" ).toggle( "slow", function() {
    // Animation complete.
  });
});

$(document).on("click", ".page-item", function (ev) {
  $(".page-item").removeClass("active");
  var name = this.id;
  this.className = "page-item active";
  var num = name.replace("getPage_", "");
  var page = "pag_" + num;
  $("#" + page).css("display", "block");
  $(".page:not(#" + page +")").css("display", "none"); 

});

$(document).on("click", "#prev", function (ev) {
  var el = document.getElementsByClassName("page-item active")[0];
  var name = el.id;
  var n = name.replace("getPage_", "");
  var num = parseInt(n) - 1;
  if (num < 0) {
    alert("No pages found");
  } else {
    var page = "pag_" + num;
    var getPage = "getPage_" + num;
    var elPage = document.getElementById(getPage);
    if (elPage !== null) {
      $(".page-item").removeClass("active");
      elPage.classList.add("active");
      $("#" + page).css("display", "block");
      $(".page:not(#" + page +")").css("display", "none");
    }
    
  }

});

$(document).on("click", "#next", function (ev) {
  var el = document.getElementsByClassName("page-item active")[0];
  var name = el.id;
  var n = name.replace("getPage_", "");
  var num = parseInt(n) + 1;
  if (num < 0) {
    alert("No pages found");
  } else {
    var page = "pag_" + num;
    var getPage = "getPage_" + num;
    var elPage = document.getElementById(getPage);
    if (elPage !== null) {
      $(".page-item").removeClass("active");
      elPage.classList.add("active");
      $("#" + page).css("display", "block");
      $(".page:not(#" + page +")").css("display", "none");
    }
    
  }

});