$(function () {
  $(".main-visual-slide").each(function () {
    var $visualSlide = $(this);
    var $visualSlideItem = $(this).find(".main-visual-item");
    var visualNum = $visualSlideItem.length;
    var $visualControls = $(".main-visual-controls");

    $visualControls.find(".paging-controls .total").text(visualNum);

    $visualSlide.on("init", function (event, slick) {
      if ($(".main-visual-item").hasClass("active-visual")) {
        $("#header").addClass("reduce")
      } else {
        $("#header").removeClass("reduce")
      }

      $(".main-visual-con .slick-dots").find("li").eq(0).addClass("active-item");
        /* 로드 시, 프로그레스 바 시작 (애니메이션) */
      $(".progressing").addClass("active")
      

    });

    $visualSlide.on("beforeChange", function (event, slick, currentSlide, nextSlide) {
    
      if ($(".main-visual-item").eq(nextSlide).hasClass("active-visual")) {
        $("#header").addClass("reduce")
      } else {
        $("#header").removeClass("reduce")
      }

      $(".main-visual-con .slick-dots").find("li").removeClass("active-item");
        $(this).find(".slick-dots").find("li").eq(nextSlide).addClass("active-item");
        /* 슬라이드 전환 시, 원통 애니메이션 초기화 &   */
        $(".progressing").removeClass("active")
        // pause 눌렀을 때, 애니메이션 자체가 멈추는데 다음 슬라이드로 넘기게 되면, 애니메이션 멈춘 것을 풀어주기
        $(".play-pause-circle").removeClass('pause')
        $(".main-visual-play-pause-btn").removeClass('show')
      $(".main-visual-pause-btn").addClass('show')
      

    });
    $visualSlide.on("afterChange", function (event, slick, currentSlide, nextSlide) {
        // Pause 상태여도 슬라이드 넘겼을 때 슬라이드 Play 되도록
        $visualSlide.slick("slickPlay");
        // 슬라이드 전환 시 원통 에니메이션 돌도록
        $(".progressing").addClass("active");
      })
      
      
    $visualSlide.slick({
      draggable: false, //드래그막기 
      slidesToShow: 1,
      autoplay: false,
      infinite: true,
      speed: 2000,
      autoplaySpeed :4000,
      dots: false,
      fade: true,
      arrows: true,
      prevArrow: ".main-visual-controls .prev-btn",
      nextArrow: ".main-visual-controls .next-btn",
      customPaging: function (slider, i) {
        const slideNum = $(slider.$slides[i]).data("title");
        return (
          '<strong class="num">' +
          slideNum +
          '</strong>'
        );
      },

      
    });

    $(".main-visual-slide").find(".slick-dots").wrap("<aside class='slide-dots-wrapper'></div>")

    let test = $(".main-visual").find(".slide-dots-wrapper")
  $(".main-visual-controls").find(".main-visual-controls-wrap").append(test)

    $(".play-pause-circle").click(function () {
      

      if (!($(this).hasClass("pause"))) {
        $visualSlide.slick("slickPause");
        $(".main-visual-play-pause-btn").removeClass('show')
        $(".main-visual-play-btn").addClass('show');
        $(this).addClass("pause");
      } else {
        $visualSlide.slick("slickPlay");
        $(".main-visual-play-pause-btn").removeClass('show')
        $(".main-visual-pause-btn").addClass('show');
        $(this).removeClass("pause");
      }
    })
  });

  /* MAIN PRODUCT SLIDE : NOT OUTPUT */
  $(".main-product-slide-con").find(".product-slide-con").each(function () {
    var $productSlide = $(this);

    $productSlide.slick({
      slidesToShow: 1,
      infinity: true,
      speed: 1000,
      dots: false,
      arrows: true,
      prevArrow: ".main-product-controls .prev-btn",
      nextArrow: ".main-product-controls .next-btn",
      responsive: [
        {
          breakpoint: 1240,
          settings: {
            slidesToShow: 1,
            dots: true,
            arrows: false,
          },
        },
        {
          breakpoint: 650,
          settings: {
            slidesToShow: 1,
            dots: true,
            arrows: false,
          },
        },
      ],
    });
  });
});