var jsonassoglobal = null;
var jsoncateglobal = null;
var tabnomasso = null;
var tableauPage = null;
var nombreResultPage = 15;
var nbrDePage = null;


// hauteur dynamique IFRAME, variables supplémentaires :
var hauteurPixelResultat = 80; // la hauteur en pixel moyenne d'un résultat (va servir pour régler la hauteur dynamique)
var nombreResultats; // on va stocker ici le nombre de résultat


// hack pour élargir la page sur merignac.com
// document.getElementsByClassName("container")[5].style.paddingLeft = "1px";
// document.getElementsByClassName("container")[5].style.paddingRight = "1px";


// point d'entrée de l'annuaire : en ASYNCHRONE
loadJSONAsso();


/// Chargement du JSON des Associations
function loadJSONAsso(){
  var rawFile = new XMLHttpRequest();
  //rawFile.overrideMimeType("application/json");
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
      jsonassoglobal = JSON.parse(this.response);
      tabnomasso = tableauAssoClean(jsonassoglobal);
      loadJSONCategorie();

      console.log("Associations chargées");

      // masque l'animation de chargement le temps de la requette (asynchrone) pour récupérer les données... !
      document.getElementById("chargement").setAttribute("style", "display:none;");
      // et démasque le menu au premier chargement de l'application (pour que aç ne soit pas trop laid au démarrage...)
      document.getElementById("divcat").setAttribute("style", "display:block;");
      document.getElementById("contenu").setAttribute("style", "display:block;");
    }
  }
  //rawFile.open("GET", "http://gma.merignac.com/getfiles.php?json=1", true);
  rawFile.open("GET", "/sites/default/files/merignac/annuaire-association/getfiles1.json", true);
  rawFile.send(null);
}

/// Chargement du JSON des Catégorie
function loadJSONCategorie(){
  var xhttp = new XMLHttpRequest();
  //xhttp.overrideMimeType("application/json");
  //xhttp.open("GET", "getfiles.php?json=2", true);
  xhttp.onreadystatechange = function(){
    if(xhttp.readyState === 4 && xhttp.status == "200") {
      jsoncateglobal = JSON.parse(this.response);
      console.log("Catégories chargées");
      addOptionActivite();
      Resultat();
    }
  }
  // xhttp.open("GET", "http://gma.merignac.com/getfiles.php?json=2", true);
  xhttp.open("GET", "/sites/default/files/merignac/annuaire-association/getfiles2.json", true);
  xhttp.send(null);
}

function tableauAssoClean(jsonassoglobal){
  var tab = [];
  for(x in jsonassoglobal){
    var str = nettoyerString(jsonassoglobal[x].nom)
    tab.push(str);
  }
  return tab;
}

//Ajoute les catégorie au menu déroulant
function addOptionActivite() {



  // populate le menu complet :
  var menu = document.getElementById("menucategorie");
  for(x in jsoncateglobal){
    var option = document.createElement("option");
    option.text = jsoncateglobal[x].nom;
    menu.add(option);
  }
}

//Ajoute les sous-catégorie au menu déroulant
function addOptionsousActivite(){
  var sousmenu = document.getElementById("menusouscategorie");
  var menu = document.getElementById("menucategorie");
  var tab = [];
  removeOptions(sousmenu);
  for(x in jsoncateglobal){
    if(jsoncateglobal[x].nom == menu.value)
    {
      for(y in jsoncateglobal[x].sousactivite){
        var option = document.createElement("option");
        option.text = jsoncateglobal[x].sousactivite[y];
        sousmenu.add(option);
        tab += y;
      }
    }
  }
  afficheSousCat(tab.length>0);
}

function afficheSousCat(condition){
  if(condition){
    document.getElementById("divcat").setAttribute("class", "column is-one-quarter");
    //document.getElementById("divsouscat").style = "display:block";
    document.getElementById("divsouscat").setAttribute("style", "display:block");
  }
  else{
    document.getElementById("divcat").setAttribute("class", "column is-one-quarter"); // MAJ MD : 24 sept
    //document.getElementById("divsouscat").style = "display:none";
    document.getElementById("divsouscat").setAttribute("style", "display:none");
  }
}

//supprime des options d'un selectbox (utilisé pour supprimer les sous catégorie quand on change de catégorie)
function removeOptions(selectbox){
  for(var i = selectbox.options.length - 1; i >= 0 ; i--)
  {
    selectbox.remove(i);
  }
  var option = document.createElement("option");
  option.text = "Tous";
  option.setAttribute("value","all");
  selectbox.add(option);
}

