/*-------------------------------
	スマホ用メニュー
-------------------------------*/
// 変数定義 -------------------------
const memubtn = document.getElementById('MenuToggleBtn');  // メニュー開閉のボタン
const wrapper = document.getElementById('Wrapper'); // ページ全体を囲む要素 wrapper
const nav = document.getElementById('Menu');         // ドロワーメニュー要素 nav
const openClass = 'navOpen';                        // メニューオープン時に wrapper につくclass
let navopen = false;                                // メニューオープンの判定

// 関数定義 -------------------------
const navToggle = () => {
  if (navopen) {
    navClose();
  } else {
    navOpen();
  }
}

// メニューオープン時の関数
const navOpen = () => {
  navopen = true;
  const top = window.pageYOffset;
  wrapper.setAttribute('style', `top:-${top}px`);
  wrapper.classList.add(openClass);
}

// メニュークローズ時の関数
const navClose = () => {
  const closeFirst = (callback) => {
    navopen = false;
    let scrolltop = wrapper.style.top;
    scrolltop = scrolltop.slice(1, -2);
    wrapper.style.top = "";
    wrapper.classList.remove(openClass);
    callback(scrolltop);
  }
  closeFirst((scrolltop) => {
    window.scrollTo(0, scrolltop);
  });
}

// 関数実行 -------------------------
if (memubtn != null) {
  memubtn.addEventListener('click', navToggle, false);
}

/*-------------------------------
	スムーススクロール
-------------------------------*/
// 関数定義 -------------------------
const smoothScroll = () => {
  let links = document.querySelectorAll('a[href^="#"]');
  const speed = 500;          // スクロールスピード   
  const divisor = 100;        // 分割数
  const tolerance = 5;        // 許容誤差
  const headerHeight = 50;     // 固定ヘッダーがある場合はその高さ分ずらす
  const interval = speed / divisor;
  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener('click', (e) => {
      e.preventDefault();
      let nowY = window.pageYOffset;
      const href = e.currentTarget.getAttribute('href');
      const target = document.querySelector(href);
      if (target != null) {
        const targetRectTop = target.getBoundingClientRect().top;
        const targetY = targetRectTop + nowY - headerHeight;
        const minY = Math.abs((targetY - nowY) / divisor);
        doScroll(minY, nowY, targetY, tolerance, interval);
      }
    });
  }
}

const doScroll = (minY, nowY, targetY, tolerance, interval) => {
  let toY;
  if (targetY < nowY) {
    toY = nowY - minY;
  } else {
    toY = nowY + minY;
  }
  window.scrollTo(0, toY);
  if (targetY - tolerance > toY || toY > targetY + tolerance) {
    window.setTimeout(doScroll, interval, minY, toY, targetY, tolerance, interval);
  } else {
    return false;
  }
}

// 関数実行 -------------------------
smoothScroll();

/*-------------------------------
	フッターで止まるページトップボタン
-------------------------------*/
const pageTopBtnPositionSet = () => {
  /*---------- 設定 ----------*/
  //ページトップボタンのID
  const pageTopBtn = document.getElementById('PageTopBtn');
  //フッターのID
  const footer = document.getElementById('Footer');

  //ページトップボタンを表示しだすY位置
  const pageTopBtnDisplayY = 200;

  //ページトップボタンのbottomの位置を設定
  const pageTopBtnStyleBottom = 30;
  /*---------- ここまで ----------*/

  //フッターの高さ取得
  const footerHeight = footer.offsetHeight;
  //ページの高さ取得
  let documentHeight = Math.max.apply(null, [document.body.clientHeight, document.body.scrollHeight, document.documentElement.scrollHeight, document.documentElement.clientHeight]);

  //ウインドウの高さ取得
  let windowHeight = document.documentElement.clientHeight;

  /*---------- 関数 ----------*/
  //スクロール量によってページトップボタンのopacityを設定する関数
  const pageTopBtnDisplay = () => {
    let scrollY = window.scrollY;
    if (scrollY < pageTopBtnDisplayY) {
      pageTopBtn.style.opacity = 0;
    } else {
      pageTopBtn.style.opacity = 1;
    }
  }

  //ページトップボタンのbottomを設定する関数
  const pageTopBtnBottomPos = () => {
    if (documentHeight - scrollY - windowHeight <= footerHeight) {
      pageTopBtn.style.bottom = footerHeight - (documentHeight - scrollY - windowHeight) + pageTopBtnStyleBottom + 'px';
    } else {
      pageTopBtn.style.bottom = pageTopBtnStyleBottom + 'px';
    }
  }

  /*---------- ページを表示した時点で実行 ----------*/
  pageTopBtnDisplay();

  /*---------- スクロールイベント ----------*/
  window.addEventListener('scroll', () => {
    //ページのスクロール量
    pageTopBtnDisplay();
    pageTopBtnBottomPos();

  }, false);
}
/*---------- 関数実行 ----------*/
pageTopBtnPositionSet();

