/* ==== part:list-auto2 start ==== */

//===============================================================
// サムネイルの横スライドショー（複数設置対応）
//===============================================================
$(function() {

	var slideDuration = 1000;      // アニメーション時間（ミリ秒）
	var autoSlideInterval = 4000;  // 自動スライドの間隔（ミリ秒）

	//----------------------------
	// スライダー1個を初期化
	//----------------------------
	function initOneSlider($slider) {

		// ★追加：.list-auto2-partsモード時のDOM準備
		//   ※ $slider（＝.list-auto2-parts）配下のみを操作するので、
		//     他パーツの同名クラス（.list-parts / .img / .indicator 等）には影響しない
		//   (1) inviewはスライドショーと相性が悪いので、関連クラス&イベントを除去
		//       （inviewが付いた要素はopacity:0で待機し、画面外に出ると非表示が継続して
		//         スライドの2周目以降が消えてしまう為）
		$slider.find('.list-parts').each(function() {
			$(this)
				.off('inview')
				.removeClass('inview up upstyle down downstyle transform1 transform1style transform2 transform2style transform3 transform3style blur blurstyle');
		});
		//   (2) .imgラッパーが無ければ自動挿入
		if ($slider.children('.img').length === 0) {
			$slider.children('.list-parts').wrapAll('<div class="img"></div>');
		}
		//   (3) .slide-indicators-partsが無ければ追加
		if ($slider.children('.slide-indicators-parts').length === 0) {
			$slider.append('<div class="slide-indicators-parts"></div>');
		}

		var imagesPerView, slideBy;
		var isAnimating = false;
		var currentImageIndex = 0;
		var pendingIndex = null;	// アニメ中クリックの「予約」

		var $imgParts = $slider.find('.img');
		var $indicatorsArea = $slider.find('.slide-indicators-parts');

		// 既存タイマー停止（このスライダーだけ）
		stopAutoSlide();

		// 既存のクローンとインジケータ削除（このスライダーだけ）
		$imgParts.find('.clone').remove();
		$indicatorsArea.empty();

		// クローン削除後に元要素を取り直す
		var $divs = $imgParts.children('div').not('.clone');
		var totalImages = $divs.length;

		// 画像が1個以下なら何もしない
		if (totalImages <= 1) {
			$imgParts.css({
				'transition': 'none',
				'transform': 'translateX(0)'
			});
			return;
		}

		var windowWidth = $(window).width();

		if (windowWidth >= 801) {
			imagesPerView = 4;
			slideBy = 2;
		} else {
			imagesPerView = 2;
			slideBy = 1;
		}

		// ★重要：枚数が「1度に表示する枚数」以下だと、全部が画面に収まるのでスライドしません（静止）。
		//   1度の表示枚数 … PC(画面幅801px以上)=4枚 / スマホ=2枚（上の imagesPerView）。
		//   つまり自動スライドさせるには PCで5枚以上 / スマホで3枚以上 が必要です。
		//   両方で確実に流したいなら 6枚以上を推奨（slideBy=2 のため偶数だとより自然）。
		//   ※枚数が足りない時はインジケータも作らず translateX(0) のまま固定します。
		if (totalImages <= imagesPerView) {
			$imgParts.css({
				'transition': 'none',
				'transform': 'translateX(0)'
			});
			return;
		}

		// 無限ループ用クローン追加
		$divs.clone().addClass('clone').appendTo($imgParts);

		// インジケータ生成
		var totalSlides = Math.ceil(totalImages / slideBy);
		for (var i = 0; i < totalSlides; i++) {
			$indicatorsArea.append('<span class="indicator" data-index="' + (i * slideBy) + '"></span>');
		}
		var $indicatorItems = $indicatorsArea.find('.indicator');

		function updateIndicators() {
			var activeIndex = Math.floor(currentImageIndex / slideBy) % totalSlides;
			$indicatorItems.removeClass('active');
			$indicatorItems.eq(activeIndex).addClass('active');
		}

		function slideTo(index) {

			// アニメ中は動かさない（クリックは予約で処理）
			if (isAnimating) return;

			isAnimating = true;
			currentImageIndex = index;

			$imgParts.css({
				'transition': 'transform ' + (slideDuration / 1000) + 's ease',
				'transform': 'translateX(' + (-currentImageIndex * (100 / imagesPerView)) + '%)'
			});

			updateIndicators();

			setTimeout(function() {

				// ループ処理
				if (currentImageIndex >= totalImages) {

					$imgParts.css('transition', 'none');
					$imgParts.css('transform', 'translateX(0)');

					currentImageIndex = 0;
					updateIndicators();

					// 再描画を強制
					$imgParts[0].offsetHeight;

					$imgParts.css('transition', 'transform ' + (slideDuration / 1000) + 's ease');
				}

				isAnimating = false;

				// ★アニメ中にクリックされた予約があれば、ここで実行
				if (pendingIndex !== null) {
					var next = pendingIndex;
					pendingIndex = null;

					slideTo(next);

					// 自動再生を再開（startは内部で必ずstopするので多重にならない）
					startAutoSlide();
				}

			}, slideDuration);
		}

		function startAutoSlide() {

			// ★速度が上がる原因（タイマー多重）を根本的に潰す
			stopAutoSlide();

			var interval = setInterval(function() {
				slideTo(currentImageIndex + slideBy);
			}, autoSlideInterval);

			$slider.data('interval', interval);
		}

		function stopAutoSlide() {
			var interval = $slider.data('interval');
			if (interval) {
				clearInterval(interval);
				$slider.removeData('interval');
			}
		}

		// 初期位置
		$imgParts.css({
			'transition': 'none',
			'transform': 'translateX(0)'
		});
		updateIndicators();

		// 自動再生開始
		startAutoSlide();

		// hover停止（この機能のイベントだけ外せるように名前空間）
		$slider.off('.auto1')
			.on('mouseenter.auto1', function() {
				stopAutoSlide();
			})
			.on('mouseleave.auto1', function() {
				startAutoSlide();
			});

		// インジケータクリック
		$indicatorItems.off('.auto1').on('click.auto1', function() {

			var index = $(this).data('index');

			// まず止める（多重タイマー予防）
			stopAutoSlide();

			// アニメ中なら「予約」して終わり（終わった瞬間に実行される）
			if (isAnimating) {
				pendingIndex = index;
				return;
			}

			slideTo(index);
			startAutoSlide();

		});

	}

	//----------------------------
	// 全スライダーを初期化
	//----------------------------
	function initAllSliders() {
		$('.list-auto2-parts').each(function() {
			initOneSlider($(this));
		});
	}

	// 初期化
	initAllSliders();

	// リサイズで再初期化
	var resizeTimer;
	$(window).off('.auto1resize').on('resize.auto1resize', function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
			initAllSliders();
		}, 250);
	});

});

