/*
 * Name     : main.js
 * Version  : 1.0
 * Author   : 1px studio
 * Date     : 2023.07.19
 * Desc     : -
* ------ !! This file encoding is "EUC-KR" required. !! ------
*/
$(function(){
    /* PRIME COMMON : s */
    // script break in sub page
    if (document.getElementById("isIndex")==null) { return; }

    /* layer popup */
    (function e() {
        function t(e) {
            e.hide()
        }
        $(".px-layer-popup .btn-cookie-close").on("click", function(e) {
            let i = $(this).closest(".px-layer-popup")
            , s = i.attr("id");
            e.preventDefault(),
            $.cookie(s, "1", {
                expires: 1
            }),
            t(i)
        }),
        $(".px-layer-popup .btn-normal-close").on("click", function(e) {
            let i = $(this).closest(".px-layer-popup");
            e.preventDefault(),
            t(i)
        })
    }
    )();
    
    function Mobile() {
        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    }

    function main_slider() {
        let slide_timeout = 0;
        const VER = Mobile() ? "mobile" : "pc";
        const normalDuration = 3500;
        $(".main_video_iframe:not(."+VER+")").remove();

        function slide_control() {
            // debugger;
            clearTimeout(slide_timeout);
            if (main_swiper.slides.length - 1 === main_swiper.activeIndex) {
                main_swiper.slideTo(0);
            } else {
                main_swiper.slideNext();
            }
        }

        function video_play(iframe) {
            let player = new Vimeo.Player(iframe);
            player.play().then(function(err){
                if (err.name) {
                    slide_timeout = setTimeout(slide_control, normalDuration);
                } else {
                    player.getDuration().then(function(duration) {
                        slide_timeout = setTimeout(slide_control, duration*1000);
                    });
                }
            });
        }
        function video_pause(iframe) {
            let player = new Vimeo.Player(iframe);
            player.pause();
            setTimeout(function(){
                player.setCurrentTime(0);
            }, 1000);
        }
        let main_swiper = new Swiper(".main-swiper", {
            speed: 1000,
            loop: false, /* don't loop true. */
            slidesPerView: 1,
            spaceBetween: 0,
            allowTouchMove: false,
            touchRatio: 0,
            navigation: {
                nextEl: ".main-slide .swiper-button-next",
                prevEl: ".main-slide .swiper-button-prev",
            },
            pagination: {
                el: ".main-slide .swiper-pagination",
                clickable: true,
                renderBullet: function (index, className) {
                    let bulletArray = [];
                    $(".main-slide .swiper-slide").each(function() {
                        bulletArray.push($(this).find('.main-slide-title').html());
                    });
                    return '<a class="'+className+'">'+'<span>'+'0'+(index+1)+'</span>'+'<strong>'+bulletArray[index]+'</strong></div>'+'</a>';
                },
            },
            on: {
                init : function (swiper) {
                    $('.main-swiper').addClass('load-init');
                },
                afterInit: function (swiper) {
                    let slide = swiper.slides[swiper.activeIndex];
                    let iframe = $(slide).find("iframe.main_video_iframe."+VER);
                    if (iframe.length > 0) {
                        video_play(iframe);
                    }
                },
                slideChange: function(swiper) {
                    for (let i=0; i < swiper.slides.length; i++) {
                        let index = swiper.activeIndex==i ? 0 : swiper.activeIndex-i;
                        let half_width = swiper.width * 0.5;
                        let translate = index * half_width;
                        swiper.slides[i].querySelector('.main-slide-bg-wrap').style.transform = 'translate3d(' + translate + 'px, 0, 0)';

                        $('.main-swiper').removeClass('load-init');
                    }
                },
                touchStart: function(swiper) {
                    for (let i = 0; i < swiper.slides.length; i++) {
                        swiper.slides[i].style.transition = '';
                    }
                },
                setTransition: function(swiper, speed) {
                    for (let i = 0; i < swiper.slides.length; i++) {
                        swiper.slides[i].style.transition = speed + 'ms';
                        swiper.slides[i].querySelector('.main-slide-bg-wrap').style.transition = speed + 'ms';
                    }
                },
                activeIndexChange: function(swiper) {
                    clearTimeout(slide_timeout);
                },
                transitionStart: function(swiper){
                    let iframes = document.querySelectorAll('iframe.main_video_iframe.'+VER);
                    Array.prototype.forEach.call(iframes, function(iframe){
                        video_pause(iframe);
                    });
                },
                transitionEnd: function(swiper){
                    let slide = swiper.slides[swiper.activeIndex];
                    let iframe = $(slide).find("iframe.main_video_iframe."+VER);
                    if (iframe.length > 0) {
                        video_play(iframe);
                    } else {
                        slide_timeout = setTimeout(slide_control, normalDuration);
                    }
                }
            }
        }); 
    }
    main_slider();


    function init_product_slide() {
        if ($(".product .article-list").length == 0) return;
        
        let list = $(".product .article-list > tbody > tr");
        let html = `<div class="swiper-wrapper">`;
        list.each(function(){
            let href = $(this).find("a").attr("href");
            let src = $(this).find(".board_output_imgs").attr("src");
            let subject = $(this).find(".board_output_gallery_subject a").text().trim();
            let desc = $(this).find(".board_output_gallery_description").text().trim();
            html += `
            <div class="swiper-slide">
                <a href="${href}">
                    <img src="${src}" alt="${subject}">
                    <div class="txt">
                        <h5 class="product-title">${subject}</h5>
                        <p class="product-desc">${desc}</p>
                    </div>
                </a>
            </div>`;
        });
        html += '</div>';
        $("section.product .prod-swiper").empty().html(html);
    }
    init_product_slide();


    /* our brand swiper */
    var brand_swiper = new Swiper(".brand-swiper", {
        slidesPerView: "auto",
        spaceBetween: 10,
        slidesPerView: 1,
        loop: true,
        navigation: {
            nextEl: ".our-brand .brand-button-next",
            prevEl: ".our-brand .brand-button-prev",
        },
        pagination: {
            el: ".our-brand .brand-pagination",
            type: "fraction",
            formatFractionCurrent: function (number) {
                return ('0' + number).slice(-2);
            },
            formatFractionTotal: function (number) {
                return ('0' + number).slice(-2);
            },
        },
        breakpoints: {
            390: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
            960: {
                slidesPerView: 3,
                spaceBetween: 40,
            }
        },
    });

    /* number counting */
    gsap.registerPlugin(ScrollTrigger);
    var startCount = [{var: 0, max: 350},{var: 0,max:10},{var: 0,max:2015},{var: 0,max:35}];
    startCount.forEach((obj, i)=>{
        gsap.to(startCount, {
            var: obj.max, 
            duration: 3, 
            ease:"none",
            onUpdate: function () {
                document.querySelector(".count"+(i+1)).innerHTML = obj.var.toFixed();
            },
            onComplete: function () {
                document.querySelector(".color-tag"+(i+1)).style.color = "#0D6EFD";
            },
            scrollTrigger: {
                trigger: ".count"+(i+1),
            },
        })
    });
    
    /* channels */
    var channels_swiper = new Swiper(".channels-swiper", {
        speed: 800,
        slidesPerView: 2,
        spaceBetween: 10,
        loop: true,
        autoplay: {
            delay: 2000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: ".channels .channels-button-next",
            prevEl: ".channels .channels-button-prev",
        },
        pagination: {
            el: ".channels .channels-pagination",
        },
        breakpoints: {
            576: {
                slidesPerView: 3,
            },
            768: {
                slidesPerView: 4,
                spaceBetween: 20,
            },
            992: {
                slidesPerView: 5
            },
            1280: {
                slidesPerView: 6,
                spaceBetween: 30,
            },
            1440: {
                slidesPerView: 7,
                spaceBetween: 30,
            }
        },
    });


    /* product swiper */
    var prod_swiper = new Swiper(".prod-swiper", {
        slidesPerView: 1,
        slidesPerGroup: 1,
        spaceBetween: 0,
        navigation: {
            nextEl: ".product .swiper-button-next",
            prevEl: ".product .swiper-button-prev",
        },
        breakpoints: {
            480: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 20
            },
            768: {
                slidesPerView: 3,
                slidesPerGroup: 3,
                spaceBetween: 30
            },
            991: {
                slidesPerView: 4,
                slidesPerGroup: 4,
                spaceBetween: 30,
            },
            1550: {
                slidesPerView: 4,
                slidesPerGroup: 4,
                spaceBetween: 67,
            }
        },
    });
    prod_swiper.on('reachEnd', function(){
        $(".prod-swiper .smooth-edge").addClass("left");
    });
    prod_swiper.on('reachBeginning', function(){
        $(".prod-swiper .smooth-edge").removeClass("left");
    });
    

    function init_event_slide() {
        if ($(".event:not(#fourlap-news) .article-list").length == 0) return;

        let list = $(".event:not(#fourlap-news) .article-list > tbody > tr > td");
        let html = ``;
        list.each(function(i){
            if ($(this).html().trim().length == 0) {return false;}
            let href = $(this).find("a").attr("href");
            let src = $(this).find(".board_output_imgs").attr("src");
            let subject = $(this).find(".board_output_gallery_subject").text().trim();
            let date = $(this).find(".board_output_gallery_etc").eq(0).text().replaceAll("-", ".");
            html += `
            <div class="swiper-slide">
                <a href="${href}">
                    <div class="image">
                        <img src="${src}" alt="${subject}">
                    </div>
                    <div class="txt">
                        <h5 class="event-title">${subject}</h5>
                        <span class="event-date">${date}</span>
                    </div>
                </a>
            </div>`;
        });
        $("section.event:not(#fourlap-news) .event-swiper .swiper-wrapper").empty().html(html);
    }
    init_event_slide();

    /* event swiper */
    var event_swiper = new Swiper(".event:not(#fourlap-news) .event-swiper", {
        slidesPerView: "auto",
        spaceBetween: 20,
        resizeObserver: false,
        navigation: {
            nextEl: ".event:not(#fourlap-news) .swiper-button-next",
            prevEl: ".event:not(#fourlap-news) .swiper-button-prev",
        },
    });
    event_swiper.on('reachEnd', function(){
        $(".event:not(#fourlap-news) .event-swiper .smooth-edge").addClass("left");
    });
    event_swiper.on('reachBeginning', function(){
        $(".event:not(#fourlap-news) .event-swiper .smooth-edge").removeClass("left");
    });




    // FOURLAB :: NEWS 
    function init_news_slide() {
        if ($("#fourlap-news .article-list").length == 0) return;

        let list = $("#fourlap-news .article-list > tbody > tr");
        let html = ``;
        list.each(function(i){
            if ($(this).html().trim().length == 0) {return false;}
            let href = $(this).find("a").attr("href");
            let src = $(this).find(".board_output_imgs").attr("src");
            let subject = $(this).find(".bd_out1").text().trim();
            let date = $(this).find("td[align=center]").eq(0).text().replaceAll("-", ".");
            html += `
            <div class="swiper-slide">
                <a href="${href}">
                    <div class="image">
                        <img src="${src}" alt="${subject}">
                    </div>
                    <div class="txt">
                        <h5 class="event-title">${subject}</h5>
                        <span class="event-date">${date}</span>
                    </div>
                </a>
            </div>`;
        });
        $("section#fourlap-news .event-swiper .swiper-wrapper").empty().html(html);
    }
    init_news_slide();

    /* news swiper */
    var news_swiper = new Swiper("#fourlap-news .event-swiper", {
        slidesPerView: "auto",
        spaceBetween: 20,
        resizeObserver: false,
        navigation: {
            nextEl: "#fourlap-news .swiper-button-next",
            prevEl: "#fourlap-news .swiper-button-prev",
        },
    });
    news_swiper.on('reachEnd', function(){
        $("#fourlap-news .event-swiper .smooth-edge").addClass("left");
    });
    news_swiper.on('reachBeginning', function(){
        $("#fourlap-news .event-swiper .smooth-edge").removeClass("left");
    });


    
    function init_notice() {
        if ($(".notice .article-list").length == 0) return;

        let list = $(".notice .article-list tr");
        let html = "";
        let aos_delay = 0;
        list.each(function(i){
            let a = $(this).find("a");
            let href = a.attr("href");
            let subject = a.text().trim();
            let date = $(this).find("td").eq(2).text();
            let desc = $(this).find("td").last().text();
            let open = i == 0 ? "open" : "";
            let line = i == 0 ? "notice-line-1" : "notice-line-2";
            html += `
            <div class="row ${line} pt-30">
                <div class="col-sm-2 col-3">
                    <p class="notice-date">${date}</p>
                </div>
                <div class="col-lg-9 col-sm-8 col-6">
                    <h5 class="notice-title">${subject}</h5>
                    <p class="notice-text ellipsis-1 ${open}">${desc}</p>
                </div>
                <div class="col-lg-1 col-sm-2 col-3 text-center">
                    <a href="${href}" class="notice-more">MORE +</a>
                </div>
            </div>`;
        });
        $("section.notice .notice-content").html(html);
        $("section.notice .article-list").remove();
        aos_delay += 150;
    }
    init_notice();
   
    /* NOTICE open */
    $("section.notice .notice-title").on("click", function(e){
        $(this).next(".notice-text").toggleClass("open");
    });


    AOS.init({
        duration: 600,
        once: true
    });
});