/* ============================================================
common
============================================================ */

$(window).on('load',function(){
	$('body').addClass('js-fade-in');
});

/* ============================================================
slick
============================================================ */

$(function(){

	$('div.ja-top-mv').append('<div class="ctrl"><p><button type="button" class="stop"></button><button type="button" class="play"></button></p></div>');

	$('div.ja-top-mv ul.slide').slick({
		fade: true,
		autoplay: true,
		autoplaySpeed: 5000,
		infinite: true,
		dots: true,
		arrows: true,
		centerMode: false,
		variableWidth: false,
		slidesToShow: 1,
		slidesToScroll: 1,
		prevArrow: '<button type="button" class="sa sap"></button>',
		nextArrow: '<button type="button" class="sa san"></button>',
		appendDots: $('div.ctrl'),
		pauseOnFocus: false,
		pauseOnHover: false,
		pauseOnDotsHover: false,
	});

	$('div.ja-top-mv ul.slide li.slick-slide').wrapInner('<div class="js-inner"></div>');

	$('div.ja-top-mv ul.slick-dots li').append('<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="47" transform="rotate(-90 50 50)" pointer-events="all" stroke="#142b92" stroke-width="6" fill="none"/></svg>');

	$('div.ja-top-mv button.stop').on('click', function() {
		$(this).parent('p').addClass('stop');
		$('div.ja-top-mv ul.slide').slick('slickPause');
		$('div.ja-top-mv ul.slick-dots').addClass('stop');
	});
	
	$('div.ja-top-mv button.play').on('click', function() {
		$(this).parent('p').removeClass('stop');
		$('div.ja-top-mv ul.slide').slick('slickNext').slick('slickPlay');
		$('div.ja-top-mv ul.slick-dots').removeClass('stop');
	});

	$('div.ja-top-mv ul.slick-dots li.slick-active').addClass('on');

	$('div.ja-top-mv ul.slide').on(
		"afterChange",
		(_event, _slick, _currentSlide, _nextSlide) => {
			$('div.ja-top-mv ul.slick-dots li.slick-active').addClass('on');
		}
	)

	$('div.ja-top-mv ul.slide').on('touchmove', function(event, slick, currentSlide, nextSlide){
		$('div.ja-top-mv ul.slide').slick('slickPlay');
	});

	const prevBtn = $('button.sa.sap');
	$('div.ctrl').prepend(prevBtn);

	const nextBtn = $('button.sa.san');
	$('div.ctrl').append(nextBtn);

	$('div.ja-top-mv li.slick-slide > div').on('click', function() {
		const $link = $(this).find('a');
		const href = $link.attr('href');
		const target = $link.attr('target');
	
		if (href) {
			if (target === '_blank') {
				window.open(href, '_blank');
			} else {
				window.location.href = href;
			}
		}
	});

});

$(function () {

	function setHeights() {
		const $items = $('div.ja-top-mv ul.slide li');

		$items.find('dt, dd').css('height', '');
		let maxDt = 0, maxDd1 = 0, maxDd2 = 0;

		$items.each(function () {
			const $dt  = $(this).find('dt');
			const $dd1 = $(this).find('dd:nth-of-type(1)');
			const $dd2 = $(this).find('dd:nth-of-type(2)');

			maxDt  = Math.max(maxDt,  $dt.outerHeight());
			maxDd1 = Math.max(maxDd1, $dd1.outerHeight());
			maxDd2 = Math.max(maxDd2, $dd2.outerHeight());
		});

		$items.each(function () {
			$(this).find('dt').height(maxDt);
			$(this).find('dd:nth-of-type(1)').height(maxDd1);
			$(this).find('dd:nth-of-type(2)').height(maxDd2);
		});
	}

	$('div.ja-top-mv ul.slide').on('setPosition', function () {
		setHeights();
	});

	let resizeTimer;
	$(window).on('resize', function () {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(setHeights, 100);
	});

	setHeights();
});