$(function() {
    // 해상도 분기점 전역변수
    var $resolution_pc = 1200;
    var $resolution_tablet = 992;
    var $resolution_mobile = 768;

    // 초기화
    main_hero_init();
    main_video_init();
    latest_article_init();
    partner_banner_init();
    navigation_init();
    parallax_init();
    navi_init();
    objectFitImages();
    main_medipeel_init();
    research_slide_init ();

    // 스크롤 이벤트
    $(window).on('scroll', function() {
        header_scroll();
        footer_init();
        subhero_scroll();
    }).scroll();

    // IE 패럴랙스 스크롤 렉 방지
    if ( navigator.userAgent.match(/Trident\/7\./) ) {
        $('body').on('mousewheel', function() {
            event.preventDefault();
            var wheelDelta = event.wheelDelta;
            var currentScrollPosition = window.pageYOffset;
            window.scrollTo(0, currentScrollPosition - wheelDelta);
        });
    }
    // 메인 롤링이미지
    function main_hero_init() {
        if ( $('.main-hero-section').length ) {
            var $interval = ( $('.main-hero-section').data('interval') ) ? $('.main-hero-section').data('interval') : 4000;

            $('.main-hero-section .hero-slider').slick({
                autoplay: true,
                autoplaySpeed: $interval,
                speed: 600,
                arrows: true,
                dots: true,
                lazyLoad: 'ondemand',
                prevArrow: $('.main-hero-section .slick-arrows .btn-prev'),
                nextArrow: $('.main-hero-section .slick-arrows .btn-next')
            });
        }
    }
    // 브랜드 패밀리사이트 온클릭
    $(".brand-inner").on("click", function() {
        $('#footer .brand-site .brand-inner').toggleClass('on');
        $('#footer .brand-site .brand-inner ul').slideToggle();
    });
    // 메인 메디필 슬라이드
    function main_medipeel_init () {
        if ( $('.medipeel-slide-section .swiper').length ) {
            var $swiper = new Swiper('.medipeel-slide-section .medipeel-swiper', {
                speed: 500,
                slidesPerView: 1,
                centeredSlides: true,
                loop: true,
                slideToClickedSlide: true,
                // autoplay: {
                //     delay: 2500
                // },
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                    renderBullet: function (index, className) {
                      return '<span class="' + className + '">0' + (index + 1) + "</span>";
                    },
                },
            });
            var $text_swiper = new Swiper('.medipeel-slide-section .medipeel-text-swiper', {
                slidesPerView: 1,
                loop: true,
            });
            $swiper.controller.control = $text_swiper;
            $text_swiper.controller.control = $swiper; 
        }
    }

    // 리서치 슬라이드
    function research_slide_init () {
        if ( $('.unique-box .swiper').length ) {
            var $swiper2 = new Swiper('.unique-box .swiper', {
                speed: 500,
                slidesPerView: "auto",
                centeredSlides: false,
                loop: true,
                slideToClickedSlide: true,
                autoplay: {
                    delay: 2500
                }
            });
        }
    }

    // 메인 영상 섹션
    function main_video_init() {
        if ( $('.main-video-section .swiper').length ) {
            const progressBar = $('.main-video-section .progressbar-wrap .bar');
            var mySwiper = new Swiper('#video-swiper', {
                speed: 800,
                loop: true,
                navigation: {
                    nextEl: '.main-video-section .next-btn',
                    prevEl: '.main-video-section .prev-btn',
                },
                autoplay: {
                    delay: 30000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: ".pagination-counter",
                    type: 'custom',
                    renderCustom: function (swiper, current, total) {
                        let currentStr = current < 10 ? '0' + current : current;
                        let totalStr = total < 10 ? '0' + total : total;
                        return `<span class="current">${currentStr}</span><span class="total">${totalStr}</span>`;
                    }
                },
                navigation: {
                    nextEl: '.main-video-section .button-navigation.next',
                    prevEl: '.main-video-section .button-navigation.prev',
                },
                on: {
                    init: function () {
                        progressBar.removeClass('animate');
                        progressBar.removeClass('active');
                        progressBar.eq(0).addClass('animate');
                        progressBar.eq(0).addClass('active');
                    },
                    slideChangeTransitionStart: function () {
                        progressBar.removeClass('animate');
                        progressBar.removeClass('active');
                        progressBar.eq(0).addClass('active');
                    },
                    slideChangeTransitionEnd: function () {
                        progressBar.eq(0).addClass('animate');
                    },
                    transitionEnd: function() {
                        let videos = document.querySelectorAll('video');
                        let activeIndex = this.activeIndex;
                        let activeSlide = $('#video-swiper .swiper-slide')[activeIndex];
                        let activeSlideVideo = activeSlide.getElementsByTagName('video')[0];
    
                        Array.prototype.forEach.call(videos, function(video) {
                            $(video).prop('muted', true);
                            video.currentTime = 0;
                            video.pause();
                        });
        
                        if ( $(activeSlideVideo).length ) {   
                            let playVideo = activeSlideVideo.play();
                            if ( playVideo !== undefined ) {
                                playVideo.then(() => {
                                    setTimeout(() => {
                                        console.log('done');
                                    }, 100);
                                }).catch((e) => {
                                    console.log('fail');
                                });
                            }
                        }
                    }        
                }
            });
        }
    }

    // 메인 최근게시물 전체보기 버튼 세팅
    function latest_article_init() {
        var $btn = $('.main-latest-section .btn-more');

        $btn.attr('href', $('.main-latest-section .tab-pane:eq(0)').data('url'));
        $('.main-latest-section .tab-article li a').on('click', function() {
            var $idx = $(this).parent().index();
            $btn.attr('href', $('.main-latest-section .tab-pane:eq(' + $idx + ')').data('url'));
        });
    }

    // 메인 파트너 배너 세팅
    function partner_banner_init() {
        if ( $('.partner-slider').length ) {
            $('.partner-slider').slick({
                autoplay: true,
                autoplaySpeed: 2000,
                speed: 600,
                slidesToShow: 10,
                slidesToScroll: 1,
                arrows: true,
                dots: true,
                prevArrow: '<button type="button" class="slick-prev"><i class="ri-arrow-left-s-line" aria-hidden="true"></i></button>',
                nextArrow: '<button type="button" class="slick-next"><i class="ri-arrow-right-s-line" aria-hidden="true"></i></button>',
                responsive: [
                    {
                        breakpoint: 1199,
                        settings: {
                            slidesToShow: 6
                        }
                    },
                    {
                        breakpoint: 991,
                        settings: {
                            slidesToShow: 4
                        }
                    },
                    {
                        breakpoint: 767,
                        settings: {
                            slidesToShow: 2
                        }
                    }
                ]
            });
        }
    }

    // 내비게이션 세팅
    function navigation_init() {
        var $header = $('#header');
        var $gnb = $('#header .gnb');
        var $sidenav = $('#header .side-nav');
        var $openBtn = $header.find('.btn-nav-open');
        var $closeBtn = $header.find('.btn-nav-close');
        var $navDimmed = $header.find('.nav-dimmed');
        var $originalHeight = [];
        
        $gnb.find('.menu-items > li').each(function() {
            $originalHeight.push($(this).find('.subnav-wrap').outerHeight());
        });

        $header.find('.menu-items > li').each(function() {
            if ( $(this).find('.subnav').length ) $(this).addClass('has-child-menu');
        });

        $gnb.find('.subnav-wrap').height(0);

        $gnb.find('.menu-items > li').on('mouseenter', function() {
            $(this).find('.subnav-wrap').stop(true, true).css({visibility:'visible', opacity:0}).animate({'height': $originalHeight[$(this).index()], 'opacity':1}, 350, 'easeOutCubic');
        }).on('mouseleave', function() {
            $gnb.find('.subnav-wrap').stop(true, true).animate({'height':0, 'opacity':0}, 200, function() {
                $(this).css({visibility:'hidden'});
            });
        });

        $sidenav.find('.menu-items > li').each(function() {
            if ( $(this).find('.subnav').length ) $(this).addClass('has-child-menu');
        });

        function nav_open() {
            $('body').addClass('nav-is-open');
            $navDimmed.stop().fadeIn(350);
        }

        function nav_close() {
            $('body').removeClass('nav-is-open');
            $navDimmed.stop().fadeOut(350);
        }
        
        $openBtn.on('click', function() {
            nav_open();
        });

        $closeBtn.on('click', function() {
            nav_close();
        });

        $navDimmed.on('click', function() {
            nav_close();
        });

        $sidenav.find('.menu-items > li > a').on('click', function(e) {
            if ($header.hasClass("new")) {return false;}
            if ( $(this).siblings('.subnav').length ) {
                e.preventDefault();

                if ( !$(this).parent().hasClass('is-open') ) {
                    $sidenav.find('.menu-items > li.is-open').removeClass('is-open');
                    $sidenav.find('.subnav').stop().slideUp(300);
                    $(this).parent().addClass('is-open');
                    $(this).siblings('.subnav').stop().slideDown(300);
                } else {
                    $(this).parent().removeClass('is-open');
                    $(this).siblings('.subnav').stop().slideUp(300);
                }
            }
        });
    }

    // sticky 헤더
    function header_scroll() {
        var $header = $('#header');
        var $scrTop = $(window).scrollTop();

        if ( $scrTop >= $header.outerHeight() ) {
            if ( !$header.hasClass('sticky') ) $header.addClass('sticky');
        } else {
            $header.removeClass('sticky');
        }
    }

    // 푸터 세팅
    function footer_init() {
        var $scroll_btn = $('#btn-to-top');
        var $header_size = $('#header').outerHeight();
        var $footer_pos = $('#footer').offset().top - $(window).height();
        var $scrTop = $(window).scrollTop();

        if ( $scrTop >= $header_size && $scrTop < $footer_pos ) {
            $scroll_btn.addClass('show');
        } else {
            $scroll_btn.removeClass('show');
        }

        $scroll_btn.on('click', function() {
            $('html, body').stop().animate({scrollTop:0}, 600);
        });
    }

    // 서브페이지 드롭다운 내비게이션 연동
    function navi_init() {
        var $gnb = $('#header .gnb');
        var $dropdown = [];
        var $url = $(location).attr('href');
        var $idx_main = 0;
        var $idx_sub = 0;
        var $dropdown_html = [];

        $('.dropdown-nav-section .dropdown-wrap').each(function(i) {
            $dropdown[i] = $(this);
            i++;
        });

        $gnb.find('.menu-items').children().each(function() {
            if ( $url.indexOf($(this).find('>a').attr('href')) > -1 ) {
                $idx_main = $(this).index();
                $(this).addClass('is-active is-open');
                $(this).find('.subnav').show();
            }

            $(this).find('.subnav > li').each(function() {
                if ($url.indexOf("finance_") > -1) {
                    $idx_main = 1;
                    $idx_sub = 0;
                    return false;
                }
                if ( $url.indexOf($(this).find('>a').attr('href')) > -1 ) {
                    $idx_main = $(this).closest('.has-child-menu').index();
                    $idx_sub = $(this).index();
                    $(this).addClass('is-active');
                    $(this).closest('.has-child-menu').addClass('is-active is-open');
                    $(this).parent().show();
                }
            });
        });

        if ( $('.dropdown-nav-section .dropdown-wrap').length ) {
            $dropdown_html[0] = '';
            $dropdown_html[1] = '';

            $gnb.find('.menu-items').children().each(function() {
                if ($(this).hasClass("lang")) { return; }
                var $link = $(this).find('>a').attr('href');
                var $name = $(this).find('>a').text();
                
                $dropdown_html[0] += '<li><a href="' + $link + '">' + $name + '</a></li>';
            });

            $gnb.find('.menu-items').children().eq($idx_main).find('.subnav > li').each(function() {
                var $link = $(this).find('>a').attr('href');
                var $name = $(this).find('>a').text();

                $dropdown_html[1] += '<li><a href="' + $link + '">' + $name + '</a></li>';
            });

            $dropdown[0].find('.dropdown').append($dropdown_html[0]);
            $dropdown[1].find('.dropdown').append($dropdown_html[1]);

            $dropdown[0].find('.dropdown').children().eq($idx_main).addClass('is-active');
            $dropdown[1].find('.dropdown').children().eq($idx_sub).addClass('is-active');

            $dropdown[0].find('>a').text($dropdown[0].find('.is-active').text());
            $dropdown[1].find('>a').text($dropdown[1].find('.is-active').text());

            function dropdown_close() {
                $('.dropdown-nav-section .dropdown-wrap > a').attr('aria-expanded', 'false');
                $('.dropdown-nav-section .dropdown-wrap > .dropdown').stop().slideUp(300);
            }

            $('.dropdown-nav-section .dropdown-wrap > a').on('click', function(e) {
                e.preventDefault();
                if ( $(this).attr('aria-expanded') != 'true' ) {
                    dropdown_close();
                    $(this).attr('aria-expanded', 'true');
                    $(this).siblings('.dropdown').stop().slideDown(300);
                } else {
                    $(this).attr('aria-expanded', 'false');
                    $(this).siblings('.dropdown').stop().slideUp(300);
                }
            });

            $(document).on('click touchend', function(e) {
                if ( !$(e.target).is('.dropdown-nav-section .dropdown-wrap > a') ) {
                    dropdown_close();
                }
            });
        }
    }

    // 서브비주얼 스크롤시 효과
    function subhero_scroll() {
        if ( $('#sub-hero').length ) {
            var $target = $('#sub-hero .caption-cell');
            var $scrTop = $(window).scrollTop();
            var $factor = 5;

            if ($scrTop <= $('#sub-hero').outerHeight()) {
                $target.css({'opacity':1 - (0.025 * ($scrTop / $factor))});
            }
        }
    }

    // 패럴랙스 초기화
    function parallax_init() {
        $('[data-parallax]').parallax();
    }

    // 사업분야 고객이용후기 슬라이더
    $(document).ready(function() {
        if ( $('.review-slider').length ) {
            $('.review-slider').slick({
                dots: true,
                speed: 600,
                adaptiveHeight: true
            });
        }
    });

    // 제품소개 (페이지형) 갤러리
    $(document).ready(function() {
        if ( $('.justify-gallery-row').length ) {
            var $gallery = $('.justify-gallery-row');

            $gallery.magnificPopup({
                delegate: 'a',
                type: 'image',
                mainClass: 'mfp-fade',
                removalDelay: 300,
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1]
                }
            });
            
            $gallery.justifiedGallery({
                rowHeight: 400,
                margins: 10
            });
        }
    });

    // FAQ 기능
    $(document).ready(function () {
        if ($('.faq-list').length) {
            var $faq_article = $('.faq-list .titdesign');

            if($faq_article.length) {
                var $answerRows = '';
                var $answer = [];
                var $answerURL = [];

                $faq_article.each(function(i) {
                    var $this = $(this);
                    $answerURL[i] = $this.find('a').attr('href');
                    $.ajax({
                        url: $answerURL[i],
                        async: false,
                        cache: false,
                        dataType: 'html',
                        type: 'GET',
                        contentType: 'application/x-www-form-urlencoded;charset=euc-kr',
                        beforeSend: function(jqXHR) {
                            jqXHR.overrideMimeType('application/x-www-form-urlencoded;charset=euc-kr');
                        },
                        success: function(data) {
                            $answer[i] = $(data).find('#post_area').html();
                            $answerRows += '<tr class="answer-row hide">';
                            $answerRows += '<td colspan="6">';
                            $answerRows += '<span class="faq-type">A</span>';
                            $answerRows += '<div class="answer-container">' + $answer[i] + '</div>';
                            $answerRows += '</td>';
                            $answerRows += '</tr>';
                            $this.after($answerRows);
                            $answerRows = '';
                        },
                        error: function(response) {
                            console.log(response);
                        }
                    })
                    i++;
                });
            }

            $('.faq-list .bbsnewf5 a').on('click', function (e) {
                if ( !$(".board_admin_bgcolor").length ) {
                    e.preventDefault();

                    if (!$(this).closest('tr').hasClass('is-open')) {
                        $('.faq-list .answer-row').addClass('hide');
                        $('.faq-list .is-open').removeClass('is-open');
                        $(this).closest('tr').addClass('is-open');
                        $(this).closest('tr').next('.answer-row').removeClass('hide');
                    } else {
                        $(this).closest('tr').removeClass('is-open');
                        $(this).closest('tr').next('.answer-row').addClass('hide');
                    }
                }
            });
        }
    });

    /*********************************************
     * 게시판 관련 스크립트
    *********************************************/
    // get parameter
    var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = window.location.search.substring(1),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;

        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
            }
        }
    };

    // 카테고리 버튼화 처리
    $(document).ready(function () {
        if ($('.board-category').length) {
            if ($('.board-category').find('select').length) {
                var $ca_link = [];
                var $ca_name = [];
                var $ca_current = getUrlParameter('com_board_category_code');
                var $html = '<ul>';

                $('.board-category select option').each(function (i) {
                    $ca_name[i] = $(this).text();
                    $ca_link[i] = $(location).attr('pathname') + '?com_board_category_code=' + $(this).val();

                    $html += '<li><a href="' + $ca_link[i] + '">' + $ca_name[i] + '</a></li>';
                });

                $html += '</ul>';
                $('.board-category').html($html);
                $('.board-category ul li').each(function () {
                    if ($(this).find('a').attr('href').indexOf($ca_current) > -1 && $ca_current != '') $(this).addClass('is-active');
                });

                if (!$('.board-category .is-active').length) $('.board-category ul li:first-child').addClass('is-active');
            } else {
                $('.board-category').remove();
            }
        }

        $('.gallery_etc').each(function() {
            $(this).html($.trim($(this).text().replace('[','').replace(']','').split(':')[1]));
        });
    });

    // 이미지버튼 텍스트버튼 처리
    $(document).ready(function () {
        var $btn_keywords = ['삭제', '이동', '복사', '글쓰기', '검색', '이전', '목록보기', '다음', '수정', '작성완료', '취소', '스팸신고', '답글쓰기', '댓글달기'];

        var $btn_type_input = $("input[type=image]"),
            $btn_type_img = $("img");

        $btn_type_input.each(function () {
            var $src = $(this).attr('src');

            if ($src.indexOf('search.gif') > -1) {
                $(this).before('<input type="submit" id="btn-search" class="btn btn-secondary" value="' + $btn_keywords[4] + '">');
                $(document).on('click', '#btn-search', function () {
                    $(this).next('input[type=image]').trigger('click');
                });
                $(this).hide();
            }

            if ($src.indexOf('confirm.gif') > -1) {
                $(this).before('<input type="submit" id="btn-confirm" class="btn btn-primary btn-lg" value="' + $btn_keywords[9] + '">');
                $(this).hide();
            }

            if ($src.indexOf('comment_write.gif') > -1) {
                $(this).before('<input type="submit" id="btn-comment-write" class="btn btn-primary btn-lg" value="' + $btn_keywords[13] + '">');
                $(document).on('click', '#btn-comment-write', function () {
                    $(this).next('input[type=image]').trigger('click');
                });
                $(this).hide();
            }
        });

        $btn_type_img.each(function () {
            var $src = $(this).attr('src');
            var $event = $(this).attr('onclick');

            if ($src.indexOf('btn_sdel.gif') > -1) {
                $(this).before("<button class='btn btn-warning' onclick='" + $event + "'>" + $btn_keywords[0] + "</button>");
                $(this).remove();
            }

            if ($src.indexOf('move.gif') > -1) {
                $(this).before("<button class='btn btn-warning' onclick='" + $event + "'>" + $btn_keywords[1] + "</button>");
                $(this).remove();
            }

            if ($src.indexOf('copy.gif') > -1) {
                $(this).before("<button class='btn btn-warning' onclick='" + $event + "'>" + $btn_keywords[2] + "</button>");
                $(this).remove();
            }

            if ($src.indexOf('/prev.gif') > -1) {
                $(this).parent().addClass('btn btn-default').text($btn_keywords[5]);
            }

            if ($src.indexOf('list.gif') > -1) {
                $(this).parent().addClass('btn btn-secondary').text($btn_keywords[6]);
            }

            if ($src.indexOf('/next.gif') > -1) {
                $(this).parent().addClass('btn btn-default').text($btn_keywords[7]);
            }

            if ($src.indexOf('spam.gif') > -1) {
                $(this).before('<button class="btn btn-danger" onclick="' + $event + '">' + $btn_keywords[11] + '</button>');
                $(this).remove();
            }

            if ($src.indexOf('modify.gif') > -1) {
                $(this).parent().addClass('btn btn-warning').text($btn_keywords[8]);
            }

            if ($src.indexOf('delete.gif') > -1) {
                $(this).parent().addClass('btn btn-warning').text($btn_keywords[0]);
            }

            if ($src.indexOf('reply.gif') > -1) {
                $(this).parent().addClass('btn btn-secondary').text($btn_keywords[12]);
            }

            if ($src.indexOf('write.gif') > -1) {
                $(this).parent().addClass('btn btn-secondary').text($btn_keywords[3]);
            }

            if ($src.indexOf('btn_confirm.gif') > -1) {
                $(this).parent().addClass('btn btn-primary btn-lg').text($btn_keywords[9]);
            }

            if ($src.indexOf('cancel.gif') > -1) {
                $(this).parent().addClass('btn btn-secondary btn-lg').text($btn_keywords[10]);
            } 
        });
    });

    // 리스트 게시판 헤더 처리
    $(document).ready(function() {
        $('.att_title').each(function() {
            $(this).attr('rel', $.trim($(this).text().replace(/\s/g,'')));
        });
    });

    // 제품소개 B 타입 (오버레이)
    $(document).ready(function() {
        if ( $('.type-b-row').length ) {
            var $subject = [];
            var $category = [];

            $('.type-b-row .bbsnewf5').each(function(i) {
                var $markup = '';
                $subject[i] = $(this).find('.gallery_title').text();
                $category[i] = $(this).find('.gallery_etc').text();

                $markup = '<div class="article-overlay">';
                $markup += '<div class="article-info">';
                $markup += '<div class="info-inner">';
                $markup += '<p class="category">' + $category[i] + '</p>';
                $markup += '<h4>' + $subject[i] + '</h4>';
                $markup += '</div>';
                $markup += '</div>';
                $markup += '</div>';

                $(this).find('> table tr').not(':eq(0)').remove();
                $(this).find('> table tr').eq(0).find('a').append($markup);
            });
        }
    });

    // 윈도우 로드 이벤트
    $(window).on('load', function() {
        if ( $('#sub-hero').length ) $('#sub-hero').addClass('is-loaded');
        $('body').addClass('__load');
    });
});