/*---------- リサイズした時に実行 ----------*/
window.onresize = () => {
  pageTopBtnPositionSet();
}


/*-------------------------------
  要素をアニメーションしながら表示
-------------------------------*/
window.sr = ScrollReveal();
sr.reveal('.lowerContent section');
sr.reveal('.lowerContent div');
sr.reveal('.lowerContent article');
sr.reveal('.lowerContent li');
sr.reveal('#PageTopBtn');

sr.reveal('.topContent section');
sr.reveal('.topContent div');
sr.reveal('.topContent article');
sr.reveal('.topContent li');

/*-------------------------------
  blogのアーカイブリンクのアコーディオンメニュー
-------------------------------*/
function Accordion(obj) {

  // `wrap_id`で指定した要素が無かったら、以降は実行しない
  if (!document.querySelector(`#${obj.wrap_id}`)) {
    return false
  }

  // 関数呼び出し時の引数をもとに変数を定義
  const ElmItems = document.querySelectorAll(`#${obj.wrap_id} .${obj.item_class}`)
  const ClassAccordionElm = obj.accordion_class
  const ElmAccordions = document.querySelectorAll(`#${obj.wrap_id} .${ClassAccordionElm}`)
  const Transition = obj.accordion_transition ? obj.accordion_transition : '.4s'
  const AttrToggle = obj.toggle_attr ? obj.toggle_attr : 'data-active'
  const DefaultOpen = obj.default_is_open ? obj.default_is_open : false
  let arryAccordionElmHeight = new Array()

  // アコーディオンさせる要素の高さをそれそれ取得して配列に格納
  // その後、`default_is_open`が`false`なら高さを0にする
  Array.from(ElmAccordions).forEach(element => {
    element.style.height = 'auto'
    element.style.overflow = 'hidden'
    element.style.transition = Transition
    arryAccordionElmHeight.push(element.clientHeight)
    if (!DefaultOpen) {
      element.style.height = '0'
    }
  })

  Array.from(ElmItems).forEach((element, index) => {
    // `default_is_open`が`true`なら、
    //     `item_class`にアコーディオンが開いている時に付与する`toggle_attr`の属性を設定する
    //     （アコーディオンが閉じている時は、`toggle_attr`の属性は削除される）
    //     アコーディオンする要素に`height`を設定する（autoから0にすると`transition`を設定してもアニメーションしないから、`height`を数値で設定する）
    if (DefaultOpen) {
      element.setAttribute(AttrToggle, '')
      ElmAccordions[index].style.height = `${arryAccordionElmHeight[index]}px`
    }

    // `item_class`に`addEventListener`を設定
    element.addEventListener('click', (event) => {

      // クリック時の要素と属性の有無を取得
      // （クリック時に`toggle_attr`の属性を付け外しすることで、アコーディオンが開いているかどうかを判別する）
      let target = event.currentTarget
      let hasAttr = target.hasAttribute(AttrToggle)
      let elmAccordion

      // アコーディオンする要素を取得して、`elmAccordion`に格納
      target.childNodes.forEach(childItem => {
        if (childItem.className == ClassAccordionElm) {
          elmAccordion = childItem
        }
      })

      // `toggle_attr`の属性の有無でアコーディオンを「開く」か「閉じる」か、どちらかの処理を実行
      if (hasAttr) {
        target.removeAttribute(AttrToggle)
        elmAccordion.style.height = '0'
      } else {
        target.setAttribute(AttrToggle, '')
        elmAccordion.style.height = `${arryAccordionElmHeight[index]}px`
      }

    }) // / addEventListener
  }) // / forEach

}

// ここで関数を呼び出し
Accordion({
  wrap_id: 'first-accordion',
  item_class: 'p-accordion__item',
  accordion_class: 'p-accordion__content',
  accordion_transition: '.4s',
  toggle_attr: 'data-active',
  default_is_open: false,
})