$(function() { 
	$(document).ready(function() {	
/*
		const ROOT = document.documentElement;
		const MIN = 10;
		const THRESHOLD = innerHeight * (1.2 - 0.225);
		const update = e => {
		  const scroll = Math.floor(scrollY / innerHeight * 100);
		  if (scrollY > THRESHOLD) {
			const progress = Math.floor((scrollY - THRESHOLD) / (document.body.scrollHeight - innerHeight - THRESHOLD) * 100);
			ROOT.style.setProperty('--content', progress);
		  }
		  ROOT.style.setProperty('--scroll', Math.max(0, Math.min(scroll, 100 - MIN)));
		};
		window.addEventListener('scroll', update);
*/
		//헤더고정	
		if ($('.main-visual').length > 0) {
			function toggleHeaderFixed() {
				var headerH = $(".header-wrap").outerHeight() || 0;
				var mainH = $(".main-visual").outerHeight() || 0;
				var fixedH = mainH - headerH;
				var scrollTop  = $(window).scrollTop();

				if (scrollTop > fixedH) {
					$(".main-header").css("display", "none");
				} else {
					$(".main-header").css("display", "flex");
				}
			}
			$(window).scroll(toggleHeaderFixed);
			$(document).ready(toggleHeaderFixed);
			toggleHeaderFixed();
		}

		//메인 비쥬얼
		if ($('.main-visual').length > 0) {
			var $owl = $('#mainVisual');
			var isTransitioning = false;
			const Timeout = window.MAIN_VISUAL_TIMEOUT || 5000;
			$owl.owlCarousel({
				items: 1,
				loop: true,
				autoplay: true,
				autoplayTimeout: Timeout,
				mouseDrag: false,
				nav: true,
				navText: ["<i class='material-icons-outlined'>keyboard_arrow_left</i>", "<i class='material-icons-outlined'>keyboard_arrow_right</i>"],
				dots: true,
				dotsData: true,
				dotsEach: true,
				animateOut: 'fadeOut', // 제자리 전환
				smartSpeed: 1,         // 매우 빠른 전환
				responsiveRefreshRate: 10,
				responsiveClass: true,
				onInitialized: initVideos,
				onTranslate: prepareAndPlayNextVideo, // ✅ 도착 전 미리 재생 시작
				onTranslated: function() { isTransitioning = false; } 
			});

			function initVideos(e) {
				$owl.find("video").each(function() {
					this.muted = true;
					this.playsInline = true;
					this.preload = "auto";
					this.loop = false;
				});
				playActiveVideo(); // 첫 실행
			}

			// ✅ 전환 시작 시 즉시 실행하여 딜레이 제거
			function prepareAndPlayNextVideo(e) {
				isTransitioning = true;
				
				// 1. 모든 비디오 일시정지 및 리셋
				$owl.find("video").each(function() {
					this.pause();
					this.currentTime = 0;
				});

				// 2. 다음에 나타날 슬라이드의 인덱스 찾기
				var nextIndex = e.item.index; 
				var $nextVideo = $owl.find(".owl-item").eq(nextIndex).find("video");

				if ($nextVideo.length > 0) {
					var video = $nextVideo.get(0);
					
					// ✅ 즉시 재생 시도 (화면이 바뀌는 0.001초 동안 이미 재생 중이어야 함)
					if (video.readyState >= 2) {
						video.play().catch(function(){});
					} else {
						video.load();
						video.play().catch(function(){});
					}
				}
			}

			// 초기 및 재활성화 시 사용되는 재생 함수
			function playActiveVideo() {
				isTransitioning = false;
				var $activeVideo = $owl.find(".owl-item.active video");
				if ($activeVideo.length === 0) return;
				
				var video = $activeVideo.get(0);
				video.currentTime = 0;
				video.play().catch(function(){});
			}

			document.addEventListener('visibilitychange', function() {
				if (document.hidden) {
					$owl.find("video").each(function() { this.pause(); });
				} else {
					playActiveVideo();
				}
			});

			$(window).on('beforeunload', function() {
				$owl.find("video").each(function() {
					this.pause();
					this.src = "";
					this.load();
				});
			});
		}

		// main-business
		if ($('.main-business').length > 0) {
			/*
			function getOffsets() {
				var offsets = {
					business: $('.main-business').offset().top,
				};
				return offsets;
			}

			function toggleClass(selector, condition, className) {
				if (condition) {
					$(selector).addClass(className);
				} else {
					$(selector).removeClass(className);
				}
			}

			function handleScrollAndResizeB() {
				var offsets = getOffsets();

				var scrollTop = $(window).scrollTop();
				var windowHeight = $(window).height();
				toggleClass('.main-business', scrollTop + windowHeight > offsets.business, 'active');
			}

			$(window).on('scroll resize', handleScrollAndResizeB);

			$(document).ready(function() {
				handleScrollAndResizeB();
			});
			*/

			const mq = window.matchMedia("(min-width: 1024px)");

			function bindBusinessHover(isDesktop) {
				const $links  = $(".main-business .text-item .box");
				const $thumbs = $(".main-business .img-list .thumb");

				$links.off("mouseenter mouseleave");

				if (!isDesktop) {
					$thumbs.removeClass("is-active");
					return;
				}

				$links.on("mouseenter", function () {
					const idx = $(this).closest(".text-item").data("idx");
					$thumbs.removeClass("is-active").eq(idx).addClass("is-active");
				});

				$links.on("mouseleave", function () {
					$thumbs.removeClass("is-active");
				});
			}

			bindBusinessHover(mq.matches);

			mq.addEventListener("change", e => {
				bindBusinessHover(e.matches);
			});
		}

		// main-product
		if ($('.main-product').length > 0) {
			function getOffsets() {
				var offsets = {
					product: $('.main-product').offset().top,
				};
				return offsets;
			}

			function toggleClass(selector, condition, className) {
				if (condition) {
					$(selector).addClass(className);
				} else {
					$(selector).removeClass(className);
				}
			}

			function handleScrollAndResizeP() {
				var offsets = getOffsets();

				var scrollTop = $(window).scrollTop();
				var windowHeight = $(window).height();
				toggleClass('.main-product', scrollTop + windowHeight > offsets.product, 'active');
			}

			$(window).on('scroll resize', handleScrollAndResizeP);

			$(document).ready(function() {
				handleScrollAndResizeP();
			});

			console.clear();

			const elPrevButton = document.querySelector("#prev1");
			const elNextButton = document.querySelector("#next1");

			const flipping = new Flipping();

			const elImages = Array.from(document.querySelectorAll(".main-product .thumb"));
			const elCategory = Array.from(document.querySelectorAll(".main-product .category li"));

			let state = {
				photo: 0
			};

			function send(event) {
				flipping.read();

				const elActives = document.querySelectorAll("[data-active]");

				Array.from(elActives).forEach((el) => el.removeAttribute("data-active"));

				switch (event) {
					case "PREV":
						state.photo--;
						break;
					case "NEXT":
						state.photo++;
						break;
					default:
						state.photo = +event;
						break;
				}

				var len = elImages.length;
				state.photo = Math.max(0, Math.min(state.photo, len - 1));

				Array.from(document.querySelectorAll(`[data-key="${state.photo}"]`)).forEach(
					(el) => {
						el.setAttribute("data-active", true);
					}
				);

				flipping.flip();
			}

			elCategory.forEach((category) => {
				category.addEventListener("click", () => {
					send(category.dataset.key);
				});
			});

			elPrevButton.addEventListener("click", () => {
				send("PREV");
			});

			elNextButton.addEventListener("click", () => {
				send("NEXT");
			});

			send(0);
		}

		//main-quick
		if ($('.main-quick').length > 0) {
			function getOffsets() {
				var offsets = {
					quick: $('.main-quick').offset().top,
				};
				return offsets;
			}

			function toggleClass(selector, condition, className) {
				if (condition) {
					$(selector).addClass(className);
				} else {
					$(selector).removeClass(className);
				}
			}

			function handleScrollAndResizeQ() {
				var offsets = getOffsets();

				var scrollTop = $(window).scrollTop();
				var windowHeight = $(window).height();
				toggleClass('.main-quick', scrollTop + windowHeight > offsets.quick, 'active');
			}

			$(window).on('scroll resize', handleScrollAndResizeQ);

			$(document).ready(function() {
				handleScrollAndResizeQ();
			});
			
			const mq = window.matchMedia("(min-width: 1024px)");

			function bindQuickHover(isDesktop) {
				const $links  = $(".quick-list a");
				const $thumbs = $(".main-quick .thumb-list .thumb");

				$links.off("mouseenter mouseleave");

				if (!isDesktop) {
					$thumbs.removeClass("is-active");
					return;
				}

				$links.on("mouseenter", function () {
					const idx = $(this).closest(".quick-list a").data("idx");
					$thumbs.removeClass("is-active").eq(idx).addClass("is-active");
				});

				$links.on("mouseleave", function () {
					$thumbs.removeClass("is-active");
				});
			}

			bindQuickHover(mq.matches);

			mq.addEventListener("change", e => {
				bindQuickHover(e.matches);
			});
		}

	});
	
});