//Intersection Observerスクロールアニメーション
observerAnime({
	rootMargin: '-50%', //画面の中央で発火。IntersectionObserverのrootMargin　デフォルトは'0px'
	loop: false, //アニメーション繰り返し設定　デフォルトはfalse
	threshold: 0, //threshold　デフォルトは0
	responsive: [{
		breakpoint: 1024, //ブレイクポイント max-width
		rootMargin: '-30%',
	}, {
		breakpoint: 400,
		rootMargin: '0px',
		loop: true, //trueにする場合、rootMarginは'0px'が良さそうです
	}]
});
function observerAnime(setOptions) {
	//options
	const defaultOptions = {
		root: null,  //IntersectionObserverのroot
		rootMargin: '0px',  //IntersectionObserverのrootMargin
		threshold: 0,  //IntersectionObserverのthreshold
		loop: false,  //アニメーション繰り返し設定
		responsive: null,  //レスポンシブ設定
		/*
			//レスポンシブ設定
			responsive: [{
				breakpoint: 1024, //ブレイクポイント max-width
				rootMargin: '0px',
				threshold: 0,
				loop: false
			}, {
				breakpoint: 500,
				rootMargin: '0px',
				threshold: 0,
				loop: false
			}]
		*/
		targetAreaClass : '.js-anime-box', //ターゲットを内包するエリアclass
		targetClass: '.js-anime-elm', //ターゲットclass
		animeSetClass: 'is-anime',  //アニメーション実行時に追加するclass
	}
	//設定をマージ
	const options = Object.assign({}, defaultOptions, setOptions);

	//ターゲット要素取得
	let targets = document.querySelectorAll(options.targetAreaClass);
	//要素が存在するかチェック
	if(targets.length === 0) {
		return false;
	}

	//各設定を取得
	const targetClass = options.targetClass;
	const animeSetClass = options.animeSetClass;
	options.loopFlg = options.loop;


	//observer初期設定
	let observer;
	setObserver(options);

	//breakpoint切り替え監視
	let breakpoint = getBreakpoint(options);
	//breakpointが設定されていたら処理する
	if(breakpoint !== null) {
		let nowBreakpoint = breakpoint;
		window.addEventListener('resize', function() {
			//ブレイクポイントが切り替わったタイミンでobserverをリセット・再定義
			breakpoint = getBreakpoint(options);
			if(nowBreakpoint !== breakpoint) {
				nowBreakpoint = breakpoint;
				//observerリセット
				targets.forEach(function(target){
					observer.unobserve(target);
				});
				//observer再定義
				setObserver(options);
			}
		});
	}

	//observer定義関数
	function setObserver(options) {
		//ブレイクポイントに応じたオプションを取得
		const getOptions = getOptionsFunc(options);
		options.loopFlg = getOptions[1];
		//observer設定
		observer = new IntersectionObserver(setAnimeClass, getOptions[0]);
		targets.forEach(function(target){
			observer.observe(target);
		});
	}

	//アニメーション処理
	function setAnimeClass(entries, observer) {
		//ループフラグ取得
		const loopFlg = options.loopFlg;
		entries.forEach(entry => {
			//ターゲット要素取得
			const target = entry.target;
			//ターゲット要素の子要素取得
			const children = target.querySelectorAll(targetClass);

			//要素が画面に入ると処理
			if(entry.isIntersecting) {
				//子要素がある場合は子要素にclassを追加
				if(children.length !== 0) {
					children.forEach(function(child){
						child.classList.add(animeSetClass);
					});

				//子要素がない場合はターゲット自身にclassを追加
				} else {
					target.classList.add(animeSetClass);
				}

				//ループなしの場合
				if(!loopFlg) {
					//要素の監視を解除
					observer.unobserve(target);
				}

			//ループありの場合
			} else if(loopFlg) {
				//子要素がある場合は子要素に設定されたclassを削除
				if(children.length !== 0) {
					children.forEach(function(child){
						child.classList.remove(animeSetClass);
					});

				//子要素がない場合はターゲット自身のclassを削除
				} else {
					target.classList.remove(animeSetClass);
				}
			}
		});
	}

	//ブレイクポイントごとの設定取得関数
	function getBreakpoint(options) {
		let responsive = options.responsive;
		//ブレイクポイントなしの場合は処理しない
		if(!responsive) {
			return responsive;
		}

		//ウィンドウの幅取得
		const winWidth = window.innerWidth;
		//ウィンドウの幅とブレイクポイントを比較・取得
		let reverse = responsive.concat().reverse();
		let breakpoint = 'full';
		for (let i = 0; i < reverse.length; i++) {
			if(winWidth <= reverse[i].breakpoint) {
				breakpoint = reverse[i].breakpoint;
				break;
			}
		}
		return breakpoint;
	}

	//オプション取得関数
	function getOptionsFunc(options) {
		//ベース設定取得
		let root = options.root;
		let rootMargin = options.rootMargin;
		let threshold = options.threshold;
		let loop = options.loop;

		//レスポンシブ切り替え
		const responsive = options.responsive;
		//ブレイクポイントありの場合は設定を取得
		if(responsive) {
			//ウィンドウの幅取得
			const winWidth = window.innerWidth;
			//ウィンドウの幅とブレイクポイントを比較・各設定取得
			for (let i = 0; i < responsive.length; i++) {
				if(winWidth <= responsive[i].breakpoint) {
					root = responsive[i].root;
					rootMargin = responsive[i].rootMargin;
					threshold = responsive[i].threshold;
					loop = responsive[i].loop;
				}
			}
		}

		//IntersectionObserverのオプションとループフラグを返す
		return [
			{
				root: root,
				rootMargin: rootMargin,
				threshold: threshold
			},
			loop
		];
	}
}