$(function(){
	$(document).ready(function () {
		$(".btn-top").on("click", function() {
			$("html, body").animate({scrollTop:0}, '1000');
			return false;
		});

		let carouselAnimating = false;
		// 메인 비쥬얼
		$('#mainVisual').owlCarousel({
			items: 1,
			loop: true,
			autoplay:true,
			autoplayTimeout:6000,
			mouseDrag: false,
		 	touchDrag: false,
			nav:false,
			dots: false,
			margin: 0,
			animateOut: 'fadeOut',
			animateIn: 'zoomInDown',
			smartSpeed:1000,
			responsiveRefreshRate:0,
			responsiveClass:true,
			onTranslate: function() {
				carouselAnimating = true; // Set flag when transitioning
			},
			onTranslated: function() {
				carouselAnimating = false; // Reset flag after transition
			}
		});

		// 상품안내 가격
		$('#mainBeef,#mainPork').owlCarousel({
			items: 1,
			loop: true,
			autoplay:true,
			autoplayTimeout:2200,
			mouseDrag: false,
			touchDrag: false,
			nav:false,
			dots: false,
			margin: 0,
			animateOut: 'fadeOutUp',
			animateIn: 'fadeInUp',
			smartSpeed:1000,
			responsiveRefreshRate:0,
			responsiveClass:true,
			onTranslate: function() {
				carouselAnimating = true; // Set flag when transitioning
			},
			onTranslated: function() {
				carouselAnimating = false; // Reset flag after transition
			}
		});

		//소개
		// Main introduction for PC
		const sections = document.querySelectorAll('.section');
		let currentIndex = 0;
		let isScrolling = false;

		// Function to scroll to a specific index section
		function scrollToSection(index) {
			isScrolling = true;
			sections[index].scrollIntoView({ behavior: 'smooth' });
			currentIndex = index;

			setTimeout(() => {
				isScrolling = false;
			}, 1000); // Unlock after scrolling completes
		}

		// IntersectionObserver to update the current index when sections are visible
		const observerOptions = {
			root: null,
			threshold: 0.5, // Detect when half the section is visible
		};

		const observer = new IntersectionObserver((entries) => {
			entries.forEach((entry) => {
				if (entry.isIntersecting) {
					currentIndex = Array.from(sections).indexOf(entry.target);
				}
			});
		});

		// Start observing all sections
		sections.forEach((section) => observer.observe(section));


		// Function to manage active classes for aboutBox
		function checkActiveBoxes() {
			const aboutBoxes = document.querySelectorAll('.aboutBox');
			const thresholdForActive = 0.3; // 50% visibility for active class

			aboutBoxes.forEach((box) => {
				const boxVisible = box.getBoundingClientRect();
				const boxVisibleWidth = boxVisible.width * thresholdForActive;

				// Check if the box is 50% visible
				const boxThresholdLeft = boxVisible.left + boxVisibleWidth; // Left edge
				const boxThresholdRight = boxVisible.right - boxVisibleWidth; // Right edge

				if (boxThresholdLeft < window.innerWidth && boxThresholdRight > 0) {
					box.classList.add('active');
				} else {
					box.classList.remove('active');
				}
			});
		}

		// Function to handle scrolling
		function handleScroll() {
			const mainAbout = document.querySelector('.main-about');
			const mainAboutTop = mainAbout.getBoundingClientRect().top;
			const mainAboutBottom = mainAbout.getBoundingClientRect().bottom;
			const windowHeight = window.innerHeight;

			if (mainAboutTop < windowHeight && mainAboutBottom > 0) {
				let transformX = -1 / 10 * window.scrollY + 1000 / 10;
				const aboutWrap = document.querySelector('.aboutWrap');

				if (transformX < -200) {
					aboutWrap.style.transform = 'translateX(-200vw)';
				} else if (transformX < -100) {
					aboutWrap.style.transform = `translateX(-100vw)`;
				} else if (transformX < 0) {
					//aboutWrap.style.transform = `translateX(${transformX}vw)`;
					aboutWrap.style.transform = `translateX(0vw)`;
				} else {
					aboutWrap.style.transform = 'translateX(0vw)';
				}

				// Check active classes
				checkActiveBoxes();
			} else {
				document.querySelectorAll('.aboutBox').forEach(box => box.classList.remove('active'));
				document.querySelector('.aboutWrap').style.transform = 'translateX(0vw)';
			}
		}


		// Function to manage active classes for aboutBox
		function checkActiveBoxes2() {
			const aboutBoxes = document.querySelectorAll('.aboutBox');
			const thresholdForActive = 0.3; // 50% visibility for active class

			aboutBoxes.forEach((box) => {
				const boxVisible = box.getBoundingClientRect();
				const boxVisibleHeight = boxVisible.height * thresholdForActive;

				// Check if the box is 50% visible vertically
				const boxThresholdTop = boxVisible.top + boxVisibleHeight; // Top edge
				const boxThresholdBottom = boxVisible.bottom - boxVisibleHeight; // Bottom edge

				if (boxThresholdTop < window.innerHeight && boxThresholdBottom > 0) {
					box.classList.add('active');
				} else {
					box.classList.remove('active');
				}
			});
		}

		// Initialize event listeners based on screen size
		function init() {
			if (window.innerWidth >= 961) {
				window.addEventListener('scroll', handleScroll);
				document.querySelector('.aboutWrap').style.overflowY = 'hidden'; // Disable vertical scroll
				document.querySelector('.aboutWrap').style.overflowX = 'auto'; // Enable horizontal scroll
			} else {
				// Mobile settings
				window.removeEventListener('scroll', handleScroll);
				document.querySelector('.aboutWrap').style.overflowY = 'auto'; // Enable vertical scroll
				document.querySelector('.aboutWrap').style.overflowX = 'hidden'; // Disable horizontal scroll
				document.querySelector('.aboutWrap').style.transform = 'translateX(0vw)';

				// Update active classes on mobile
				document.addEventListener('scroll', checkActiveBoxes2);

			}
		}

		// Handle window resizing
		window.addEventListener('resize', init);

		// Initial setup
		init();
		scrollToSection(0); // Scroll to the first section on initial load




/*
		// 메인 소개 PC일경우	
		const sections = document.querySelectorAll('.section');
		let currentIndex = 0;
		let isScrolling = false;

		// 특정 인덱스 섹션으로 스크롤하는 함수
		function scrollToSection(index) {
			isScrolling = true;
			sections[index].scrollIntoView({ behavior: 'smooth' });
			currentIndex = index;

			setTimeout(() => {
				isScrolling = false;
			}, 1000); // 스크롤 완료 후 잠금 해제
		}

		// IntersectionObserver로 각 섹션이 화면에 나타날 때마다 현재 인덱스 업데이트
		const observerOptions = {
			root: null,
			threshold: 0.5, // 섹션이 화면의 절반 이상 보일 때 감지
		};

		const observer = new IntersectionObserver((entries) => {
			entries.forEach((entry) => {
				if (entry.isIntersecting) {
					currentIndex = Array.from(sections).indexOf(entry.target);
				}
			});
		}, observerOptions);

		// 모든 섹션에 대해 관찰 시작
		sections.forEach((section) => observer.observe(section));

		window.addEventListener('wheel', (event) => {
			if (isScrolling || carouselAnimating) return; // 스크롤 중일 때는 동작하지 않도록 제어

			// 현재 섹션이 긴 경우 일반 스크롤 허용
			const currentSection = sections[currentIndex];
			if (currentSection.classList.contains('long-section')) {
				return; // 긴 섹션은 기본 스크롤 유지
			}

			// 짧은 섹션은 스크롤 이벤트 제어
			if (event.deltaY > 0) {
				// 아래로 스크롤할 때 다음 섹션으로 이동
				if (currentIndex < sections.length - 1) {
					scrollToSection(currentIndex + 1);
				}
			} else {
				// 위로 스크롤할 때 이전 섹션으로 이동
				if (currentIndex > 0) {
					scrollToSection(currentIndex - 1);
				}
			}
		});

		let handleScroll = function() {
			// .main-about 요소의 세로 스크롤 위치 가져오기
			const mainAbout = document.querySelector('.main-about');
			const mainAboutTop = mainAbout.getBoundingClientRect().top;
			const mainAboutBottom = mainAbout.getBoundingClientRect().bottom;
			const windowHeight = window.innerHeight;

			// 세로 스크롤 위치가 .main-about에 도달했을 때만 가로 스크롤 효과를 적용
			if (mainAboutTop < windowHeight && mainAboutBottom > 0) {
				// 세로 스크롤 위치에 따라 aboutWrap의 가로 이동 값을 계산
				let transformX = -1 / 10 * window.scrollY + 1000 / 10;

				// aboutWrap 요소의 가로 스크롤 위치 설정
				const aboutWrap = document.querySelector('.aboutWrap');
				if (transformX < -200) {
					aboutWrap.style.transform = 'translateX(-200vw)';
				} else if (transformX < 0) {
					aboutWrap.style.transform = `translateX(${transformX}vw)`;
				} else {
					aboutWrap.style.transform = 'translateX(0vw)';
				}

				// 각 aboutBox의 가로 스크롤 위치에 따른 active 클래스 제어
				const aboutBoxes = document.querySelectorAll('.aboutBox');
				const boxWidth = 100; // 각 aboutBox의 가로 너비를 vw 단위로 설정
				const thresholdForActive = 0.5; // 50% 보일 때 active 클래스 추가

				aboutBoxes.forEach((box, index) => {
					// 각 aboutBox의 시작 및 끝 범위 계산
					const boxStart = -boxWidth * index;        // 예: 첫 번째 0vw, 두 번째 -100vw, 세 번째 -200vw
					const boxEnd = boxStart - boxWidth;        // 예: 첫 번째 -100vw, 두 번째 -200vw, 세 번째 -300vw

					// 박스가 50% 이상 보이는지 확인
					const boxVisible = box.getBoundingClientRect();
					const boxVisibleWidth = boxVisible.width * thresholdForActive; // 50% 너비
					const boxThresholdLeft = boxVisible.left + boxVisibleWidth; // 왼쪽 끝
					const boxThresholdRight = boxVisible.right - boxVisibleWidth; // 오른쪽 끝

					if (boxThresholdLeft < window.innerWidth && boxThresholdRight > 0) {
						//if (index === 1 || index === 2) { // 2번째와 3번째 aboutBox에만 적용
							box.classList.add('active');
						//}
					} else {
						box.classList.remove('active');
					}
				});
			} else {
				// .main-about이 화면 밖으로 나가면 모든 aboutBox에서 active 클래스 제거
				document.querySelectorAll('.aboutBox').forEach(box => box.classList.remove('active'));
				document.querySelector('.aboutWrap').style.transform = 'translateX(0vw)'; // 기본 위치로 초기화
			}
		};

		// 세로 스크롤 이벤트 리스너 추가
		//window.addEventListener('scroll', handleScroll);
		if ($(document).width() >= 768) {
			window.addEventListener('scroll', handleScroll);
		} else {
			window.removeEventListener('scroll', handleScroll);
			document.querySelector('.aboutWrap').style.transform = '';  // 초기화
		}

		// 리사이즈 이벤트 처리
		$(window).resize(function() {
			if ($(document).width() >= 768) {
				window.addEventListener('scroll', handleScroll);
			} else {
				window.removeEventListener('scroll', handleScroll);
				document.querySelector('.aboutWrap').style.transform = '';  // 초기화
			}
		});

		// 추가: 최초 접속 시 scrollToSection 호출
		scrollToSection(0); // 최초 접속 시 첫 번째 섹션으로 스크롤

*/


/*
		if ($(document).width() >= 961) {
			window.addEventListener('scroll', handleScroll);
		} else {
			window.removeEventListener('scroll', handleScroll);
			document.querySelector('.aboutWrap').style.transform = '';  // 초기화
		}

		// 리사이즈 이벤트 처리
		$(window).resize(function() {
			if ($(document).width() >= 961) {
				window.addEventListener('scroll', handleScroll);
			} else {
				window.removeEventListener('scroll', handleScroll);
				document.querySelector('.aboutWrap').style.transform = '';  // 초기화
			}
		});
		*/


		$('#od_hope_date').on('click', function() {
			// Select the specific option in the select box
			$('#selectBox').val(''); // Change 'option2' to the desired option value
			$('#itemSelect').css('display','none');
			$('#orderInfo').css('display','block');

		});
		 $('#selectBox').on('click', function() {
			if ($('#od_hope_date').val() === "") {
				alert("배송/픽업날짜를 먼저 선택해주세요.");
				$(this).blur();  // Remove focus from the select box
			}
		});

		// 주문 상품 선택시 항목
		$('#itemSelect').css('display','none');
		$('#orderInfo').css('display','block');

		//$('.btn-item.open').on('click', function(){
		//$("#selectBox").change(function() {

		$('#selectBox').on('change', function(){
			$('#itemSelect').css('display','block');
			$('#orderInfo').css('display','none');
			//$(".btn-item").removeClass("open");
			//$(".btn-item").addClass("close");
			return false;
		});

/*
		$('.btn-item.open').on('click', function(){
			$('#itemSelect').css('display','block');
			$('#orderInfo').css('display','none');
			$(".btn-item").removeClass("open");
			$(".btn-item").addClass("close");
			return false;
		});
		$('.btn-item.close').on('click', function(){
			$('#itemSelect').css('display','none');
			$('#orderInfo').css('display','block');
			$(".btn-item").addClass("open");
			$(".btn-item").removeClass("close");
			return false;
		});
*/
		$('#itemClose').on('click', function(){
			$('#itemSelect').css('display','none');
			$('#orderInfo').css('display','block');
			//$(".btn-item").addClass("open");
			//$(".btn-item").removeClass("close");
			return false;
		});

		// 상품 주문시 상품 수 카운터 버튼
		function count(type, resultId) {
			// 결과를 표시할 element
			const resultElement = document.getElementById(resultId);
			// 현재 화면에 표시된 값
			let number = parseInt(resultElement.value);
			// 더하기/빼기
			if (type === 'plus') {
				number += 1;
			} else if (type === 'minus' && number > 1) {
				number -= 1;
			}
			// 결과 출력
			resultElement.value = number;
		}
		// count 함수는 다른 곳에서 호출될 수 있도록 전역으로 설정
		window.count = count;
		// 상품 주문시 상품 수 카운터 버튼


		// 주문 픽업/버스 선택시 항목
		$('#busView1,#busView2').css('display','block');
		$("#odbus").attr("required", true); //활성화
		$("#odbus").addClass('required'); //추가
		$('#pickView1,#pickView2').css('display','none');
		$("#pickTime").attr("disabled", true); //활성화
		$("#pickTime").addClass('disabled'); //추가
		$("#pickTime").removeAttr("required"); //비활성화
		$("#pickTime").removeClass('required'); //삭제

		$("#od_settle_case").attr("disabled", true); //활성화
		$("#od_settle_case").addClass('disabled'); //추가
		$("#od_settle_case").removeAttr("required"); //비활성화
		$("#od_settle_case").removeClass('required'); //삭제

		$('input[type="radio"][id="btnBus"]').on('click', function(){ //버스
		  var chkValue = $('input[type="radio"][id="btnBus"]:checked').val();
		  if(chkValue){
				$('#busView1,#busView2').css('display','block'); //활성화
				$("#odbus").attr('required', true); //활성화
				$("#odbus").addClass('required'); //추가

				$('#pickView1,#pickView2').css('display','none'); //비활성화
				$("#pickTime").attr("disabled", true); //활성화
				$("#pickTime").addClass('disabled'); //추가
				$("#pickTime").removeAttr("required"); //비활성화
				$("#pickTime").removeClass('required'); //삭제

				$("#od_settle_case").attr("disabled", true); //활성화
				$("#od_settle_case").addClass('disabled'); //추가
				$("#od_settle_case").removeAttr("required"); //비활성화
				$("#od_settle_case").removeClass('required'); //삭제
		  }
		});
		$('input[type="radio"][id="btnStore"]').on('click', function(){ //픽업
		  var chkValue = $('input[type="radio"][id="btnStore"]:checked').val();
		  if(chkValue){

				$('#busView1,#busView2').css('display','none'); //비활성화
				$("#odbus").removeAttr("required"); //비활성화
				$("#odbus").removeClass('required'); //삭제

				$('#pickView1,#pickView2').css('display','block'); //활성화
				$("#pickTime").removeAttr("disabled"); //활성화
				$("#pickTime").removeClass('disabled'); //추가
				$("#pickTime").attr("required", true); //활성화
				$("#pickTime").addClass('required'); //추가

				$("#od_settle_case").removeAttr("disabled", true); //활성화
				$("#od_settle_case").removeClass('disabled'); //추가
				$("#od_settle_case").attr("required", true); //활성화
				$("#od_settle_case").addClass('required'); //추가
		  }
		});
		
		// 위치를 가져옴
		/*
		var hdOffset = $('.main-price').offset().top;
		var bfOffset = $('.main-price .beef').offset().top;
		var pkOffset = $('.main-price .pork').offset().top;
		var odOffset = $('.main-order .container').offset().top;
		var jdOffset = $('.main-location').offset().top;
		$(window).scroll(function() {
			// 현재 스크롤 위치
			var scrollPos = $(window).scrollTop();
			
			// 현재 화면의 높이
			var windowHeight = $(window).height();

			// 화면의 50% 도달 시점
			var triggerPoint = scrollPos + (windowHeight / 2);


			// .main-price 요소가 화면에 진입하면
			if (scrollPos + 1 > hdOffset) {
				$('#header').addClass('header-fixed2'); // 클래스 추가 (원하는 동작 수행)
			} else {
				$('#header').removeClass('header-fixed2'); // 클래스 제거 (원하는 동작 수행)
			}
			// .main-price .beef 요소가 화면에 진입하면
			if (scrollPos + windowHeight > bfOffset) {
				$('.main-price .beef').addClass('active'); // 클래스 추가 (원하는 동작 수행)
			} else {
				$('.main-price .beef').removeClass('active'); // 클래스 제거 (원하는 동작 수행)
			}
			// .main-price .pork 요소가 화면에 진입하면
			if (scrollPos + windowHeight > pkOffset) {
				$('.main-price .pork').addClass('active'); // 클래스 추가 (원하는 동작 수행)
			} else {
				$('.main-price .pork').removeClass('active'); // 클래스 제거 (원하는 동작 수행)
			}
			// .main-order 요소가 화면에 진입하면
			if (scrollPos + windowHeight > odOffset) {
				$('.main-order').addClass('active'); // 클래스 추가 (원하는 동작 수행)
			} else {
				$('.main-order').removeClass('active'); // 클래스 제거 (원하는 동작 수행)
			}
			// .main-location 요소가 화면에 50% 진입하면
			if (triggerPoint > jdOffset) {
				$('.main-location').addClass('active'); // 클래스 추가 (원하는 동작 수행)
			} else {
				$('.main-location').removeClass('active'); // 클래스 제거 (원하는 동작 수행)
			}
		});

		// 초기 로드시 이미 화면에 요소가 있는지 확인
		$(window).trigger('scroll');
		*/

		

/*
		$(window).scroll(function(){
			var mst = $(window).scrollTop() ;
			if (mst > 0)
			{
				$('#header').addClass('header-fixed');
			} else {
				$('#header').removeClass('header-fixed');
			}
		});
*/		
		// 요소의 위치를 가져오는 함수
		function getOffsets() {
			var offsets = {
				pr: $('.main-price').offset().top,
				bf: $('.main-price .beef').offset().top,
				pk: $('.main-price .pork').offset().top,
				od: $('.main-order .container').offset().top,
				jd: $('.main-location').offset().top,
			};

			// 조건에 따라 hd 값을 설정
			if ($(document).width() >= 961) {
				offsets.hd = $('.main-price').offset().top; // hd의 조건에 따라 값 변경
			} else {
				offsets.hd = $('.main-about').offset().top; // 기본값
			}

			return offsets;
		}

		// 클래스를 토글하는 함수
		function toggleClass(selector, condition, className) {
			if (condition) {
				$(selector).addClass(className);
			} else {
				$(selector).removeClass(className);
			}
		}

		// 스크롤 및 리사이즈 이벤트 처리 함수
		function handleScrollAndResize() {
			var offsets = getOffsets();

			var scrollTop = $(window).scrollTop();
			var windowHeight = $(window).height();
			var triggerPoint = scrollTop + (windowHeight / 2);

			toggleClass('#header', scrollTop + 1 > offsets.hd, 'header-fixed');
			toggleClass('.main-price .beef', scrollTop + windowHeight > offsets.bf, 'active');
			toggleClass('.main-price .pork', scrollTop + windowHeight > offsets.pk, 'active');
			toggleClass('.main-order', scrollTop + windowHeight > offsets.od, 'active');
			toggleClass('.main-location', triggerPoint > offsets.jd, 'active');
		}

		// 스크롤 및 리사이즈 이벤트 리스너 등록
		$(window).on('scroll resize', handleScrollAndResize);

		// 초기 로드시 이미 화면에 요소가 있는지 확인
		$(document).ready(function() {
			handleScrollAndResize();
		});



    });


});