$(function() {

   var $status = $('.pagingInfo');
   var $slickElement = $('#main-slider');

   $slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
     //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
     var i = (currentSlide ? currentSlide : 0) + 1;
     $status.html("<p>" + "0" + i + "</p>" + "&ensp;/&ensp;" + "<p>" + "0" + slick.slideCount + "</p>");
   });


   //메인슬라이드
   $slickElement.not('.slick-initialized').slick({
     slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
     fade: true,
     infinite: true, //무한 반복 옵션
     slidesToShow: 1, // 한 화면에 보여질 컨텐츠 개수
     slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수
     speed: 1000, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
     lazyLoad: 'progressive',
     arrows: true, // 옆으로 이동하는 화살표 표시 여부
     autoplay: true, // 자동 스크롤 사용 여부
     autoplaySpeed: 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
     vertical: false, // 세로 방향 슬라이드 옵션
     prevArrow: $(".slick-prev"), // 이전 화살표 모양 설정
     nextArrow: $(".slick-next"), // 다음 화살표 모양 설정
     draggable: true, //드래그 가능 여부

   });

   $('.slide-pause').click(function() {
     $('#main-slider').slick('slickPause');
     $('.slide-play').toggleClass('active');
     $('.slide-pause').toggleClass('active');

   });
   $('.slide-play').click(function() {
     $('#main-slider').slick('slickPlay');
     $('.slide-play').toggleClass('active');
     $('.slide-pause').toggleClass('active');
   });



   let time = 0;
   let interval;
   let timeSet;
   let duration = 5;



   $(".main-slider").on('afterChange', function() {
     time = 0;
     duration = 5;
     $(".pro-bar").addClass('pro-ani');
     $(".pro-ani").css({
       'animation-duration': '5s',
     })
     timeSet = setInterval(function() {
       duration--;
     }, 1000)
   });
   $(".main-slider").on('beforeChange', function() {
     $(".pro-bar").removeClass('pro-ani');
     clearInterval(timeSet);
   });

   $(".main_slide").on('mouseenter', function() {
     interval = setInterval(function() {
       time = time + 1;
     }, 1000)
   })

   $(".main_slide").on('mouseleave ', function() {
     clearInterval(interval);
     $(".pro-ani").css({
       'animation-duration': duration + time + 's',
     })
     duration = duration + time;
     console.log(duration, time)
     time = 0;
   })





   // products
   $(".product_slide").not('.slick-initialized').slick({
     slidesToShow: 3, // 한 화면에 보여질 컨텐츠 개수
     slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수
     autoplay: true, // 자동 스크롤 사용 여부
     variableWidth: true, //너비값 반영
     centerMode: true,
     prevArrow: "<button type='button' class='prod-prev'>Previous</button>", // 이전 화살표 모양 설정
     nextArrow: "<button type='button' class='prod-next'>Next</button>", // 다음 화살표 모양 설정
     draggable: true, //드래그 가능 여부

     responsive: [ // 반응형 웹 구현 옵션
       {
         breakpoint: 1200, //화면 사이즈 960px
         settings: {
           //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
           slidesToShow: 3
         }
       },
       {
         breakpoint: 768, //화면 사이즈 768px
         settings: {
           //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
           slidesToShow: 2
         }
       }, {
         breakpoint: 575, //화면 사이즈 575px
         settings: {
           //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
           slidesToShow: 1
         }
       }
     ]

   });




   //NEWS
   $('.board_output .board_output').addClass('swiper-container');
   $('.board_output .board_output>tbody').addClass('swiper-wrapper');
   $('.board_output_7_tr').addClass('swiper-slide');
   $('.board_output_29_tr').addClass('swiper-slide');

   var swiper1 = new Swiper('.swiper-container', {
     slidesPerView: 5,
     spaceBetween: 40,
     slidesPerGroup: 1,
     centeredSlides: true,
     loop: true,
     autoplay: true,
     loopFillGroupWithBlank: true,
     navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
     },
     breakpoints: {
       575: {
         slidesPerView: 1,
         spaceBetween: 10,
       },
       768: {
         slidesPerView: 2,
         spaceBetween: 10,
       },
       1200: {
         slidesPerView: 3,
         spaceBetween: 10,
       },
       1900: {
         slidesPerView: 3,
         spaceBetween: 10,
       },
     }
   });




 })