// メイングラフィックスライド
function swiperInit() {
	const minimumSlideNum = 4;
	const swiperStop = document.querySelector("#mainVijual_list .slide_control_stop");
	const swiperStart = document.querySelector("#mainVijual_list .slide_control_play");
	const swiper = new Swiper('#mainVijual_list', {
		a11y: {
			prevSlideMessage: '前へ',
			nextSlideMessage: '次へ',
		},
		// direction: 'vertical',
		direction: 'horizontal',
		loop: true,
		autoHeight: false, 
		pagination: {
			el: '#mainVijual_list .slide_pagination', // ページャ
			clickable: true, // ページャのクリックでスライド切り替え
		},
		navigation: {
			nextEl: 'mainVijual_list .slide_control_next',  // 次へボタン
			prevEl: 'mainVijual_list .slide_control_prev',  // 前へボタン
		},
		// 自動再生
		autoplay: {
			delay:  5000, // 1枚あたりの表示時間
			disableOnInteraction: false,  // 次へ?前へクリック後にautoplayが止まらないようにする
			pauseOnMouseEnter: false, // マウスホバー時にスライドを停止する（true:停止する / false:停止しない）
		},
		speed: 2000, // 次のスライドへの遷移時間
		slidesPerView: 1, // 初期設定 1度に表示するスライドの枚数
		breakpoints: {
			// ブラウザ幅が670px以上の場合
			670: {
				slidesPerView: 1,
				effect: 'fade',
			},
			// ブラウザ幅が1080px以上の場合
			1080: {
				slidesPerView: 1,
				effect: 'fade',
			},
		},
		//   フェード切り替え
		effect: 'fade',
		//   クロスフェード
		on: {
			// 初期化
			init: function () {
				// 規定枚数より少ないときに、スライドのクローンを作成する。
				const slides = this.slides;
				if (slides.length < minimumSlideNum) {
					const addSlides = 1 - slides.length;
					for (let i = 0; i < addSlides; i++) {
						const cloneSlide = slides[i % slides.length].cloneNode(true);
						this.appendSlide(cloneSlide);
					}
				}
			},
			// リサイズ時
			resize: function(){
				swiper.init(); // swiperの初期化
				// swiper.autoplay.start();
			}
		}
	});
	// 停止ボタン押下時の処理
	if (swiperStop !== null) {
		swiperStop.addEventListener("click", () => {
			swiper.autoplay.stop();
			swiperStart.classList.remove("is-active");
			swiperStop.classList.add("is-active");
		});
	}
	// 再生ボタン押下時の処理
	if (swiperStart !== null) {
		swiperStart.classList.add('is-active');  //初期状態として再生中のクラスを追加
		swiperStart.addEventListener("click", () => {
			swiper.autoplay.start();
			swiperStart.classList.add("is-active");
			swiperStop.classList.remove("is-active");
		});
	}
}

// バナー広告スライド1
function topBanner2Slide() {
	const swiperStop = document.querySelector("#pickupBnr_list .slide_control_stop");
	const swiperStart = document.querySelector("#pickupBnr_list .slide_control_play");
	const swiper = new Swiper('#pickupBnr_list .swiper', {
		a11y: {
			prevSlideMessage: '前へ',
			nextSlideMessage: '次へ',
		},
		// direction: 'vertical',
		direction: 'horizontal',
		loop: true,
		centeredSlides: true,
		autoHeight: false,
		pagination: {
			el: '#pickupBnr_list .slide_pagination', // ページャ
			clickable: true, // ページャのクリックでスライド切り替え
		},
		navigation: {
			nextEl: '#pickupBnr_list .slide_control_next',  // 次へボタン
			prevEl: '#pickupBnr_list .slide_control_prev',  // 前へボタン
		},
		// 自動再生
		autoplay: {
			delay:  5000, // 1枚あたりの表示時間
			disableOnInteraction: false,  // 次へ/前へクリック後にautoplayが止まらないようにする
			pauseOnMouseEnter: false,
		},
		speed: 2000, // 次のスライドへの遷移時間
		slidesPerView: auto, //breakpointの最小値以下の幅のときの個数
		effect: 'slide',
		on: {
			// 初期化
			init: function () {
				//
			},
			// リサイズ時
			resize: function(){
				swiper.init(); // swiperの初期化
				// swiper.autoplay.start();
			}
		}
	});
	// 停止ボタン
	if (swiperStop !== null) {
		swiperStop.addEventListener("click", () => {
			swiper.autoplay.stop();
			swiperStart.classList.remove("is-active");
			swiperStop.classList.add("is-active");
		});
	}
	// 再生ボタン
	if (swiperStart !== null) {
		swiperStart.classList.add('is-active');  //初期状態として再生中のクラスを追加
		swiperStart.addEventListener("click", () => {
			swiper.autoplay.start();
			swiperStart.classList.add("is-active");
			swiperStop.classList.remove("is-active");
		});
	}

}

