$(function () {

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


     $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {

        if(!slick.$dots){
            return;
          }

        //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
        var i = (currentSlide ? currentSlide : 0) + 1;
        $status.html("<span class='ms-now'>0" +i +"</span>" +'/' + "<span class='ms-total'>0" + slick.slideCount + "</span>");
    });

     $slickElement.slick({
        slide: 'div', //슬라이드 되어야 할 태그 ex) div, li 
        infinite: true, //무한 반복 옵션  
        slidesToShow: 1, // 한 화면에 보여질 컨텐츠 개수
        slidesToScroll: 1, //스크롤 한번에 움직일 컨텐츠 개수
        speed: 1000, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
        lazyLoad: 'progressive',
        arrows: false, // 옆으로 이동하는 화살표 표시 여부
        dots: true, // 스크롤바 아래 점으로 페이지네이션 여부
        autoplay: true, // 자동 스크롤 사용 여부
        autoplaySpeed: 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
        dotsClass: "slick-dots", //아래 나오는 페이지네이션(점) css class 지정
        draggable: true, //드래그 가능 여부 
        
    });



    //
    var $productslide01 = $('.product-slide01 ul');
    var $progressBar01 = $('.product-slide01-progress');
    var $progressBarLabel01 = $('.slider__label01' );
    var $product01Prev =  $('.product-slide01-prev');
    var $product01Next =  $('.product-slide01-next');

    $productslide01.slick({
        slide: 'li',
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: true,
        arrows: true,
        prevArrow: $product01Prev,
        nextArrow: $product01Next,
    });

    $productslide01.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
        var calc1 = ( (nextSlide) / (slick.slideCount-1) ) * 100;
        
        $progressBar01
          .css('background-size', calc1 + '% 100%')
          .attr('aria-valuenow', calc1 );
        
        $progressBarLabel01.text( calc1 + '% completed' );
      });
    
    $('.product01-pause').click(function () {
        $productslide01.slick('slickPause');
        $('.product01-play').toggleClass('active');
        $('.product01-pause').toggleClass('active');

    });
    $('.product01-play').click(function () {
        $productslide01.slick('slickPlay');
        $('.product01-play').toggleClass('active');
        $('.product01-pause').toggleClass('active');
    });


    var $productslide02 = $('.product-slide02 ul');
    var $progressBar02 = $('.product-slide02-progress');
    var $progressBarLabel02 = $('.slider__label02' );
    var $product02Prev =  $('.product-slide02-prev');
    var $product02Next =  $('.product-slide02-next');

    $productslide02.slick({
        slide: 'li',
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: true,
        arrows: true,
        prevArrow: $product02Prev,
        nextArrow: $product02Next,
    });


    $productslide02.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
        var calc2 = ( (nextSlide) / (slick.slideCount-1) ) * 100;
        
        $progressBar02
          .css('background-size', calc2 + '% 100%')
          .attr('aria-valuenow', calc2 );
        
        $progressBarLabel02.text( calc2 + '% completed' );
      });
    
    $('.product02-pause').click(function () {
        $productslide02.slick('slickPause');
        $('.product02-play').toggleClass('active');
        $('.product02-pause').toggleClass('active');

    });
    $('.product02-play').click(function () {
        $productslide02.slick('slickPlay');
        $('.product02-play').toggleClass('active');
        $('.product02-pause').toggleClass('active');
    });

 })