/**
 * Intersection Observer + requestAnimationFrame Parallax Vanilla JS
 */
const parallax = () => {
  'use strict';

	//表示エリア取得
	const targets = document.querySelectorAll('.js-parallax');
	//表示エリアが存在するかチェック
	if(targets.length === 0) {
		return;
	}

	//ウィンドウの高さ取得
  let timeoutId;
	let winHeight = window.innerHeight;
	window.addEventListener('resize',() => {
    if(timeoutId) {
      return
    };
    timeoutId = setTimeout(() => {
      timeoutId = 0;
      winHeight = window.innerHeight;
    }, 200);
	});

	targets.forEach(target => {
		//動かす要素を取得
		const child = target.querySelector('.js-parallax__item');
		//動かす要素が存在するかチェック
		if(!child) {
			return;
		}

		//処理用の設定を追加
    let isVisible = false;
    let frameId = 0;
    let lastPosition = null;
    let offsetTop, scrollRatio;
    const getPositionRatio = () => {
      offsetTop = target.getBoundingClientRect().top + window.pageYOffset;
      const targetHeight = target.clientHeight;
      //比率取得：スクロールできる最大量 / (ウィンドウの高さ + 表示エリアの高さ)
      scrollRatio = (child.clientHeight - targetHeight) / (winHeight + targetHeight);
    }
    getPositionRatio();
    /**
     * 表示エリアリサイズ監視
     */
    const resizeObserver = new ResizeObserver(getPositionRatio);
    resizeObserver.observe(target);


    /**
     * observer処理
     */
    const observerFunc = entries => {
      entries.forEach(entry => {
        //番号取得
        if(entry.isIntersecting) {
          //画面に表示されている要素のみアニメーション発火
          getPositionRatio();
          isVisible = true;
          child.style.willChange = 'transform';
          frameId = requestAnimationFrame(parallaxFunk.bind(entry.target));
        } else {
          //画面外のときはアニメーション削除
          isVisible = false;
          cancelAnimationFrame(frameId);
          child.style.willChange = '';
        }
      });
    }
    //observer設定
    let observer = new IntersectionObserver(observerFunc);
		//observer監視開始
		observer.observe(target);

    /**
     * パララックス位置調整関数
     */
    //予想フレームレートを設定する
    const framesPerSecond = 60;
    const interval = Math.floor(1000 / framesPerSecond);
    let startTime = performance.now();
    let previousTime = startTime;
    let currentTime = 0;
    let elapsed = 0;

    const parallaxFunk = timestamp => {
      //スクロール量（ウィンドウの上端）取得
      const scrollTop = Number(window.pageYOffset.toFixed(0));

      //スクロールしていない場合は何も処理しない
      if(lastPosition === scrollTop) {
        frameId = requestAnimationFrame(parallaxFunk);
        return;
      }

      //フレームレート設定
      currentTime = timestamp;
      elapsed = currentTime - previousTime;
      if (elapsed <= interval) {
        frameId = requestAnimationFrame(parallaxFunk);
        return;
      }
      previousTime = currentTime - (elapsed % interval);

      //スクロール量（ウィンドウの下端）取得
      const scrollBottom = scrollTop + winHeight;

      //ウィンドウの高さに対するスクロール量を取得（小数点第2以下は四捨五入）
      const setVal = ((scrollBottom - offsetTop) * scrollRatio).toFixed(1);

      //スクロール値を設定
      child.style.transform = 'translate3d(0,'+ (setVal * -1) +'px,0)';

      //ループアニメーション呼び出し
      if(isVisible) {
        frameId = requestAnimationFrame(parallaxFunk);
      }

      //処理したスクロール位置を保存
      lastPosition = scrollTop;
    }
	});
}
parallax();