// Load the IFrame Player API code asynchronously.
/*
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    // Check all slides and initialize video players
    var swiper = document.getElementById('video-swiper');
    var slides = swiper.getElementsByClassName('swiper-slide');
    var players = [];

    for (var i = 0; i < slides.length; i++) {
        var element = slides[i].getElementsByClassName('yt-player')[0];
        var id = element.getAttribute('data-id');

        var player = new YT.Player(element, {
            height: '315',
            width: '560',
            videoId: id,
            playerVars: {
                loop: 1,
                rel: 0,
                controls: 0,
                showinfo: 0,
                autohide: 1,
                modestbranding: 1,
                disablekb: 1,
                enablejsapi: 1
            }
            // events: {
            //   'onReady': onPlayerReady,
            //   'onStateChange': onPlayerStateChange
            // }
        });
        players.push(player);
    }

    const progressBar = $('.main-video-section .progressbar-wrap .bar');
    var $swiper = new Swiper('.main-video-section #video-swiper', {
        speed: 800,
        loop: true,
        navigation: {
            nextEl: '.main-video-section .next-btn',
            prevEl: '.main-video-section .prev-btn',
        },
        autoplay: {
            delay: 3100,
            disableOnInteraction: false
        },
        pagination: {
            el: ".pagination-counter",
            type: 'custom',
            renderCustom: function (swiper, current, total) {
                let currentStr = current < 10 ? '0' + current : current;
                let totalStr = total < 10 ? '0' + total : total;
                return `<span class="current">${currentStr}</span><span class="total">${totalStr}</span>`;
            }
        },
        navigation: {
            nextEl: '.main-video-section .button-navigation.next',
            prevEl: '.main-video-section .button-navigation.prev',
        },
        on: {
            init: function () {
                progressBar.removeClass('animate');
                progressBar.removeClass('active');
                progressBar.eq(0).addClass('animate');
                progressBar.eq(0).addClass('active');
            },
            slideChangeTransitionStart: function () {
                progressBar.removeClass('animate');
                progressBar.removeClass('active');
                progressBar.eq(0).addClass('active');
            },
            slideChangeTransitionEnd: function () {
                progressBar.eq(0).addClass('animate');
            }
        }
    });

    $swiper.on('slideChange', function() {
        // players[0].stopVideo();
        // players[1].stopVideo();
        // players[$swiper.previousIndex].pauseVideo();
        players[$swiper.activeIndex].mute();
        players[$swiper.activeIndex].playVideo();
    });
}
*/