function rechercheActivite(){
  addOptionsousActivite();
  Resultat();
}

function cleanRecherche(){
  document.getElementById("resultatrecherche").innerHTML = "";
}

function Resultat(){
  cleanRecherche();
  var inputasso = document.getElementById('assorecherche').value;
  var selectcat = document.getElementById('menucategorie').value;
  var selectsscat = document.getElementById('menusouscategorie').value;
  inputasso = nettoyerString(inputasso);
  var tab = [];
  if(inputasso!=""){
    if(selectcat!=="all"){
      if(selectsscat!="all"){
        RechercheAssoParSousActiviteEtNom(inputasso, selectsscat, tab);
      }else{
        RechercheAssoParActiviteEtNom(inputasso, selectcat, tab);
      }
    }else{
      RechercheAssoParNom(inputasso, tab);
    }
  }else{
    if(selectcat!="all"){
      if(selectsscat!="all"){
        RechercheAssoParSousActivite(selectsscat, tab);
      }else{
        RechercheAssoParActivite(selectcat, tab);
      }
    }else{
      RechercheTousAsso(tab);
    }
  }
  tableauPage = TableauTableauPage(tab, nombreResultPage);
  AucunResultat(tab.length!=0);
  Pagination(nombreResultPage, tab, "listPagination", tableauPage[0]);

  // ajout pour le nombre de résultat et le IFRAME dynamique
  nombreResultats = tab.length;
  console.log("le nombre de résultats est de " + nombreResultats);
  //hauteurDynamique();
}

// fonction pour régler dynamiquement la hauteur de l'IFRAME
function hauteurDynamique(){
  //var marge = 100; // une marge de 100 pixel en plus pour prendre en compte la zone de recherche
  //var hauteur = (nombreResultats * hauteurPixelResultat) + marge;
  //console.log("hauteur en pixel : " + hauteur);
  // on va récupérer la taille du conteneur et l'afficher pour l'adapter à l'iframe
  var tailleConteneurPage = document.getElementById("conteneur").clientHeight;
  //window.parent.updateHauteur(nombreResultats);// appel de la fonction dans la page parente.
  //window.parent.updateHauteur(tailleConteneurPage);// appel de la fonction dans la page parente.

}

function TableauTableauPage(tab, nbrResultatPage){
  var tableau = [];
  for(var x=0; x<tab.length; x+=nbrResultatPage){
    tableau.push(tab.slice(x, x+nbrResultatPage));
  }
  return tableau;
}

function RechercheTousAsso(tab){
  for (x in tabnomasso){
    tab.push(x);
  }
}

// fonction pour rechercher dans les texte de description des associations
function rechercheDansDescription(input, tab){

  for (y in jsonassoglobal){

    let description = jsonassoglobal[y]["desc"].toLowerCase();
    let recherche = input.toLowerCase();

    if (description.search(recherche)!=-1){

      // Pour éviter les doublons on ajoute l'association que si cette dernière n'est pas déjà présent via la recherche de 1)
      var dejaDansTab = tab.find(function(v){
        if (v == y) {
          return true;
        }
      });

      if (!dejaDansTab){ // elle n'est pas présente dans tab, alors on l'ajoute à la recherche
        tab.push(y);
      }

    }
  }

}

function RechercheAssoParNom(input, tab){

  // 1) recherche par nom d'association
  for (x in tabnomasso){
    if (tabnomasso[x].search(input)!=-1){
      tab.push(x);
    }
  }

  // 2) recherche élargie à la description
  rechercheDansDescription(input, tab);


}

function RechercheAssoParActivite(activite, tab){
  for (x in tabnomasso){
    if (activite==jsonassoglobal[x].activite){
      tab.push(x);
    }
  }
}

function RechercheAssoParActiviteEtNom(input, activite, tab){
  for (x in tabnomasso){
    if (tabnomasso[x].search(input)!=-1 && activite==jsonassoglobal[x].activite){
      tab.push(x);
    }
  }
}

function RechercheAssoParSousActivite(sousact, tab){
  for (x in tabnomasso){
    if (sousact==jsonassoglobal[x].sousactivite){
      tab.push(x);
    }
  }
}

function RechercheAssoParSousActiviteEtNom(input, sousact, tab){
  for (x in tabnomasso){
    if (tabnomasso[x].search(input)!=-1 && sousact==jsonassoglobal[x].sousactivite){
      tab.push(x);
    }
  }
}

