/* -------------------------------------------------
	inview 一括設定（セクション/要素ごとに data-fx で効果指定）
	使える値：up / down / transform1 / transform2 / transform3 / blur

	※ 以前は protonet-jquery.inview（外部プラグイン）を使っていましたが、
	   ブラウザ標準の IntersectionObserver に置き換えました。
	   外部ライブラリ非依存・オフライン動作。jQuery は DOM 操作にのみ使用。
------------------------------------------------- */

const FX_DEFAULT = 'up';	// data-fx が無い時のデフォルト

$(function(){

	const FX_LIST = ['up','down','transform1','transform2','transform3','blur'];
	const STYLE_LIST = FX_LIST.map(v => v + 'style');
	const CLEAN = FX_LIST.concat(STYLE_LIST).join(' ');

	function resolveFx($el){
		// 自分自身〜親へ、data-fx を探す（要素単位/セクション単位どっちもOK）
		let fx = $el.closest('[data-fx]').attr('data-fx');

		// data-fx が無ければデフォルト
		if(!fx) fx = FX_DEFAULT;

		// 想定外の値ならデフォルトに戻す
		if(FX_LIST.indexOf(fx) === -1) fx = FX_DEFAULT;

		return fx;
	}

	// 各 .inview を「待機状態」にして、使う効果classを要素に覚えさせる
	$('.inview').each(function(){
		const $el = $(this);
		const fx = resolveFx($el);
		// 既存の効果classが混ざってても、ここで綺麗にして「待機状態」にする
		$el.removeClass(CLEAN).addClass(fx);
		this._fx = fx;	// 後で参照
	});

	// 画面内に入ったら「実行class（fx+style）」を付ける
	if ('IntersectionObserver' in window){
		const io = new IntersectionObserver(function(entries){
			entries.forEach(function(entry){
				if(!entry.isIntersecting) return;
				const el = entry.target;
				// スライドショー等で待機classが外された要素はスキップ（誤発火防止）
				if(el._fx && el.classList.contains(el._fx)){
					el.classList.add(el._fx + 'style');
				}
				io.unobserve(el);	// 一度出したら監視解除
			});
		}, { threshold: 0 });

		$('.inview').each(function(){ io.observe(this); });
	} else {
		// 古い環境：演出せず、最初から表示しておく（待機で消えたままにしない）
		$('.inview').each(function(){ if(this._fx) this.classList.add(this._fx + 'style'); });
	}

});
