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

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

  //const menuToggle = document.getElementsByClassName('menu-toggle');

  const headerWidget = document.getElementById('site-header-widget');
  const sideBar = document.getElementById('sidebar-area');
  const footerWidget = document.getElementById('site-footer-widget');


  // Accordion menue setting
  function menuToggleSetting(element){
    let menueChildren = element.getElementsByClassName('menu-item-has-children');
    for(let i = 0; i < menueChildren.length; i++) {
      menueChildren[i].firstChild.insertAdjacentHTML('afterend', '<button class="menu-toggle" type="button">▼</button>');
    } 

    menue = element.getElementsByClassName('menu-toggle');
    for(let i = 0; i < menue.length; i++) {
      menue[i].addEventListener('click', function () {
        this.classList.toggle('toggle-icon-switch');
        this.nextElementSibling.classList.toggle('menu-open');
      });
    }    
  }
  const widgetArea = [headerWidget, sideBar, footerWidget]
  widgetArea.forEach(function(element){
    menuToggleSetting(element);
  });


  const spMenuWrap = document.getElementById('main-menu-sp-cv'); 
  const focusContent = spMenuWrap.querySelectorAll('button, a');
  
  const firstFocusElement = focusContent[0];
  const focusContentCount = focusContent.length;
  const lastFocusElement = focusContent[focusContentCount - 1];

  // Mobile menue open focus setting
  function spMenuFocus(event) {
    let tabPress = event.key === 'Tab';

    if (!tabPress) { return; }

    if (event.shiftKey) { 
      if (document.activeElement === firstFocusElement) {
        lastFocusElement.focus(); 
        event.preventDefault();
      }
    } else { 
      if (document.activeElement === lastFocusElement) { 
        firstFocusElement.focus();
        event.preventDefault();
      }
    }
  }

  // Mobile menue Event
  function spMenuEvent() {
    spMenuIcon.classList.toggle('sp-button-open');
    mainMenu.classList.toggle('main-menu-open');
    overlay.classList.toggle('overlay-on');

    if(spMenuIcon.classList.value.indexOf('sp-button-open') === -1){
      document.removeEventListener('keydown', spMenuFocus, false);
    }else{
      document.addEventListener('keydown', spMenuFocus, false);
    }

  }
  spMenuIcon.addEventListener('click', spMenuEvent);
  overlay.addEventListener('click', spMenuEvent);


  // Mediaquery change
  function mqCheck(mq) {
    
    if (mq.matches) {

      // Mobile only menue setting destroy
      overlay.classList.remove('overlay-on');
      mainMenu.classList.remove('main-menu-open');
      spMenuIcon.classList.remove('sp-button-open');
      
      for(let i = 0; i < mainMenuToggle.length; i++) {
        mainMenuToggle[i].nextElementSibling.classList.remove('menu-open');
        mainMenuToggle.item(0).remove();
      } 
 
    } else {

      // Mobile only accordion menue setting add
      menuToggleSetting(mainMenu);
    }
  }
  const mq = window.matchMedia( "(min-width: 992px)" );
  mqCheck(mq);
  mq.addEventListener('change', mqCheck);

} );