//要素数が変わっても一定の速度を保つ等速スクロールスライダー
const scrollSlider = document.querySelectorAll('.js-scroll-slider');
if(scrollSlider.length > 0) {
	//スクロールスピード設定
	const speed = 0.05;

	scrollSlider.forEach((slider) => {
		//スライド要素を取得
		const children = slider.children;
		const childLength = children.length;
		//スライド要素一式を文字列で取得
		let baseChildren = '';
		for (let i = 0; i < children.length; i++) {
			baseChildren += children[i].outerHTML;
		}

		//スライド要素の横幅を取得
		const firstChild = slider.firstElementChild;
		const styles = getComputedStyle(firstChild);

		//スライダー定義関数
		let winWidth = window.innerWidth;
		let sliderWidth;
		let countWidth = 0;
		let addCount = 1;
		const initializeSlider = (countWidth, addCount) => {
			//画面外まで表示を確保するため要素を複製
			let checkWidth = winWidth * 2;
			let width = parseFloat(styles.width);
			let marginRight = parseFloat(styles.marginRight);
			sliderWidth = (width + marginRight) * childLength;
			while(countWidth < checkWidth) {
				slider.insertAdjacentHTML('beforeend',baseChildren);
				++addCount;
				countWidth = sliderWidth * addCount;
			}
		}
		initializeSlider(countWidth, addCount);

		//反転処理
		let unit = '-';
		const isReverse = slider.classList.contains('is-reverse');
		if(isReverse) {
			unit = '';
			slider.style.marginLeft = '-' + sliderWidth + 'px';
		}

		//アニメーションセット
		const keyframes = {
			transform: 'translateX('+ unit + sliderWidth + 'px)'
		};
		const timing = {
			fill: 'backwards',
			duration: sliderWidth / speed,
			easing: 'linear',
			iterations: Infinity
		};
		let slideAnime = slider.animate(keyframes,timing);

		//レスポンシブ対応
		let timeoutId;
		let lastWinWidth = window.innerWidth;
		window.addEventListener('resize', () => {
			clearTimeout(timeoutId);

			//リサイズを停止した時のみ処理
			timeoutId = setTimeout(() => {
				// 現在と前回の横幅が違う場合だけ実行
				if (lastWinWidth !== window.innerWidth) {
					lastWinWidth = window.innerWidth;
					winWidth = lastWinWidth;

					//スライダーが途切れないかチェック
					initializeSlider(countWidth, addCount);

					//設定をリセット
					if(isReverse) {
						slider.style.marginLeft = '-' + sliderWidth + 'px';
					}
					slideAnime.effect.updateTiming({iterations:1});
					slideAnime.finish();

					//スライダー再定義
					keyframes.transform = 'translateX('+ unit + sliderWidth + 'px)';
					timing.duration = sliderWidth / speed;
					slideAnime = slider.animate(keyframes,timing);
				}
			}, 500);
		});
	});
}