document.addEventListener("DOMContentLoaded", function() {
  // innerWidth를 기준으로 실행할 함수를 결정
  if (window.innerWidth < 813) {
    //executeFunction1();
  } else {
    //executeFunction2();
  }
});

function executeFunction1() {
  var thumbnail = document.getElementById("thumbnail");
  thumbnail.classList.add("on");
  // 비디오가 로드될 때까지 썸네일을 보여줌
  document.getElementById("video_m").addEventListener("load", function() {
    console.log('비디오로드1');
    //thumbnail.style.display = "none";
  });

  // 비디오의 소스를 설정하여 비디오 로드 시작
  var videoElement = document.getElementById("video_m");
  var videoSource = "https://player.vimeo.com/video/954607665?badge=0&amp;autopause=0&autoplay=1&loop=1&title=0&background=1&amp;player_id=0&amp;app_id=58479";
  videoElement.src = videoSource;
  
  // 일정 시간이 지나면 썸네일 이미지 숨김
  setTimeout(function() {
    thumbnail.style.display = "none";
  }, 2450); // 2.5초 후에 썸네일 이미지를 숨김
}

function executeFunction2() {
  var thumbnail = document.getElementById("thumbnail");
  thumbnail.classList.add("on");
  // 비디오가 로드될 때까지 썸네일을 보여줌
  document.getElementById("video").addEventListener("load", function() {
    console.log('비디오로드2');
   
  });

  // 비디오의 소스를 설정하여 비디오 로드 시작
  var videoElement = document.getElementById("video");
  var videoSource = "https://player.vimeo.com/video/954607665?badge=0&amp;autopause=0&autoplay=1&loop=1&title=0&background=1&amp;player_id=0&amp;app_id=58479"; // 여기에 비디오의 URL을 넣어주세요
  videoElement.src = videoSource;
  
  // 일정 시간이 지나면 썸네일 이미지 숨김
  setTimeout(function() {
    thumbnail.style.display = "none";
  }, 2450); // 2.5초 후에 썸네일 이미지를 숨김
}





$(function(){
	Splitting();

	$("#header").mouseleave(function(){
		$("#header").removeClass("on");
		$(".sub_nav").stop().slideUp();
	});

	var vod_layer;
	$("#play_btn").on('click', function(){
		//console.log('클릭');
		$(".vwrap").html(vod_layer);
		 $(".vdim").fadeIn(300);
		 $(".vpop").fadeIn(300);
	});

	$(".vclose").on('click', function(){
		vod_layer = $(".vwrap").html();
		$(".vwrap").html("");
		 
		 $(".vdim").fadeOut(300);
		 $(".vpop").fadeOut(300);
		 //console.log(vod_layer);
	});




	var nswiper = new Swiper( '.news', {
			effect: 'slide',
			speed: 1200,
			slidesPerView: '2',
			spaceBetween: 50,
			allowTouchMove: true,
			centeredSlides: false,
			loop:true,
			autoplay: { 
			delay: 2500,  
			disableOnInteraction: false,
			},
			navigation: {
				nextEl: '.nnext',
				prevEl: '.nprev',
				},
			breakpoints: {
				1500: {
				spaceBetween: 30,
				},
				1024: {
				slidesPerView: '1',
				spaceBetween: 20,
				},
				
			},
			
		});

	/*스크롤시 헤더 숨기기*/
	 
	
	var mw;
	$(document).ready(function(){
		mw = $(window).width();
		if(mw >= 813){
			const header = $('#header');
			let prevY = 0;
			$(window).scroll(function() {
				let currentY = $(window).scrollTop();
				
				if (currentY > prevY && currentY > 70) {
					header.css({ top: '-100%' });
					header.addClass('on');
				}else {
					header.css({ top: '0%' });
					header.addClass('on');
				}

				prevY = currentY;

				let sct = $(this).scrollTop();
				sct <= 0 ? header.removeClass('open') : header.addClass('open');
			});
		}else{
			console.log('d');
			$(window).scroll(function(){
					var scrollValue =  $(window).scrollTop();
					//console.log(scrollValue);
					if(scrollValue >=10){
					$("#header").addClass("on");		
					}else if(scrollValue < 10){
					$("#header").removeClass("on");		
					}
			});
		}		
	});



});

