//パララックス呼び出し
parallax();

//Intersection Observer + Scroll Event Parallax Vanilla JS
function parallax() {
	'use strict';

	//class設定
	//表示エリア class
	const targetClass = '.js-parallax-elm-box';
	//動かす要素 class
	const childClass = '.js-parallax-elm';

	//表示エリア取得
	const targets = Array.prototype.slice.call(document.querySelectorAll(targetClass),0);
	//表示エリアが存在するかチェック
	if(targets.length === 0) {
		return;
	}

	//observer設定
	let observer = new IntersectionObserver(observerFunc, {
		root: null,
		rootMargin: '0px',
		threshold: 0
	});

	//ウィンドウの高さ取得
	let winH = window.innerHeight;
	//スクロール量（ウィンドウの上端）取得
	let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	//スクロール量（ウィンドウの下端）取得
	let scrollBottom = scrollTop + winH;

	//初期設定
	let setListener =  [];
	let settings =  [];
	targets.forEach((target,index) => {
		//Listener設定取得用の判別番号をセット
		target.setAttribute('data-index',index);
		//動かす要素を取得
		const child = target.querySelector(childClass);
		//動かす要素が存在するかチェック
		if(!child) {
			return;
		}
		//処理用の設定を追加
		settings.push({
			child: child,
			//比率取得：スクロールできる最大量 / (ウィンドウの高さ + 表示エリアの高さ)
			scrollRatio: (child.clientHeight - target.clientHeight) / (winH + target.clientHeight)
		});
		//scrollイベントへ渡すlistener設定
		setListener.push(
			{
				target: target,
				handleEvent: function handleEvent () {
					requestAnimationFrame(parallaxFunk.bind(target));
				}
			}
		);
		//初期表示の位置調整
		requestAnimationFrame(parallaxFunk.bind(target));
		//observer監視開始
		observer.observe(target);
	});

	//高さ更新
	let resizeID;
	window.addEventListener('resize', function() {
		clearTimeout(resizeID);
		resizeID = setTimeout(() => {
			//ウィンドウの高さ取得
			winH = window.innerHeight;
			//各要素の高さ更新
			targets.forEach((target,index) => {
				//動かす要素が存在するかチェック
				if(!settings[index].child) {
					return;
				}
				//比率取得：スクロールできる最大量 / (ウィンドウの高さ + 表示エリアの高さ)
				settings[index].scrollRatio = (settings[index].child.clientHeight - target.clientHeight) / (winH + target.clientHeight);
			});
		}, 200);
	});

	//スクロール量更新
	window.addEventListener('scroll', function() {
		//スクロール量（ウィンドウの上端）取得
		scrollTop = window.pageYOffset || document.documentElement.scrollTop;
		//スクロール量（ウィンドウの下端）取得
		scrollBottom = scrollTop + winH;
	}, {passive: true});

	//observer処理
	function observerFunc(entries) {
		entries.forEach(entry => {
      const target = entry.target;
			//listener設定取得
			const listener =  setListener[target.getAttribute('data-index')];
			if(entry.isIntersecting) {
        target.style.willChange = 'transform';
				//画面に表示されている要素のみスクロールイベントへ追加
				window.addEventListener('scroll', listener, {passive: true});
			} else {
        target.style.willChange = '';
				//画面外のときはスクロールイベント削除
				window.removeEventListener('scroll', listener, {passive: true});
			}
		});
	}

	//パララックス位置調整関数
	function parallaxFunk() {
		//番号取得
		const index =  Number(this.getAttribute('data-index'));

		//表示エリアの位置取得
		const targetPosi =  this.getBoundingClientRect().top + scrollTop;

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

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