//masque la div aucunresultat si la condition est true /affiche la div aucun resultat si la condition est false
function AucunResultat(condition){
  if(condition)
    //document.getElementById("aucunresultat").style = "display:none";
    document.getElementById("aucunresultat").setAttribute("style" , "display:none");
  else{
    //document.getElementById("aucunresultat").style = "display:block";
    document.getElementById("aucunresultat").setAttribute("style" , "display:block");
  }
}


//affichage des résultat dans la page HTML
function createTableHTML(x){
  var tableau = document.getElementById("resultatrecherche");
  var ligne = tableau.insertRow(-1);
  var colonne1 = ligne.insertCell(0);
  colonne1.innerHTML += "<div class='resultattitre'><a href='" + jsonassoglobal[x].url + "'>" + jsonassoglobal[x].nom + "</a></div>";
  colonne1.innerHTML += "<div class='categorie'>"+ jsonassoglobal[x].activite + affichageSousCategorie(x) +"</div>"
  colonne1.innerHTML += "<p class='descriptionAsso'>" + TronqueDescri(200, jsonassoglobal[x].desc) + "</p>";
}

function boucleTableHTML(tab){
  for(var x in tab)
    createTableHTML(tab[x]);
}

function affichageSousCategorie(x){
  var str = "";
  if(jsonassoglobal[x].sousactivite != "")
    str = " > "+ jsonassoglobal[x].sousactivite;
  return str;
}

//permet de ne pas prendre en compte la case et les accents lors des recherches
function nettoyerString(str){
  str = str.toLocaleLowerCase();
  str = str.replace(/[" "]/g,"");
  //str = str.replace(/[" "]/g,"").replace(/[èéêë]/g,"e");
  //str = str.replace(/[àáâãäå]/g,"a").replace(/[èéêë]/g,"e").replace(/[ç]/g,"c").replace(/[" "]/g,"").replace(/["ïî"]/g,"i").replace(/["ô"]/g,"o").replace(/["ù"]/g,"u").replace(/["œ"]/g,"oe");
  return str;
}

function TronqueDescri(taille, stringTosplit){
  var arrayOfStrings = stringTosplit.split(" ");
  var str = "";
  var compter = 0;
  if(stringTosplit.length>=taille*window.outerWidth/1240){
    for(x in arrayOfStrings)
    {
      if(compter<=taille*window.outerWidth/1240){
        str += arrayOfStrings[x] + " ";
        compter += arrayOfStrings[x].length;
      }else{
        str += "...";
        break;
      }
    }
  }else
    str = stringTosplit;
  return str;
}

function ChangerPage(index, e){
  buttonPageHTML(e);
  index -= 1;
  cleanRecherche();
  boucleTableHTML(tableauPage[index]);
  AfficherPrecedentSuivant();

}

function AfficherPrecedentSuivant(){
  var page = pageActive();
  if(nbrDePage > 1 && page.getAttribute("page")!=1)
    document.getElementById("precedent").setAttribute("style", "display:block");
  else
    document.getElementById("precedent").setAttribute("style", "display:none");

  if(nbrDePage > 1 && page.getAttribute("page")!=nbrDePage)
    document.getElementById("suivant").setAttribute("style", "display:block");
  else
    document.getElementById("suivant").setAttribute("style", "display:none");
}


function buttonPageHTML(e){
  var variable = document.getElementsByClassName("pagination-link is-current");
  if(variable.length > 0){
    variable[0].setAttribute("class","pagination-link");
  }
  e.setAttribute("class","pagination-link is-current");
}

function Pagination(nbrResultatPage, tabResultat, listPagination, tableau){
  nbrDePage = Math.trunc(tabResultat.length/nbrResultatPage);
  if((tabResultat.length%nbrResultatPage)!=0)
    nbrDePage += 1;
  document.getElementById(listPagination).innerHTML = "";
  if(nbrDePage > 1  && nbrDePage <= 7){
    createPaginationHTML(listPagination, nbrDePage);
    ChangerPage(1, document.getElementById("listPagination").children[0].children[0]);
  }else if(nbrDePage > 7 ){
    createGrandPaginationHTML(listPagination, nbrDePage);
  }else{
    console.log(nbrDePage);
    AfficherPrecedentSuivant();
    boucleTableHTML(tableau);
  }
}



