window.addEventListener('load', function(){
	// Main Scroll Event
	function mainScroll(){
		let windowPos = window.pageYOffset || document.documentElement.scrollTop;

		// Visual Height
		let visualHeight = document.querySelector('.sec01').offsetHeight ;

		// Intro Position
		let introSec = document.querySelector('.sec02');
		let introPos =  windowPos + introSec.getBoundingClientRect().top;

		// Product Position
		let productSec = document.querySelector('.sec03');
		let productHead = document.querySelector('.sec03 .hd');
		let productPos =  windowPos + productSec.getBoundingClientRect().top;

		// Conditional Statement
		if(windowPos >= introPos - (visualHeight / 2 + 100)){
			introSec.classList.add('active');
		}

		if(windowPos >= productPos - productHead.offsetHeight / 2){
			productSec.classList.add('active');
		}
	}

	window.addEventListener('scroll', mainScroll);


	// Visual Height
	function setScreenSize() {
		let vh = window.innerHeight * 0.01;
		document.documentElement.style.setProperty('--vh', `${vh}px`);
	}
	setScreenSize();

	window.addEventListener('resize', setScreenSize);

	// Product
	let prdMenus = document.querySelectorAll('.sec03 .tab-menu > li');
	let prdCons = document.querySelectorAll('.sec03 .tab-con > li');
	
	// Product Swiper
	let productSlides = document.querySelectorAll('.swiper-image');
	let productSwipers = {};

	productSlides.forEach((productSlide) => {
			let sliderId = productSlide.getAttribute('data-slider');
			productSwipers[sliderId] = new Swiper(productSlide, {
					slidesPerView: 1,
					observer: true,
					observeParents: true,
					allowTouchMove: false,
					navigation: {
							nextEl: '.sec03 .next',
							prevEl: '.sec03 .prev',
					},
			});
	});	

	// Product Tab Menu
	prdMenus.forEach((menu, idx) => {
		menu.addEventListener('click', function(){
			prdMenus.forEach((other) => {
				other.classList.remove('on');
			});
			
			prdCons.forEach((other) => {
				other.classList.remove('on');
			});

			menu.classList.add('on');
			prdCons[idx].classList.add('on');
			
			prdIsEvent();
		});
	});

	function prdIsEvent(){
		prdCons.forEach((cont) => {
			let prdThumbs = cont.querySelectorAll('.prd-spec ul li');
			let prdPhotos = cont.querySelectorAll('.photo-list-item');

			if(cont.classList.contains('on')){
				prdThumbs.forEach((thumb, idx) => {
					thumb.addEventListener('click', function(){
						prdThumbs.forEach((other) => {
							other.classList.remove('on');
						});
	
						prdPhotos.forEach((other) => {
							other.classList.remove('on');
							let targetSliderId = other.getAttribute('data-item');

							if (productSwipers[targetSliderId]) {
								productSwipers[targetSliderId].slideTo(0);
							}
						});
	
						thumb.classList.add('on');
						prdPhotos[idx].classList.add('on');
					})
				})
			} else {
				prdThumbs.forEach((other) => {
					other.classList.remove('on');
				});

				prdPhotos.forEach((other) => {
					other.classList.remove('on');
					let targetSliderId = other.getAttribute('data-item');

					if (productSwipers[targetSliderId]) {
						productSwipers[targetSliderId].slideTo(0);
					}
				});

				prdThumbs[0].classList.add('on');
				prdPhotos[0].classList.add('on');
			}
		})
	}
	prdIsEvent();
}, false);

function setCookie(key, value, expiredays) {
    var todayDate = new Date();
    todayDate.setDate(todayDate.getDate() + expiredays);
    document.cookie = key + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function getCookie(key) {
    var result = null;
    var cookie = document.cookie.split(';');
    cookie.some(function (item) {
        // 공백을 제거
        item = item.replace(' ', '');

        var dic = item.split('=');

        if (key === dic[0]) {
            result = dic[1];
            return true;    // break;
        }
    });
    return result;
}
/* Popup Event */
function popupClose(seq) {
    // var popupLayer = document.querySelector('.popup-layer');
    // console.log(popupLayer);

    var value = $('#popup-close_' + seq).val();

    setCookie(seq, value, 1);

    $("#popup_" + seq).hide();

}

/* Popup Event */
function popupClose2(seq) {
    // var popupLayer = document.querySelector('.popup-layer');
    // console.log(popupLayer);


    $("#popup_" + seq).hide();

}