/* ==== part:list-auto2 end ==== */


/* ==== part:list-yoko-scroll3 start ==== */

//===============================================================
//	list-yoko-scroll3-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

	$('.list-yoko-scroll3-parts').each(function(){

		var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;

		/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

		/* スクロール処理 */
		$(window).on('scroll resize', function(){

			var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

			/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

			/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

			/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

			/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

			/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

			/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

		});

	});

});

/* ==== part:list-yoko-scroll3 end ==== */


/* ==== part:list-yoko-scroll2 start ==== */

//===============================================================
//	list-yoko-scroll2-parts（縦スクロール → 横スクロールギャラリー）
//===============================================================
$(function(){

	$('.list-yoko-scroll2-parts').each(function(){

		var $wrap    = $(this);
		var $sticky  = $wrap.find('.hscroll1-sticky');
		var $track   = $wrap.find('.hscroll1-track');
		var $skip    = $wrap.find('button[aria-label="skip gallery"]');
		var $prog    = $wrap.find('.hscroll1-progress');
		var $progBar = $wrap.find('.hscroll1-progress-bar');
		var speed    = parseFloat($wrap.attr('data-speed')) || 1;
		/* ★枚数で速度が変わらないよう、横トラックの幅に応じて縦の高さを動的設定（scrollRange=maxMoveで縦1px=横1pxの一定速度）。
		   枚数が増えてもスクロール距離が伸びるだけで速さは一定。少数で画面に収まる時は高さ=画面分で静止。CSSのheight:300vhを上書き。 */
		function setWrapHeight(){
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = Math.max(0, trackW - stickyW);
			$wrap.css('height', (maxMove + $(window).height()) + 'px');
		}
		setWrapHeight();
		$(window).on('resize', setWrapHeight);
		$wrap.find('img').on('load', setWrapHeight);


		/* スキップボタン：セクション末尾へジャンプ */
		$skip.on('click', function(){
			var endPos = $wrap.offset().top + $wrap.outerHeight();
			$('html, body').animate({ scrollTop: endPos }, 400);
		});

		/* スクロール処理 */
		$(window).on('scroll resize', function(){

			var wrapTop    = $wrap.offset().top;
			var wrapHeight = $wrap.outerHeight();
			var scrollY    = $(window).scrollTop();
			var viewH      = $(window).height();

			/* セクション内にいるかどうか */
			var inSection = (scrollY >= wrapTop) && (scrollY <= wrapTop + wrapHeight - viewH);

			/* スキップボタンと進捗バーの表示切替 */
			if(inSection){
				$skip.addClass('is-visible');
				$prog.addClass('is-visible');
			} else {
				$skip.removeClass('is-visible');
				$prog.removeClass('is-visible');
			}

			/* 横スクロール量の計算 */
			var scrollRange  = wrapHeight - viewH;
			var scrollAmount = scrollY - wrapTop;
			var progress     = Math.max(0, Math.min(1, scrollAmount / scrollRange));

			/* トラックの移動可能距離 */
			var trackW  = $track[0].scrollWidth;
			var stickyW = $sticky.width();
			var maxMove = trackW - stickyW;

			/* transform で横移動 */
			var translateX = -1 * progress * maxMove * speed;
			translateX = Math.max(-maxMove, Math.min(0, translateX));
			$track.css('transform', 'translateX(' + translateX + 'px)');

			/* 進捗バー更新 */
			$progBar.css('width', (progress * 100) + '%');

		});

	});

});