function createPaginationHTML(listPagination, nbrDePage){
  for(var x=1; x<nbrDePage+1 ;x++){
    document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link' page="+x+" aria-label='Page "+x+"' onclick='ChangerPage("+x+", this)' aria-current='page'>"+x+"</a></li>";
  }
}


function createGrandPaginationHTML(listPagination, nbrDePage){
  document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link is-current' page='1' aria-label='Page 1' onclick='ChangerPageGrand(1, this)' aria-current='page'>1</a></li>"
  document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link' page='2' aria-label='Page 2' onclick='ChangerPageGrand(2, this)' aria-current='page'>2</a></li>"
  document.getElementById(listPagination).innerHTML +=" <li><span class='pagination-ellipsis'>&hellip;</span></li>"
  document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link' page='"+nbrDePage+"' aria-label='Page "+nbrDePage+"' onclick='ChangerPageGrand("+nbrDePage+", this)' aria-current='page'>"+nbrDePage+"</a></li>"
  ChangerPageGrand(1, document.getElementsByClassName('pagination-link is-current')[0]);
}

function ChangerPageGrand(x, e){
  ChangePaginationHTML(nbrDePage, "listPagination", x);
  x -= 1;;
  cleanRecherche();
  boucleTableHTML(tableauPage[x]);
  AfficherPrecedentSuivant();
  window.scrollTo(0, 0);
}

function ChangePaginationHTML(nbrDePage, listPagination, x){
  document.getElementById(listPagination).innerHTML = "";
  if(x!=2 && x!= 1){
    document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link' page='1' aria-label='Page 1' onclick='ChangerPageGrand(1, this)' aria-current='page'>1</a></li>"
    document.getElementById(listPagination).innerHTML += "<li><span class='pagination-ellipsis'>&hellip;</span></li>"
  }if((x-1)>0)
    document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link' page='"+(x-1)+"' aria-label='Page "+(x-1)+"' onclick='ChangerPageGrand("+(x-1)+", this)' aria-current='page'>"+(x-1)+"</a></li>"
  document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link is-current' page='"+(x)+"' aria-label='Page "+(x)+"' onclick='ChangerPageGrand("+(x)+", this)' aria-current='page'>"+(x)+"</a></li>"
  if( x+1 < nbrDePage)
    document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link' page='"+(x+1)+"' aria-label='Page "+(x+1)+"' onclick='ChangerPageGrand("+(x+1)+", this)' aria-current='page'>"+(x+1)+"</a></li>"
  if(x!=(nbrDePage)){
    if((x+1)!=(nbrDePage)){
      document.getElementById(listPagination).innerHTML +=" <li><span class='pagination-ellipsis'>&hellip;</span></li>"
    }
    document.getElementById(listPagination).innerHTML += "<li><a class='pagination-link' page='"+nbrDePage+"' aria-label='Page "+nbrDePage+"' onclick='ChangerPageGrand("+nbrDePage+", this)' aria-current='page'>"+nbrDePage+"</a></li>";
  }

}


function pagePrecedente(){
  var page = pageActive();
  if(page.getAttribute("page")>1 && nbrDePage <= 7)
    ChangerPage(page.getAttribute("page")-1, document.getElementById("listPagination").children[page.getAttribute("page")-2].children[0]);
  else if(page.getAttribute("page")>1 && nbrDePage > 7)
    ChangerPageGrand(page.getAttribute("page")-1, document.getElementById("listPagination").children[page.getAttribute("page")-2]);

  //  on remonte en haut des résultats de recherche après avoir cliqué sur le bouton suivant :
  //window.scrollTo(0, 0);
  window.location.href = "#0";
  window.location.href = "#annuaireCSS";

}

function pageSuivante(){
  var page = pageActive();
  if(page.getAttribute("page")<document.getElementById("listPagination").children.length && nbrDePage <= 7)
    ChangerPage(parseInt(page.getAttribute("page"))+1, document.getElementById("listPagination").children[page.getAttribute("page")].children[0]);
  else if(page.getAttribute("page")<nbrDePage && nbrDePage > 7)
    ChangerPageGrand(parseInt(page.getAttribute("page"))+1, document.getElementById("listPagination").children[page.getAttribute("page")]);

  //  on remonte en haut des résultats de recherche après avoir cliqué sur le bouton suivant :
  //window.scrollTo(0, 0);
  window.location.href = "#0";
  window.location.href = "#annuaireCSS";

}

function pageActive(){
  return document.getElementsByClassName("pagination-link is-current")[0];;
}