function researchRoom()
{
  var research = document.getElementById('research').value;

  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'api/request.php?research='+encodeURI(research), true);

  xhr.onload = function() {
    var table = document.getElementById('research-results');
    table.innerHTML = '';

    document.getElementById('research-results-table').style.display = 'block';

    res = JSON.parse(xhr.responseText);

    for (var i=0; i<res.length; i++) {
      table.innerHTML += '<tr>\
        <th scope="row">\
          <a href="#' + res[i].id + '">' + res[i].name + '</a>\
        </th>\
        <td>' + '??' + '</td>\
      </tr>';
    }
  };

  xhr.send(null);
}

// Update the current room based on the current anchor
function updateCurrentRoom()
{
  // Hide room research modal
  var modal = bootstrap.Modal.getInstance(document.getElementById('room-research-modal'));
  if (modal != null) {
    modal.hide();
  }

  var id = window.location.hash;
  console.log(id);
}

function putWaitNetworkScreen()
{
  outputDiv.innerHTML = "Récupération des informations auprès du serveur...";
}

function salleInfosToHtml(salle)
{
  titres = ((salle.aliaz.length!=0)?("<h2>"+salle.aliaz.join("</h2> ou <h2>")+"</h2>"):"Aucun alias connu.");
  locataires = salle.locataires.join(", ");
  return titres + ((salle.description!=null)?("\n<br/>\n" + salle.description):"") + ((salle.locataires.length!=0)?("\n<br/>\n<b>Locataires</b>: " + locataires):"");
}

function httpGetAsync(theUrl, callback)
{
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
      callback(xmlHttp.responseText, xmlHttp.status);
    }
  }
  xmlHttp.open("GET", theUrl, true);
  xmlHttp.send(null);
}

function initSvgSupport()
{
  var plan = document.getElementById('plan');

  svgPanZoom(plan, {zoomEnabled: true, controlIconsEnabled: true});

  var salles = plan.contentDocument.getElementsByClassName('svg-salle');
  var outputDiv = document.getElementById('selectedSalleInfos');

  function selectSalle(e) {
    if(document.lastSelectedSalle != null) {
      document.lastSelectedSalle.classList.remove('current-room');
    }

    document.lastSelectedSalle = e.target;
    window.clearTimeout(document.wnsTimeout);
    document.wnsTimeout = window.setTimeout(putWaitNetworkScreen, 400);

    httpGetAsync("api/request.php?salle="+e.target.id.substring("path-salle-".length), function (s,errcode){
      window.clearTimeout(document.wnsTimeout);
      try{
        if (s=="404") {
          outputDiv.innerHTML = "Aucune information disponible pour cette salle. Si vous en avez, indiquez-les à l'adresse <a href=mailto:samy.avrillon@ens-lyon.fr>samy.avrillon@ens-lyon.fr</a> en indiquant l'identifiant de la salle : "+document.lastSelectedSalle.id.substring("path-salle-".length);
          return;
        }
        ss = JSON.parse(s)
        if (document.lastSelectedSalle.id==("path-salle-"+ss["id"])) {
          if (errcode==200) {
            outputDiv.innerHTML = salleInfosToHtml(ss);
          } else {
            outputDiv.innerHTML = "Erreur lors de l'appel à l'interface php: ERREUR "+errcode;
          }
        }
      } catch(err) {
        console.error("Les données récupéréés de cette salle ne sont pas valides.");
        console.error(err);
      }
    });

    e.target.classList.add('current-room');
  }

  for (var i = 0; i < salles.length; i++) {
    salles[i].addEventListener('click', selectSalle);
  }
}


window.addEventListener("DOMContentLoaded", (event) => {
  // Init SVG
  var plan = document.getElementById('plan');
  if (plan.contentDocument == null) {
  	plan.addEventListener('load', initSvgSupport);
  } else {
  	initSvgSupport();
  }

  // Update the current room
  if (window.location.hash != "") {
    updateCurrentRoom();
  }

  window.onhashchange = function() {
    updateCurrentRoom();
  }
});