/* ==== part:list-yoko-scroll2 end ==== */


/* ==== part:list-auto1 start ==== */

//===============================================================
// サムネイルの横スライドショー（複数設置対応）
//===============================================================
$(function() {

	var slideDuration = 1000;      // アニメーション時間（ミリ秒）
	var autoSlideInterval = 3000;  // 自動スライドの間隔（ミリ秒）

	//----------------------------
	// スライダー1個を初期化
	//----------------------------
	function initOneSlider($slider) {

		var imagesPerView, slideBy;
		var isAnimating = false;
		var currentImageIndex = 0;
		var pendingIndex = null;	// アニメ中クリックの「予約」

		var $imgParts = $slider.find('.img-parts');
		var $indicatorsArea = $slider.find('.slide-indicators-parts');

		// 既存タイマー停止（このスライダーだけ）
		stopAutoSlide();

		// 既存のクローンとインジケータ削除（このスライダーだけ）
		$imgParts.find('.clone').remove();
		$indicatorsArea.empty();

		// クローン削除後に元要素を取り直す
		var $divs = $imgParts.children('div').not('.clone');
		var totalImages = $divs.length;

		// 画像が1個以下なら何もしない
		if (totalImages <= 1) {
			$imgParts.css({
				'transition': 'none',
				'transform': 'translateX(0)'
			});
			return;
		}

		var windowWidth = $(window).width();

		if (windowWidth >= 801) {
			imagesPerView = 4;
			slideBy = 2;
		} else {
			imagesPerView = 2;
			slideBy = 1;
		}

		// ★重要：枚数が「1度に表示する枚数」以下だと、全部が画面に収まるのでスライドしません（静止）。
		//   1度の表示枚数 … PC(画面幅801px以上)=4枚 / スマホ=2枚（上の imagesPerView）。
		//   つまり自動スライドさせるには PCで5枚以上 / スマホで3枚以上 が必要です。
		//   両方で確実に流したいなら 6枚以上を推奨（slideBy=2 のため偶数だとより自然）。
		//   ※枚数が足りない時はインジケータも作らず translateX(0) のまま固定します。
		if (totalImages <= imagesPerView) {
			$imgParts.css({
				'transition': 'none',
				'transform': 'translateX(0)'
			});
			return;
		}

		// 無限ループ用クローン追加
		$divs.clone().addClass('clone').appendTo($imgParts);

		// インジケータ生成
		var totalSlides = Math.ceil(totalImages / slideBy);
		for (var i = 0; i < totalSlides; i++) {
			$indicatorsArea.append('<span class="indicator" data-index="' + (i * slideBy) + '"></span>');
		}
		var $indicatorItems = $indicatorsArea.find('.indicator');

		function updateIndicators() {
			var activeIndex = Math.floor(currentImageIndex / slideBy) % totalSlides;
			$indicatorItems.removeClass('active');
			$indicatorItems.eq(activeIndex).addClass('active');
		}

		function slideTo(index) {

			// アニメ中は動かさない（クリックは予約で処理）
			if (isAnimating) return;

			isAnimating = true;
			currentImageIndex = index;

			$imgParts.css({
				'transition': 'transform ' + (slideDuration / 1000) + 's ease',
				'transform': 'translateX(' + (-currentImageIndex * (100 / imagesPerView)) + '%)'
			});

			updateIndicators();

			setTimeout(function() {

				// ループ処理
				if (currentImageIndex >= totalImages) {

					$imgParts.css('transition', 'none');
					$imgParts.css('transform', 'translateX(0)');

					currentImageIndex = 0;
					updateIndicators();

					// 再描画を強制
					$imgParts[0].offsetHeight;

					$imgParts.css('transition', 'transform ' + (slideDuration / 1000) + 's ease');
				}

				isAnimating = false;

				// ★アニメ中にクリックされた予約があれば、ここで実行
				if (pendingIndex !== null) {
					var next = pendingIndex;
					pendingIndex = null;

					slideTo(next);

					// 自動再生を再開（startは内部で必ずstopするので多重にならない）
					startAutoSlide();
				}

			}, slideDuration);
		}

		function startAutoSlide() {

			// ★速度が上がる原因（タイマー多重）を根本的に潰す
			stopAutoSlide();

			var interval = setInterval(function() {
				slideTo(currentImageIndex + slideBy);
			}, autoSlideInterval);

			$slider.data('interval', interval);
		}

		function stopAutoSlide() {
			var interval = $slider.data('interval');
			if (interval) {
				clearInterval(interval);
				$slider.removeData('interval');
			}
		}

		// 初期位置
		$imgParts.css({
			'transition': 'none',
			'transform': 'translateX(0)'
		});
		updateIndicators();

		// 自動再生開始
		startAutoSlide();

		// hover停止（この機能のイベントだけ外せるように名前空間）
		$slider.off('.auto1')
			.on('mouseenter.auto1', function() {
				stopAutoSlide();
			})
			.on('mouseleave.auto1', function() {
				startAutoSlide();
			});

		// インジケータクリック
		$indicatorItems.off('.auto1').on('click.auto1', function() {

			var index = $(this).data('index');

			// まず止める（多重タイマー予防）
			stopAutoSlide();

			// アニメ中なら「予約」して終わり（終わった瞬間に実行される）
			if (isAnimating) {
				pendingIndex = index;
				return;
			}

			slideTo(index);
			startAutoSlide();

		});

	}

	//----------------------------
	// 全スライダーを初期化
	//----------------------------
	function initAllSliders() {
		$('.list-auto1-parts').each(function() {
			initOneSlider($(this));
		});
	}

	// 初期化
	initAllSliders();

	// リサイズで再初期化
	var resizeTimer;
	$(window).off('.auto1resize').on('resize.auto1resize', function() {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {
			initAllSliders();
		}, 250);
	});

});

/* ==== part:list-auto1 end ==== */