// バナー広告2のスライド
// 初期状態は2行4列のスライド
function topBanner2_2Slide() {
	const swiperStop = document.querySelector("#top_banner_2_list2 .slide_control_stop");
	const swiperStart = document.querySelector("#top_banner_2_list2 .slide_control_play");

	const sliderNumCols = 4;
	const sliderNumRows = 2;
	const sliderNumMin = sliderNumCols * sliderNumRows;

	const swiper = new Swiper('#top_banner_2_list2 .swiper', {
		a11y: {
			prevSlideMessage: '前へ',
			nextSlideMessage: '次へ',
		},
		direction: 'horizontal',
		loop: false, 
		// autoHeight: false,
		pagination: {
			el: '#top_banner_2_list2 .slide_pagination', // ページャ
			clickable: true, // ページャのクリックでスライド切り替え
		},
		navigation: {
			nextEl: '#top_banner_2_list2 .slide_control_next',  // 次へボタン
			prevEl: '#top_banner_2_list2 .slide_control_prev',  // 前へボタン
		},
		// 自動再生
		autoplay: {
			delay:  5000, // 1枚あたりの表示時間
			disableOnInteraction: false,  // 次へ/前へクリック後にautoplayが止まらないようにする
			pauseOnMouseEnter: true,
		},
		speed: 1000, // 次のスライドへの遷移時間
		// effect: 'slide',
		// 初期設定（2行2列）
		slidesPerView: 2,
		grid: {
			rows: 2,
			fill: 'row',
		},
		loopAddBlankSlides: true,
		breakpoints: {
			// 670px以上の場合
			670: {
				slidesPerView: 2,
				// effect: 'slide',
				grid: {
					rows: 2,
				},
			},
			// 1080px以上の場合（2行4列）
			1080: {
				slidesPerView: 4,
				grid: {
					rows: 2,
				},
			},
		},
		on: {
			// 初期化
			init: function () {
				// 規定枚数より少ないときに、スライドのクローンを作成する。
				// const slides = this.slides;
				// if (slides.length < sliderNumMin) {
				// 	const addSlides = sliderNumMin - slides.length;
				// 	for (let i = 0; i < addSlides; i++) {
				// 		const cloneSlide = slides[i % slides.length].cloneNode(true);
				// 		this.appendSlide(cloneSlide);
				// 	}
				// }
			},
			// リサイズ時
			resize: function(){
				// swiper.init(); // swiperの初期化
				swiper.update();
				swiper.autoplay.start();
			}
		}
	});
	// 停止ボタン
	if (swiperStop !== null) {
		swiperStop.addEventListener("click", () => {
			swiper.autoplay.stop();
			swiperStart.classList.remove("is-active");
			swiperStop.classList.add("is-active");
		});
	}
	// 再生ボタン
	if (swiperStart !== null) {
		swiperStart.classList.add('is-active');  //初期状態として再生中のクラスを追加
		swiperStart.addEventListener("click", () => {
			swiper.autoplay.start();
			swiperStart.classList.add("is-active");
			swiperStop.classList.remove("is-active");
		});
	}

}

// ピックアップスライド
function pickUpSlide() {
	const swiperStop = document.querySelector("#studentMessage .slide_control_stop");
	const swiperStart = document.querySelector("#studentMessage .slide_control_play");
	const swiper = new Swiper('#studentMessage .swiper', {
		a11y: {
			prevSlideMessage: '前へ',
			nextSlideMessage: '次へ',
		},
		// direction: 'vertical',
		direction: 'horizontal',
		loop: true,
		centeredSlides: true,
		autoHeight: false,
		pagination: {
			el: '#studentMessage .slide_pagination', // ページャ
			clickable: true, // ページャのクリックでスライド切り替え
		},
		navigation: {
			nextEl: '#studentMessage .slide_control_next',  // 次へボタン
			prevEl: '#studentMessage .slide_control_prev',  // 前へボタン
		},
		// 自動再生
		autoplay: {
			delay:  5000, // 1枚あたりの表示時間
			disableOnInteraction: false,  // 次へ/前へクリック後にautoplayが止まらないようにする
			pauseOnMouseEnter: false,
		},
		speed: 2000, // 次のスライドへの遷移時間
		slidesPerView: 2, //breakpointの最小値以下の幅のときの個数
		spaceBetween: 20,
		// effect: 'slide',
		breakpoints: {
			// 670px以上の場合
			670: {
				slidesPerView: 3,
				effect: 'slide',
			},
			// 1080px以上の場合
			1080: {
				slidesPerView: 6,
				effect: 'slide',
			},
		},
		//   フェード切り替え
		//   クロスフェード
		on: {
			// 初期化
			init: function () {
				//
			},
			// リサイズ時
			resize: function(){
				swiper.init(); // swiperの初期化
				// swiper.autoplay.start();
			}
		}
	});
	// 停止ボタン
	if (swiperStop !== null) {
		swiperStop.addEventListener("click", () => {
			swiper.autoplay.stop();
			swiperStart.classList.remove("is-active");
			swiperStop.classList.add("is-active");
		});
	}
	// 再生ボタン
	if (swiperStart !== null) {
		swiperStart.classList.add('is-active');  //初期状態として再生中のクラスを追加
		swiperStart.addEventListener("click", () => {
			swiper.autoplay.start();
			swiperStart.classList.add("is-active");
			swiperStop.classList.remove("is-active");
		});
	}

}


document.addEventListener('DOMContentLoaded', function() {
	swiperInit();
	topBanner2Slide();
	topBanner2_2Slide();
	pickUpSlide();
});