document.addEventListener('DOMContentLoaded', function(){

  const mainMenu = document.getElementById('main-menu');
  const spMenuToggle = document.getElementById('sp-menu-toggle');
  const addToggle = document.getElementsByClassName('menu-toggle');
  const overlay = document.getElementById('overlay');

  // Mobile menue add open class
  function spMenuButton() {

    this.classList.toggle('sp-button-open');
    mainMenu.classList.toggle('main-menu-open');


    if(overlay.style.getPropertyValue("display") == "none"){

      overlay.style.setProperty("display", "block");
      setTimeout(function(){
        overlay.classList.toggle('overlay-on');
      }
      , 100);

    }else{
      
      overlay.classList.toggle('overlay-on');
      setTimeout(function(){
        overlay.style.setProperty("display", "none");
      }
      , 500);

    }
  }


  // Accordion menue add open class
  function menuToggle() {
    this.classList.toggle('toggle-icon-switch');
    this.nextElementSibling.classList.toggle('menu-open');
  }


  // Add toggle icon
  function addToggleIcon(element){
    let menueChildren = element.getElementsByClassName('menu-item-has-children');
    for(let i = 0; i < menueChildren.length; i++) {
      menueChildren[i].firstChild.insertAdjacentHTML('afterend', '<span class="menu-toggle">▼</span>');
    }    
  }


  // Add toggle event
  function addToggleEvent(menue){
    for(let i = 0; i < menue.length; i++) {
      menue[i].addEventListener('click', menuToggle);
    }    
  }


  // Mediaquery change
  const mq = window.matchMedia( "(min-width: 992px)" );
  function mqCheck(mq) {

    if (mq.matches) {

      // Mobile menue setting destroy
      overlay.classList.remove('overlay-on');
      mainMenu.classList.remove('main-menu-open');
      spMenuToggle.classList.remove('sp-button-open');
      overlay.style.setProperty("display", "none");
      
      
      const removeToggle = mainMenu.getElementsByClassName('menu-toggle');
      for(let i = 0; i < removeToggle.length; i++) {
        removeToggle[i].nextElementSibling.classList.remove('menu-open');
      } 
      while (removeToggle.length) {
        removeToggle.item(0).remove()
      }
 
    } else {

      // Mobile menue setting
      addToggleIcon(mainMenu);

      //const addSpToggle = document.getElementsByClassName('menu-toggle');
      addToggleEvent(addToggle);
    }
  }
  mqCheck(mq);
  mq.addEventListener('change', mqCheck);

    
  // Widget menue icon setting
  const headerWidget = document.getElementById('site-header-widget');
  addToggleIcon(headerWidget);
  const sideBar = document.getElementById('sidebar-area');
  addToggleIcon(sideBar);
  const footerWidget = document.getElementById('site-footer-widget');
  addToggleIcon(footerWidget);


 // Menue eVent setting
  spMenuToggle.addEventListener('click', spMenuButton);

  addToggleEvent(addToggle);

} );