document.addEventListener("DOMContentLoaded", function () {
  // ScrollTrigger initialization
  gsap.registerPlugin(ScrollTrigger);

//1.visual
let media = gsap.matchMedia();
  // Define the animations for each section
 media.add("(min-width:990px)", () => {
    gsap
      .timeline({
        scrollTrigger: {
          trigger: '.visual',
          markers: false,
          start: '0%, 0%',
          end: '115%, 78%',
          pin: false,
          scrub: 1,
			  ease: 'slow',
		 duration: 6,
          onEnter: e => {
		   $('.mainarea_vod .bg_black').css({ display: 'none' });
		  },
          onEnterBack: e => {
            $('.mainarea_vod').css({ display: 'block' });
          },
          onLeave: e => {
            $('.mainarea_vod').css({ display: 'none' });
            $('.turnkey_ele').css({ display: 'block' });
          },
          onLeaveBack: e => {
		  $('.mainarea_vod .bg_black').css({ display: 'block' });
		  },
        },
      })
      .fromTo(
        '.mainarea_vod',
        {		
			'width': '100%',
			'height': '100%',
			'bottom': '0%',
			'border-radius': '0px',
        },
        {			
			'width': '608px',
			'height': '766px',
			'bottom': '-58%',
			'border-radius': '40px',
			'duration': 3,
        },
      );
	
		gsap.fromTo(	'.mainarea_vod .img',{opacity: 0,},{
			scrollTrigger: {
				trigger: '.visual',
				start: '0%, 0%',
				end: '100% 100%',
				markers:false,
				scrub: 2,
			},
			opacity: 1,
			duration: 2,
		});

		gsap.fromTo(	'.visual .mainarea_title .title, .visual .mainarea_title .sub',{color:"#fff"},{
			scrollTrigger: {
				trigger: '.visual',
				start: '0%, 0%',
				end: '100% 100%',
				markers:false,
				scrub: 2,
			},
			color:"#000",
			duration: 2,
		});


    });

media.add("(min-width:813px) and (max-width:989px)", () => {
  gsap
    .timeline({
      scrollTrigger: {
        trigger: '.visual',
        markers:false,
        start: '0%, 0%',
        end: '115%, 87%',
        pin: false,
        scrub: 1,
		ease: 'slow',
        duration: 6,
        onEnter: e => {
		$('.mainarea_vod .bg_black').css({ display: 'none' });
		},
        onEnterBack: e => {
          $('.mainarea_vod').css({ display: 'block' });
        },
        onLeave: e => {
          $('.mainarea_vod').css({ display: 'none' });
          $('.turnkey_ele').css({ display: 'block' });
        },
        onLeaveBack: e => {
		$('.mainarea_vod .bg_black').css({ display: 'block' });
		},
      },
    })
    .fromTo(
      '.mainarea_vod',
      {
        'width': '100%',
        'height': '100%',
        'bottom': '0%',
        'border-radius': '0px',
      },
      {
        'width': '410px',
        'height': '680px',
        'bottom': '-25%',
		'border-radius': '40px',
         'duration': 3,
      },
    );

		 gsap.fromTo(
        '.mainarea_vod .img',
        {
          opacity: 0,
        },
        {
          scrollTrigger: {
            trigger: '.visual',
            start: '0%, 0%',
            end: '100% 100%',
            markers:false,
            scrub: 2,
          },
          opacity: 1,
          duration: 2,
	},
  );
});
	

//2.
media.add("(min-width: 813px)", () => {
    gsap
      .timeline({
        scrollTrigger: {
          trigger: '.visual',
          start: '23%, 0%',
          end: '100%, 100%',
          markers: false,
          toggleActions: 'play play play reverse',
        },
      })
      .fromTo('.mainarea_title', {
       opacity:1, 
      },
	{opacity:1, y:-200},
			)
      .fromTo(
	'.mainarea_list_title .line',
	{
		width:'0%'
		},
	{
		width:'30%'
	},
	).fromTo(
        '.mainarea_list_title .scate',
        {
          scale: 3,
        },
        {
          scale: 1,
          duration: 0.5,
        },
      ).to('.mainarea_list_title', {
        y: -30,
        duration: 1,
      });
    });


//812
media.add("(max-width: 812px)", () => {
    gsap
      .timeline({
        scrollTrigger: {
          trigger: '.visual',
          start: '23%, 0%',
          end: '100%, 100%',
          markers: false,
          toggleActions: 'play play play reverse',
        },
      })
      .to('.mainarea_title', {
        y: -200,
      }).fromTo(
	'.mainarea_list_title .line',
	{
		width:'0%'
		},
	{
		width:'30%'
	},
	).fromTo(
        '.mainarea_list_title .scate',
        {
          scale: 1.5,
        },
        {
          scale: 1,
          duration: 0.5,
        },
      )
      .to('.mainarea_list_title', {
        y: -30,
        duration: 1,
      }).to('#play_btn', {
			display:'none',
			duration:0.5,
		});
    });



//solution list

let yPos = '55vh';
let posVal = 'relative';

 gsap
      .timeline({
        scrollTrigger: {
          trigger: '.solution',
          markers: false,
          start: '0%, 50%',
          end: '150%, 100%',
          pin: false,
          scrub: 0.5,
          onEnter: e => {
             //$('.turnkey_ele').css({ display: 'block' });
			$('.s_list3 h3').addClass('change-style');
			
          },
          onEnterBack: e => {
			  //여기가 문제...
            //$('.main-solution').css({ position: posVal  });
            $('.turnkey_ele').css({ display: 'block' });
			$('.s_list3 h3').addClass('change-style');
          },
          onLeave: e => {
             //$('.main-solution').css({ position: 'fixed' });
             //$('.turnkey_ele').css({ display: 'none' });
			$('.s_list3 h3').removeClass('change-style');
          },
          onLeaveBack: e => {
            //$('.turnkey_ele').css({ display: 'none' });
			$('.s_list3 h3').removeClass('change-style');
          },
        },
      })
      .add('img')
      .to('.s_list_img img', {
       transform: 'translate(-50%, -50%) scale(1)',
        duration: 1,
      }, 'img')
      .to('.s_list_img img', {
		
        height: '113%',
        duration: 1,
      }, 'img')
      .fromTo(
			'.s_list3 h3', 
		{
			//opacity: 0,
			//yPercent: 0,
			//여기가 문제 아마도..
			y:0,
		},
		{
			//yPercent: 580,
			y: yPos,
			transform:'scale(4)',
			duration: 4,
			ease: 'sine.in',
	},
 ).to(
		'.s_list3 h3', 
		{
			//yPercent: 580,
			y: yPos,
			transform:'scale(4)',
			duration:3
		}
		).to(
				'.s_list3 h3', 
		{
			//yPercent: 520,
			y: yPos,
			opacity:0,
			transform:'scale(4)',
			duration:2
		}
			
		);

media.add("(min-width: 1400px)", () => {
    yPos = '55vh'; // 큰 화면에서는 다시 55vh로 변경
});

media.add("(min-width: 1240px) and (max-width: 1399px)", () => {
    yPos = '65vh'; 
});

media.add("(min-width: 990px) and (max-width: 1239px)", () => {
    yPos = '55vh'; 
});


media.add("(min-width: 813px) and (max-width: 989px)", () => {
    yPos = '50vh'; 
});


media.add("(max-width: 812px)", () => {
    yPos = '30vh'; // 작은 화면에서는 30vh로 변경
	posVal = 'fixed';
	 
	 gsap
      .timeline({
        scrollTrigger: {
          trigger: '.solution',
          markers: false,
          start: '0%, 43.5%',
          end: '100%, 100%',
          pin: false,
          scrub: 0.5,
          onEnter: e => {
             //$('.turnkey_ele').css({ display: 'block' });
			$('.s_list3 h3').addClass('change-style');
			//alert(posVal);
          },
          onEnterBack: e => {
			  //여기가 문제...
            //$('.main-solution').css({ position: posVal  });
			//alert(posVal);
            $('.turnkey_ele').css({ display: 'block' });
			$('.s_list3 h3').addClass('change-style');
          },
          onLeave: e => {
             //$('.main-solution').css({ position: 'fixed' });
             //$('.turnkey_ele').css({ display: 'none' });
			$('.s_list3 h3').removeClass('change-style');
			//alert(posVal);
          },
          onLeaveBack: e => {
            //$('.turnkey_ele').css({ display: 'none' });
			$('.s_list3 h3').removeClass('change-style');
			//alert(posVal);
          },
        },
      });
});





//240226 고정이미지 turnkey

media.add("(min-width: 990px)", () => {
      gsap.fromTo(
        '.turnkey_ele',
        {
			'width': '608px',
			'height': '766px',
			'border-radius': '40px',
        },
        {
          scrollTrigger: {
            trigger: '.solution .list_wrap',
            markers: false,
            start: '10% 30%',
            end: '100% 80%',
            pin: false,
            scrub: 1,
            onEnter: e => {
              $('.turnkey_ele').addClass('fix');
            },
            onLeave: e => {
            },
            onEnterBack: e => {
            //$('.turnkey_ele').css({ display: 'block' });
            },
            onLeaveBack: e => {
              $('.turnkey_ele').removeClass('fix');
            },
          },
			'width': '1920px',
			'height': '970px',
			'border-radius': '0px',
			duration:1,
				
        },
      )
    });

//813
 media.add("(min-width: 813px) and (max-width: 989px)", () => {
      gsap.fromTo(
        '.turnkey_ele',
        {
			'width': '410px',
			'height': '640px',
			'border-radius': '40px',
        },
        {
          scrollTrigger: {
            trigger: '.solution .list_wrap',
            markers: false,
            start: '10% 30%',
            end: '100% 80%',
            pin: false,
            scrub: 1,
            onEnter: e => {
              $('.turnkey_ele').addClass('fix');
            },
            onLeave: e => {
            },
            onEnterBack: e => {
            //$('.turnkey_ele').css({ display: 'block' });
            },
            onLeaveBack: e => {
              $('.turnkey_ele').removeClass('fix');
            },
          },
			'width': '1920px',
			'height': '970px',
			'border-radius': '0px',
			duration:1,
				
        },
      )
    });

 media.add("(max-width: 812px)", () => {
      gsap.fromTo(
        '.turnkey_ele',
        {
          'width': '70%',
          'height': '50%',
          'border-radius': '40px',
        },
        {
          scrollTrigger: {
            trigger: '.solution .list_wrap',
            markers: false,
            start: '0%, 25%',
            end: '100% 80%',
            pin: false,
            scrub: 1,
            onEnter: e => {
              $('.turnkey_ele').addClass('fix');
            },
            onLeave: e => {
            },
            onEnterBack: e => {
              // $('.turnkey_ele').css({ display: 'block' });
            },
            onLeaveBack: e => {
              $('.turnkey_ele').removeClass('fix');
            },
          },
          'width': '100%',
          'height': '100vh',
          'border-radius': '0px',
          duration:1
        },
      )
    });

//main-solution pin
/*
 gsap.timeline({
        scrollTrigger: {
          trigger: '.main-solution',
          markers: false,
          start: '0%',
          end: '+=320%',
          pin: true,
          scrub: 0.5,
          onEnter: e => {
            $('.main-solution').css({ position: 'fixed' });
          },
          onEnterBack: e => {
            $('.main-solution').css({ position: 'fixed' });
            $('.header').removeClass('black-mode');
            $('.turnkey_ele').css({ display: 'block' });
          },
          onLeave: e => {
            $('.header').addClass('black-mode');
            $('.turnkey_ele').css({ display: 'none' });
            $('.main-solution').css({ position: 'relative' });
          },
          onLeaveBack: e => {
            $('.main-solution_text').removeClass('on');
            $('.main-solution_text').removeClass('off');
			//$('.main-solution_text.sec01').addClass("on");
          },
        },
      })
*/


	solution = gsap.timeline({
		scrollTrigger: {
			trigger: '.main-solution',
			markers: false,
			start: '0%',
			end: '+=800%',
			pin: true,
			scrub: 0.5,
			onEnterBack: e => {
				$('.header').removeClass('black-mode');
				$('.turnkey_ele').css({ display: 'block' });
			},
			onLeave: e => {
				$('.header').addClass('black-mode');
				$('.turnkey_ele').css({ display: 'none' });
			},
		},
	})

	
	solution.fromTo('.main-solution_sec01',{height: '0',}, {duration: 1, 
		onStart: function(){
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec01").addClass("on");
		},
		onReverseComplete: function() {
			$(".main-solution_text").removeClass("on");
		}
	})
	solution.fromTo('.main-solution_sec02',{opacity:0}, {opacity:1,duration: 1, 
		onStart: function(){
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec02").addClass("on");
		},
		onReverseComplete: function() {
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec01").addClass("on");
		}
	})
	solution.fromTo('.main-solution_sec03',{opacity:0}, {opacity:1,duration: 1, 
		onStart: function(){
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec03").addClass("on");
		},
		onReverseComplete: function() {
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec02").addClass("on");
		}
	})
	solution.fromTo('.main-solution_sec04',{opacity:0}, {opacity:1,duration: 1, 
		onStart: function(){
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec04").addClass("on");
		},
		onReverseComplete: function() {
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec03").addClass("on");
		}
	})
	solution.fromTo('.main-solution_sec05',{opacity:0}, {opacity:1,duration: 1, 
		onStart: function(){
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec05").addClass("on");
		},
		onReverseComplete: function() {
			$(".main-solution_text").removeClass("on");
			$(".main-solution_text.sec04").addClass("on");
		}
	})
	solution.fromTo('.main-solution_sec05 .move_title',{opacity:0,xPercent:-30,}, { opacity:1,xPercent:0,duration: 1,})


/*merit: fix scroll*/
let fixScrollTrigger = function(){
		
		ScrollTrigger.matchMedia({
		// desktop
			"(min-width: 1400px)": function() {

				let msec = gsap.timeline({  
					scrollTrigger: {
						trigger: ".merit", // 객체기준범위
						pin: true, // 고정
						start: "top 90px", // 시작점
						end: "+=100%", // 끝점
						scrub: 2, // 모션바운스
					}
				});			
				
				msec.from(".merit .iconarea .list", {opacity:0,y:0, duration:0.3, ease:"none",});
				msec.to(".merit .iconarea .list", {opacity:1, y:-1500, duration:0.6, ease:"none",});

			
			},
		// mobile
			"(max-width: 1399px)": function() {	
				
				let msec = gsap.timeline({  
					scrollTrigger: {
						trigger: ".merit", // 객체기준범위
						pin: true, // 고정
						start: "top 0px", // 시작점
						end: "+=100%", // 끝점
						scrub: 1, // 모션바운스
					}
				});			
				
				msec.from(".merit .iconarea .list", {opacity:0,y:150, duration:0.3, ease:"none",});
				msec.to(".merit .iconarea .list", {opacity:1, y:0, duration:0.6, ease:"none",});

			},
			"all": function(){
			}

		});
	};

	fixScrollTrigger();


//loadfunction끝






	





});