/* ///////////////////////////////////////////
Plus d'informations liées à la solution  : 
////////////////////////////////////////////// 
*/

/*
Toutes le fonctions ci-dessous peuvent être optimisées
elles sont même volontairement non optimisées
Elles sont là juste pour vous présenter le concept à vous de les améliorer 
*/


function moveElement(oNav, bRight){
  /*
  * iIncrementeVitesse ne pas limite il peux vite monter 
  * il faut le limiter
  */
  
  if(bRight){
    oNav.scrollLeft +=  iIncremente + iIncrementeVitesse;
  }else{
    oNav.scrollLeft -= iIncremente + iIncrementeVitesse;
  }
}//fct

/*
* @param Event oEvent
*/
function deplacer(oEvent){
  let oBt = oEvent.currentTarget,
      sClass = oBt.className,
      sType = oEvent.type;
  /* Le système de déplacement est assez basic à toi de trouver une bonne formule
  * notament pour que cela fonction avec test menu deroulant
  * je pense qui faut decaler non pas par incrémentation mais par la taille de tes Li
  */
  if(sType == 'mouseup'){
    clearInterval(iTimer);
    iIncrementeVitesse = 0.5;
  }else{
    let oNav = document.getElementById("container"),
        isRight = sClass == sClassBtRight;
    moveElement(oNav,isRight);
    iTimer = setInterval(
      function() {
        iIncrementeVitesse += 0.5;
        moveElement(oNav, isRight);
      } , 100);
  }
}

const sClassBtRight= "BtNavBarRight",
      sClassBtLeft= "BtNavBarLeft",
      iIncremente = 10; 
let iTimer =null, iIncrementeVitesse = 0.5;
//Quand les Elements sont accesssibles 
// Dom loaded
document.addEventListener('DOMContentLoaded',function(){
  /* Creation des deux boutons */
  let oBar = document.getElementById("navBar"),
      oBtLeft = document.createElement("div"),
      oBtRight = document.createElement("div");
  oBar.appendChild(oBtRight); 
  oBar.insertBefore(oBtLeft, oBar.firstElementChild);
  oBtRight.innerHTML = ">";
  oBtLeft.innerHTML = "<"
  oBtRight.className = sClassBtRight;
  oBtLeft.className = sClassBtLeft;
  oBtLeft.addEventListener("mousedown",deplacer);
  oBtRight.addEventListener("mousedown",deplacer);
  document.addEventListener("mouseup",deplacer); 
});