// 메인 문화관광 콘텐츠 슬라이드
$(function () {
    var bgSlide = $('.tour-wrap .tour-bg-slide');
    var tourSlide = $('.tour-wrap .tour-slide');
    var time = 1.5;
    var bar = $('.slide-controller .slide-progress .progress-fill');
    var isPause = false; // 일시정지 상태 여부
    var tick;
    var percentTime;
    var changeWhenPaused; // 일시정지 상태에서 슬라이드를 전환했는지 여부
    var autoplayButton = $('.slide-nav .slide-auto');
    var autoplayButtonText = $('.slide-nav .slide-auto span');
    var controller = $('.slide-controller');
    var pageButton = $('.tour-wrap .content-dots .dot .dot-button');

    tourSlide.slick({
        slidesToShow: 1,
        draggable: false,
        speed: 550,
        autoplay: false,
        fade: true,
        prevArrow: $('.slide-controller .slide-nav .slide-prev'),
        nextArrow: $('.slide-controller .slide-nav .slide-next'),
        asNavFor: bgSlide,
    });
    bgSlide.slick({
        slidesToShow: 1,
        draggable: false,
        speed: 550,
        autoplay: false,
        fade: true,
        arrows: false,
        asNavFor: tourSlide,
    });

    tourSlide.on("beforeChange", function (event, slick, currentSlide) {
        startProgressbar();
        if (isPause) changeWhenPaused = true; // 일시정지 상태일때 슬라이드 전환
    });

    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        if (!isPause) {
            tick = setInterval(interval, 30); // 일시정지 상태가 아니면 재생시작
        }
    }

    function interval() {
        if (!isPause) {
            percentTime += 1 / (time + 0.1);
            bar.css({
                'stroke-dashoffset': percentTime + "%"
            });
            if (percentTime >= 100) {
                tourSlide.slick("slickNext");
                startProgressbar();
            }
        }
    }

    function resetProgressbar() {
        bar.css({
            'stroke-dashoffset': 0 + "%"
        });
        clearTimeout(tick);
    }

    autoplayButton.on('click', function () {
        if (!isPause) {
            controller.attr('data-autoplay', 'N');
            isPause = true;
            autoplayButtonText.text('');
        } else {
            controller.attr('data-autoplay', 'Y');
            isPause = false;
            autoplayButtonText.text('');

            if (changeWhenPaused) {
                startProgressbar(); // 일시정지 상태에서 슬라이드 전환 후 재생버튼 클릭시 재생시작
                changeWhenPaused = false;
            }
        }
    });

    pageButton.on('click', function () {
        var target = $(this).attr('data-target');
        tourSlide.slick('slickGoTo', target - 1);
    });

    startProgressbar();



    // 공지사항 슬라이드
    $('.main-section4-con>table>tbody>tr>td>table>tbody ').slick({
        fade: false,
        infinite: true, //무한 반복 옵션  
        slidesToShow: 3, // 한 화면에 보여질 컨텐츠 개수

        speed: 1000, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)

        arrows: true, // 옆으로 이동하는 화살표 표시 여부
        dots: true, // 스크롤바 아래 점으로 페이지네이션 여부
        autoplay: true, // 자동 스크롤 사용 여부
        responsive: [ // 반응형 웹 구현 옵션
            {
                breakpoint: 1400, //화면 사이즈 960px
                settings: {
                    //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 1265, //화면 사이즈 768px
                settings: {
                    //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                    slidesToShow: 1
                }
            }
        ]

    });

    $('.blind').click(function () {
        $('.start').css('display', 'block');
        $(this).css('display', 'none');
        $('.progress').css('animation-play-state', 'paused');
        $('.slick-list').slick('slickPause');
    })
    $('.start').click(function () {
        $('.blind').css('display', 'block');
        $(this).css('display', 'none');
        $('.progress').css('animation-play-state', 'running');
        $('.slick-list').slick('slickPlay');
    })


    let SVG = '<svg width="100" height="100" class="svg"><circle r = "20" cx = "35" cy = "40" class="border" > </circle > <circle r="20" cx="35" cy="40" class="progress"> </circle> </svg > '
    $('.progress').removeClass('animation')

    if (jQuery('.slick-track>div').hasClass('slick-active') === true) {
        jQuery(SVG).prependTo('.circle-container')
        $('.progress').addClass('animation')
    }

})