$(document).ready(function () {

    $('#main_con').css('opacity', '1').css('transform', 'translateY(0)').css('transition', '0.8s ease-in-out');
    $('.about_wrap').css('opacity', '1').css('transform', 'translateY(0)').css('transition', '0.8s ease-in-out');
    $('.artist_wrap').css('opacity', '1').css('transform', 'translateY(0)').css('transition', '0.8s ease-in-out');
    $('.contact_wrap').css('opacity', '1').css('transform', 'translateY(0)').css('transition', '0.8s ease-in-out');

    $('.navi_btn').click(function () {
        $(this).toggleClass('on');
        $('.navi').stop().fadeToggle()
    });

    $('.artist_wrap .artist_thumb li a').hover(function () {
        $(this).find('img:nth-child(2)').fadeToggle();
    });

    $('.photo_list').slick({
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 2000,
        nextArrow: $('.next_btn'),
        prevArrow: false,
        responsive: [
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1
                }
            }
        ]
    });

    $('.video_list').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 2000,
        nextArrow: $('.next_btn02'),
        prevArrow: false,
        responsive: [
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });

    let cnt = 0;
    $('.tab_con > div.tabcontent').hide().eq(0).show();
    $('.tab_btn  > li').click(function () {
        cnt = $(this).index();
        $('.tab_btn > li').removeClass('on').eq(cnt).addClass('on');
        $('.tab_con > div.tabcontent ').hide().eq(cnt).fadeIn();

        $(".photo_list").slick("setPosition");

        $(".video_list").slick("setPosition");
    });

    // $('.close_btn').click(function () {
    //     $('#admin_popup').hide();
    //     $('html, body').css('overflow', 'visible');
    // });

    $('.admin_photo').click(function () {
        $('#admin_popup').show();
        $("html, body").animate({scrollTop: 0}, "slow");
        $('html, body').css('overflow', 'visible');
        renderPhotos(1);
    });

    $('.admin_video').click(function () {
        $('#admin_popup02').show();
        $("html, body").animate({scrollTop: 0}, "slow");
        $('html, body').css('overflow', 'visible');
        renderVideos(1);
    });

    $('.admin_profile').click(function(){
        $('#admin_popup03').show();
        $("html, body").animate({ scrollTop: 0 }, "slow");
        $('html, body').css('overflow','visible');
    });

    $("#adminPopup_photo").load("../adminPopup_photo.jsp");
    $("#adminPopup_video").load("../adminPopup_video.jsp");
    $("#adminPopup_profile").load("../adminPopup_profile.jsp");

    $('.photo_list li').click(function(){
        $('#slide_wrap').show();
        $('html, body').css('overflow','hidden');
        $('.slider').slick('setPosition');
        $('.thumb_list').slick('setPosition');
        const slideNo = $(this).index();
        $('.slider').slick('slickGoTo', slideNo);
    });

    $('#slide_wrap .is_close').click(function(){
        $('#slide_wrap').hide();
        $('html, body').css('overflow','visible');
    });

    $('.slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 2000,
        nextArrow: $('.is_next'),
        prevArrow: $('.is_prev'),
        asNavFor: '.thumb_list'
    });

    $('.thumb_list').slick({
        slidesToShow: 10,
        slidesToScroll: 1,
        autoplay: false,
        autoplaySpeed: 2000,
        nextArrow: false,
        prevArrow: false,
        infinite : true,
        asNavFor: '.slider',
        focusOnSelect: true,
        responsive: [
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1
                }
            }
        ]
    });

    const slideLength = document.getElementById("thumb_list").getElementsByTagName("li").length;
    const slickTrackElement = document.querySelector("#thumb_list > div > div");

    if (slideLength < 11) {
        slickTrackElement.classList.add('slick-track02');
    }

    let c_num = document.querySelector("#slide_wrap > div > p > span.c_num");
    let total_num = document.querySelector("#slide_wrap > div > p > span.total_num");

    $('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide) {
        c_num.innerText = slick.currentSlide + 1;
        total_num.innerText = slick.slideCount;
    });

    // video_slide
    // $('.video_list li').click(function(){
    //   $('#video_wrap').show();
    //   $('html, body').css('overflow','hidden');
    // });

    $('#video_wrap .is_close').click(function(){
      const videoPopupElement = document.getElementById("you_box");
      videoPopupElement.innerHTML = "";
      $('#video_wrap').hide();
      $('html, body').css('overflow','visible');
    });

    const photoListElement = document.getElementById("photo_list");
    photoListElement.style.display = "block";
});