/*
 * Name     : sub.js
 * Version  : 1.1.0
 * Author   : 1px studio
 * Date     : 2025-02-23
 * Desc     : 한국도자기 작업용 
---------------------------------------------------
*/
$(function() {
    
    // script break in main page
    if (document.getElementById("isIndex")!=null) { return; }

    // global variables
    // init
    navigation_init();
    pottery_slide();
    affiliate_slide();
    zoom_gallery_init();
    masonry_init();
    youtube_gallery_init();
    dropdown_submenu_init();

    // navigation active
    function navigation_init() {
        const currentURL = window.location.href;
        
        if ( !$('.breadcrumb-navbar .navbar-wrapper').length ) return false;

        $('.breadcrumb-navbar .navbar-wrapper > li').each(function() {
            let $this = $(this);
            if ( currentURL.indexOf($this.find('>a').attr('href')) > -1 ) {
                $this.find('>a').addClass('active');
            }
        });
    }

    // 회사소개 공정 슬라이드 
    function pottery_slide() {
        if (!$(".pottery-swiper").length) return false;
        let pottery_swiper = new Swiper(".pottery-swiper", {
            slidesPerView: "auto",
            spaceBetween: 130,
            freeMode: true,
            scrollbar: {
                el: ".pottery-swiper .swiper-scrollbar",
                hide: false,
            },
        });
    }

    // 계열사 슬라이드 
    function affiliate_slide() {
        let affiliate_list = $(".affiliate-box .swiper");
        if (!affiliate_list.length) return false;

        
        function make_slide(no) {
            let affiliate_swiper = new Swiper(".affiliate-swiper"+no, {
                slidesPerView: 1,
                navigation: {
                    nextEl: ".swiper-next",
                    prevEl: ".swiper-prev",
                    hide: true
                },
            });
        }
        affiliate_list.each(function(){
            make_slide($(this).data("slide"));
        });
    }


    function zoom_gallery_init() {
        $('.zoom-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            closeOnContentClick: false,
            closeBtnInside: false,
            mainClass: 'mfp-with-zoom mfp-img-mobile',
            image: {
                verticalFit: true,
            },
            gallery: {
                enabled: true
            },
            zoom: {
                enabled: true,
                duration: 300, // don't foget to change the duration also in CSS
                opener: function(element) {
                    return element.find('img');
                }
            } 
        });
    }

    function masonry_init() {
        if ( $('.masonry-group').length ) {
            const masonryGroup = $('.masonry-group');

            masonryGroup.imagesLoaded(function() {
                masonryGroup.isotope({
                    itemSelector: '.gallery-item',
                    columnWidth: '.grid-sizer',
                    masonry: {
                        gutter: 20
                    }
                });
            });

            $('.category-button-wrapper .button-filter').on('click', (e) => {
                e.preventDefault();
                let $this = $(e.currentTarget);
                let filterValue = $this.data('filter');

                $('.category-button-wrapper .button-filter').removeClass('active');
                $this.addClass('active');
                masonryGroup.isotope({ filter: filterValue });
            });
        }
    }

    function youtube_gallery_init() {
        const modal = $('#youtubeModal');
        const videoFrame = modal.find('.youtube-wrapper>iframe');
        const videoString = 'https://www.youtube.com/embed/';

        $('.play-youtube').on('click', (e) => {
            e.preventDefault();
            let $this = $(e.currentTarget);
            let videoID = $this.attr('href').split('v=')[1];

            modal.modal('show');
            videoFrame.attr('src', videoString + videoID);
        });

        modal.on('hidden.bs.modal', () => {
            videoFrame.attr('src', '');
        });
    }

    function dropdown_submenu_init() {
        if ( !$('.breadcrumb-navbar .navbar-wrapper').length ) return false;

        let menuName = [];
        let menuLink = [];
        let currentTitle = '';
        let html = '';

        $('.breadcrumb-navbar .navbar-wrapper > li').each(function () {
            let el = $(this);
            
            menuName.push($.trim(el.find('>a').text()));
            menuLink.push(el.find('>a').attr('href'));

            if ( el.find('>a').hasClass('active') ) currentTitle = $.trim(el.find('>a').text());
        });

        html = `
            <div class="dropdown-wrapper d-md-none">
                <div class="dropdown">
                    <a class="button-dropdown" href="javascript:void(0)" role="button" data-toggle="dropdown" aria-expanded="false">${currentTitle}</a>

                    <div class="dropdown-menu">
        `;

        for ( let i = 0; i < menuName.length; i++ ) {
            html += `<a class="dropdown-item" href="${menuLink[i]}">${menuName[i]}</a>`;
        }

        html += `
                    </div>
                </div>
            </div>`;

        $('.breadcrumb-navbar .container-xl').append(html);
    }


    function isMobile() {
        return /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
    
    $(".about-core-value .row-core .col-core-item").on("click", function(e){
        if (isMobile()) {
            $(this).toggleClass("on");
        }
    });
});