/*
$(function() {
    const progressBar = $('.main-video-section .progressbar-wrap .bar');
    var mySwiper = new Swiper('#video-swiper', {
        speed: 800,
        loop: true,
        navigation: {
            nextEl: '.main-video-section .next-btn',
            prevEl: '.main-video-section .prev-btn',
        },
        autoplay: {
            delay: 3100,
            disableOnInteraction: false
        },
        pagination: {
            el: ".pagination-counter",
            type: 'custom',
            renderCustom: function (swiper, current, total) {
                let currentStr = current < 10 ? '0' + current : current;
                let totalStr = total < 10 ? '0' + total : total;
                return `<span class="current">${currentStr}</span><span class="total">${totalStr}</span>`;
            }
        },
        navigation: {
            nextEl: '.main-video-section .button-navigation.next',
            prevEl: '.main-video-section .button-navigation.prev',
        },
        on: {
            init: function () {
                progressBar.removeClass('animate');
                progressBar.removeClass('active');
                progressBar.eq(0).addClass('animate');
                progressBar.eq(0).addClass('active');
            },
            slideChangeTransitionStart: function () {
                progressBar.removeClass('animate');
                progressBar.removeClass('active');
                progressBar.eq(0).addClass('active');
            },
            slideChangeTransitionEnd: function () {
                progressBar.eq(0).addClass('animate');
                // $('.swiper-slide-active .yt-player').trigger('click');
            }
        }
    });

    mySwiper.on('slideChange', function() {
    });

    window.addEventListener('load', onLoadEvent);
    var tag = document.createElement('script');
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // 생성된 id를 추가 시켜 영상을 조작하기 위한 객체
    var player = {};
    
    function makeYoutube(id, link) {
        player[id] = new YT.Player(id, {
            height: '300',
            width: '480',
            playerVars: {
                autoplay: 1,
                controls: 0
            },
            videoId: link,
            events: {
                onReady: onPlayerReady
            }
        });
    
        function onPlayerReady(event) {
            event.target.mute();
            event.target.playVideo();
        }
    }

    function yotubeOnClick() {
        [].forEach.call(document.querySelectorAll('.yt-player'), function (el, index) {
            el.addEventListener('click', function () {
                var thisYoutubeLink = this.getAttribute('data-id');
                this.id = makeRandomId();
                makeYoutube(this.id, thisYoutubeLink);
            });
        });
    }

    function onLoadEvent() {
        yotubeOnClick();
        mySwiper.on('slideChangeTransitionEnd', youtubeAllStop);
    }

    function youtubeAllStop() {
        for (var youtube in player) {
            player[youtube].pauseVideo();
        }
    }

    var makeRandomId = function () {
        var text = '';
        var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+=-';

        for (var i = 0; i < 11; i++) text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    };
});
*/