  window.addEventListener('load', function() { 
    window.scrollTo(0,0);
  }, false);

  /*
   * Personnalisation
   * Que se passe-t-il lorsque la bannière est invisible ?
   */
  function setLogoVisiblity(visibilityFlag) {
    let element = document.querySelector("nav>*>#settings");
    let value = 'hidden';
    if (visibilityFlag) value = "visible";
    element.style.visibility = value;
  }

  function setNavbarStickOnTop(topFlag) {
    let element = document.querySelector("#nav");
    if (topFlag) element.style.setProperty('top', '0px');
    else element.style.removeProperty('top');
  }

  function setDataGridFootSticky(stickyFlag) {
    let element = null;
    if (stickyFlag) {
      //
      // Mettre le tfoot sticky au bottom
      //
      element = document.querySelector("#datagrid>table>tfoot");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('bottom', '0px');
      element.style.setProperty('z-index', '30');
    } else {
      element = document.querySelector("#datagrid>table>tfoot");
      element.style.setProperty('position', 'relative');
      element.style.setProperty('z-index', '10');
    }
  }

  /*
   * Personnalisation
   * Que se passe-t-il lorsque la synthèse est invisible ?
   */
  function setDatagridFirstColSticky(stickyFlag) {
    let element = null;

    if (stickyFlag) {
      /*
       * Mettre la première case sticky au top left
       */
      element = document.querySelector("#datagrid>table>thead>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '30');

      //
      // Mettre la dernière case sticky au bottom left
      //      
      element = document.querySelector("#datagrid>table>tfoot>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '30');

    } else {
      element = document.querySelector("#datagrid>table>thead>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '10');

      element = document.querySelector("#datagrid>table>tfoot>tr>th:first-child");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('left', '0px');
      element.style.setProperty('z-index', '10');
    }
  }

  function setDatagridHeadSticky(stickyFlag) {
    let element = document.querySelector("#datagrid>table>thead");
    let navbar = document.querySelector("nav");
    let offset = navbar.offsetHeight;

    if (stickyFlag) {
      /*
       * Mettre le thead sticky au top
       */
      //element = document.querySelector("#datagrid>table>thead");
      element.style.setProperty('position', 'sticky');
      element.style.setProperty('top', offset+'px');
      element.style.setProperty('z-index', '30');
    } else {
      //element = document.querySelector("#datagrid>table>thead");
      element.style.setProperty('position', 'relative');
      element.style.setProperty('top', '0px');
      element.style.setProperty('z-index', '10');
    }
  }

  function smoothJump(hash) {
    location.replace("#" + hash);
  }

  function documentGetElementById(id){
    element = document.getElementById(id);
    if (element === null ) return '';
    return element.value;
  }

  function setElementHeight(elementSelector, elementHeight) {
    let element = document.querySelector(elementSelector);
    element.style.height = elementHeight;
  }

  function slideElement(elementSelector, elementHeight) {
    let element = document.querySelector(elementSelector);
    element.style.transition = "all 2s ease-in-out";
    setElementHeight(elementSelector, elementHeight);
  }

  function scrollToElement(elementSelector) {
    let element = document.querySelector(elementSelector);
    element.scrollIntoView({ behavior: 'smooth' });
  }

  function gotoHelp() {
    scrollToElement('#synthesis');
    setTimeout(scrollToElement, 500, '#footer');
  }

  function gotoTop() {
    let element = document.querySelector('header');
    window.scrollTo(0, element.offsetHeight + 1);
  }

  function headerIsVisible(flagVisible) {
    setLogoVisiblity(!flagVisible);
    if (!flagVisible) gotoTop();
  }

  function synthesisTopIsNowVisible(entry) {

    setDatagridHeadSticky(false);
    setDataGridFootSticky(false);
    /*
    setDatagridFirstColSticky(true);
    */

    myLog('Trigger synthesis is visible');
  }

  function synthesisTopIsNowInvisible(entry) {

    setDatagridHeadSticky(true);
    setDataGridFootSticky(true);
    /*
    setDatagridFirstColSticky(true);
    */

    myLog('Trigger synthesis is invisible');
  }

  function initDatagrid()
  {
    let type = getContexteValeur('type');
    switch(type){
      case 'TODO':
        initDatagridTodos();    
        break;
      default:
        initDatagridItems();    
        break;
    }
  }

  function changeModeAffichage(valeur, texte)
  {
    let type='TODO';

    switch(valeur){
      case 'absences':
      case 'releases':
      case 'rdv':
      case 'feries':
      case 'taches':
        type='TACHE';
        break;
    }

    setContexteValeur('mode_affichage', valeur);

    setContexteValeur('type_courant', type);
    setFiltreValeur('type',type);

    setFilAriane(['Home', 'List', texte]);

    return afficherItems();

  }

  function changeModeAffichageEvent(e)
  {
    return changeModeAffichage(e.target.value, e.target.options[e.target.selectedIndex].text);
  }

  function changeAffichageItemsTermine(e)
  {
    setContexteValeur('termine', e.target.value);

    setFiltreValeur('status',e.target.value);

    afficherItems();
  }

  function changeAffichageItemsPrestations(e)
  {
    setContexteValeur('prestation', e.target.value);

    afficherItems();
  }
 
  function changeFiltreClient(e)
  {
    let valeur = e.target.value;
    if (valeur == 'ALL') valeur='';
    setContexteValeur('client', valeur);

    setFiltreValeur('client', valeur);

    afficherItems();
  }

  function changeAffichageNiveauxEvent(e)
  {
    setContexteValeur('level', e.target.value);

    setFiltreValeur('level', e.target.value);

    afficherItems();
  }

  function changeCalendarEvent(e)
  {
    let valeur = todayStringDate;
    switch(parseInt(e.target.value)) {
      case 2 :
        valeur = todayStringDate.substring(0,4)+'0101';
        break;
    }
    setContexteValeur('debut',valeur);
    setFiltreValeur('debut', valeur);
    afficherItems();
  }

  function updateValue(e) {
    if (e.target.value != '') editerItem(-1, e.target.value);
    e.target.value = '';
  }

  function afficher_synthese(mode) {
    let synthesis_body = document.querySelector('#synthesis_body');
    if (synthesis_body) {
      synthesis_body.innerHTML='';
      let template = document.querySelector('#synthesis_body_' + mode);
      if (template) {
        let contenu = document.importNode(template.content, true);
        if (contenu) synthesis_body.appendChild(contenu);
      }
    }
  }

  function afficher_footer(mode) {
    let footer_body = document.querySelector('footer');
    if (footer_body) {
      footer_body.innerHTML='';
      let template = document.querySelector('#footer_' + mode);
      if (template) {
        let contenu = document.importNode(template.content, true);
        if (contenu) footer_body.appendChild(contenu);
      }
    }
  }

  function activeMenu(element) {
    datagridEmptyLines(50);

    activeMode(element.innerText);

    gotoTop();
  }

  function modeToAffichage(mode)
  {
    let retour='taches';
    switch (mode) {
      case 'Releases':
        retour='releases';
      break;
      case 'Hollidays':
        retour='feries';
      break;
      case 'Rendez-Vous':
        retour='rdv';
      break;
      case 'Rendez-Vous':
        retour='rdv';
      break;
      case 'Items':
        retour='items';
      break;
      case 'Project':
        retour='prestations';
      break;
      default:
      case 'Tasks':
        retour='taches';
      break;
    }
    return retour;
  }

  function activeMode(mode) {
    setContexteValeur('type_courant', 'TODO');
    setContexteValeur('items_type', 'items');

    switch (mode) {
      case 'Tree':		    
      case 'TreeList' :
      case 'List':
        mode='Tasks';
      case 'Tasks':
      case 'Releases':
      case 'Hollidays':
      case 'Rendez-Vous':
      case 'Items':
        setContexteValeur('mode_feuille', false);
        setContexteValeur('type_courant', 'TACHE');

        setContexteValeur('mode_affichage', modeToAffichage(mode));

        afficher_synthese('taches');
        afficher_footer('taches');

        setFilAriane(['Home', 'TreeList', mode]);

        initDatagridItems();
      break;

      case 'Project':
        setContexteValeur('mode_feuille', false);
        setContexteValeur('termine', true);
        setContexteValeur('prestation', true);
        setContexteValeur('type_courant', 'PRESTATION');

        setContexteValeur('mode_affichage', modeToAffichage(mode));

        afficher_synthese('project');
        afficher_footer('taches');

        setFilAriane(['Home', 'Project']);

        initDatagridItems();
      break;

      case 'Plan':
      case 'Planning':
        
        setFilAriane([mode]);

        setContexteValeur('type_courant', 'TODO');
        setContexteValeur('mode_feuille', true);
        setContexteValeur('mode_affichage', 'planning');
        setContexteValeur('termine', 'non');

        afficher_synthese('planning');
        afficher_footer('planning');

        initDatagridItems();
      break;

      case 'Calendar':
        setFilAriane(['Todo', mode]);

        setContexteValeur('mode_feuille', true);
        setContexteValeur('mode_affichage', 'calendar_intervenants');
        setContexteValeur('debut', todayStringDate);

        afficher_synthese('calendrier');
        afficher_footer('calendrier');

        initDatagridItems();
      break;

      case 'Administration':
        setFilAriane(['Todo', mode]);
        initAdministration();
      break;

      case 'Status':
        setFilAriane(['Todo', 'Administration', mode]);
        initDatagridStatus();
      break;

      case 'Clients':
        setFilAriane(['Todo', 'Administration', mode]);
        initDatagridClients();
      break;

      case 'Collaborateurs':
        setFilAriane(['Todo', 'Administration', mode]);
        initDatagridCollaborateurs();
      break;

      default:
      case 'Home':
        mode='Todo';
      case 'Todo':
        setFilAriane(['Home', mode]);

        setDefaultContext();

        setContexteValeur('type', 'TODO');
        setContexteValeur('items_type', 'todos');
        setContexteValeur('mode_affichage', 'todos');
        setContexteValeur('mode_feuille', true);
        setContexteValeur('parent', '1');

        afficher_synthese('accueil');
        afficher_footer('accueil');

        initDatagridItems();
      break;
    }
  }

  function initAdministration() {
    let element = document.querySelector('#synthesis_middle');
    contenu = '<div style="padding:0px 10px;display: flex;flex-wrap: nowrap;justify-content: space-between;">';
    contenu += '<a onclick="activeMenu(this)">Status</a>';
    contenu += '<a onclick="activeMenu(this)">Clients</a>';
    contenu += '<a onclick="activeMenu(this)">Collaborateurs</a>';
    contenu += '</div>';
    element.innerHTML = contenu;

  }

  function setDefaultContext()
  {
    // Contexte de départ
    setContexteValeur('level', '9999');
    setContexteValeur('parent', '1');
    setContexteValeur('parent_level','0');
    setContexteValeur('client', '');
    setContexteValeur('termine', 'oui');
  }

  // UI
  setLogoVisiblity(false);

  // Contexte de départ
  setContexteValeur('intervenant', 'Anonymous');

  init_filtres(['type','client','debut','fin','level'])

  // GO !
  activeMode('Todo');

  // Get the CSS root element
  const rootCSS = document.querySelector(':root');

  // Create a function for getting a variable value
  function CSSgetSombre() {
    let rs = getComputedStyle(rootCSS);
    alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre'));
  }

  function CSSsetSombre(vr, vg, vb) {
    // Couleur
    rootCSS.style.setProperty('--r-sombre', vr);
    rootCSS.style.setProperty('--g-sombre', vg);
    rootCSS.style.setProperty('--b-sombre', vb);
    // Logo
    // let logo = document.querySelector('header>#logo>svg');
    // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')';
  }
  function CSSsetClair(vr, vg, vb) {
    // Couleur
    rootCSS.style.setProperty('--r-clair', vr);
    rootCSS.style.setProperty('--g-clair', vg);
    rootCSS.style.setProperty('--b-clair', vb);
  }

  function CSSswitchCouleurTexte() {
    let rs = getComputedStyle(rootCSS);
    let actuel = rs.getPropertyValue('--couleur-texte');
    if (actuel == 'black')
      rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)');
    else
      rootCSS.style.setProperty('--couleur-texte', 'black');
  }
