const pages = [];
function pageTag(){
  setHeight()
  const main = document.getElementById('main');
  const mainInner = document.getElementById('main_inner');
  if(mainInner){
    const _jsPage = mainInner.getElementsByClassName('js-page');
    const mainPage = document.createElement('div');
    mainPage.setAttribute('id','main_page')
    for(let i=0;i<_jsPage.length;i++){
      if(i===0){
        _jsPage[i].classList.add('-active')
      }
      mainPage.appendChild(_jsPage[i].cloneNode(true))
      pages[i] = _jsPage[i].getAttribute('page')
    }
    const jsPage = mainPage.getElementsByClassName('js-page')
    jsPage[jsPage.length-1].appendChild(document.getElementById('footer'))
    document.body.setAttribute('view', pages[0])
    mainInner.remove();
    main.appendChild(mainPage)
    let _pageWait = false;
    for(let i=0;i<jsPage.length;i++){
      jsPage[i].addEventListener('scroll',function(){
        if (!_pageWait) {
          _pageWait = true
          window.requestAnimationFrame(function() {
            pageScroll()
            _pageWait = false;
          })
        }
      })
    }
    changeToAnker(location.hash)
    document.querySelectorAll('a[href^="#"],a[href^="index.php#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        changeToAnker(anchor.hash);
      });
    });
    document.querySelectorAll('button.js-scrollToTop').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        changeView(0);
      });
    });
    document.querySelectorAll('button.js-scrollToSecond').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        changeView(1);
      });
    });
  }
}
function pageScroll(){
  setHeight()
  const wH = document.documentElement.clientHeight;
  const viewPage = document.body.getAttribute('view');
  const jsPage = document.getElementsByClassName('js-page');
  _getScroll(jsPage);
  function _getScroll(e){
    const pagesIndex = pages.indexOf(viewPage);
    const _this = e[pagesIndex];
    const scrollTop = _this.scrollTop;
    const childHeight = _this.children[0].clientHeight - 2;
    if(wH + scrollTop >= childHeight){
      _scrollChange(pagesIndex,false)
    }else if(scrollTop < 1){
      _scrollChange(pagesIndex,true)
    }
  }
  function _scrollChange(i,r = false){
    let nextNum = i+1;
    if(r){
      nextNum = i-1;
    }
    changeView(nextNum,r);
  }
}
function changeView(i,r = false){
  const wH = document.documentElement.clientHeight;
  const mainPage = document.getElementById('main_page');
  const targetPage = pages[i];
  const jsPage = mainPage.getElementsByClassName('js-page');
  const targetPageNode = jsPage[i];
  if(targetPage != undefined){
    let _scrollTop = 10;
    if(r){
      _scrollTop = targetPageNode.children[0].clientHeight - wH - 10;
    }
    document.body.setAttribute('view', targetPage);
    location.hash = targetPage;
    scrollReset()
    mainPage.style.top = 'calc(var(--windowHeight)*'+i+'*-1)';
    targetPageNode.scrollTop = _scrollTop;
    for(let j=0;j<jsPage.length;j++){
      if(j===i){
        jsPage[j].classList.add('-active');
        setTimeout(function(){
          jsPageFade(jsPage[j])
        },500)
      }else{
        jsPage[j].classList.remove('-active')
      }
    }
  }
}
function changeToAnker(a){
  scrollReset();
  const target = a.replace('#', '');
  const pagesIndex = pages.indexOf(target);
  changeView(pagesIndex)
}
function setHeight(){
  const wH = Math.floor(document.documentElement.clientHeight);
  document.body.setAttribute('style','--pageHeight:'+(wH+60)+'px;--windowHeight:'+wH+'px')
}
function scrollReset(){
  window.scrollTo(0, 0);
  document.getElementById('main').scrollTo(0, 0);
}
window.addEventListener('DOMContentLoaded',function(){
  pageTag()
  mIconChange()
  scrollReset();
})
window.addEventListener('pageshow',function(){
  scrollReset();
})
window.addEventListener('load',function(){
  scrollReset();
})
window.addEventListener('resize',function(){
  if (!_wait) {
    _wait = true
    window.requestAnimationFrame(function() {
      pageScroll()
      scrollReset();
      _wait = false;
    })
  }
})

function jsPageFade(e){
  const wH = document.documentElement.clientHeight,
    scrollTop = e.scrollTop,
    scrollBtm = scrollTop + wH,
    offset = 0,
    className = 'inview',
    remove = false,
    fadeStartDelay = 350;
  e.querySelectorAll('.fadeCont').forEach(target => {
    const targetTop = target.getBoundingClientRect().top,
    targetBtm = targetTop + target.clientHeight;
    if (scrollBtm > targetTop + offset) {
      target.classList.add(className);
    } else {
      if (remove) {
        target.classList.remove(className);
      }
    }
  })
}