/*
 * Name     : main.js
 * Version  : 1.0.0
 * Product  : prime05
 * Author   : 1px studio
 * Date     : 2024.03.08
 * Desc     : -
---------------------------------------------------
*/
$(function(){
    /* PRIME COMMON : s */
    // script break in sub page
    if (document.getElementById("isIndex")==null) { return; }

    /* 레이어 팝업 */
    (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)
        })
    }
    )();
    /* PRIME COMMON : e */
    

    /* hero slide */
    let hero_progress = $("#hero .progress-inner");
    function heroSlider() {
        let slide_duration = 1000;
        let hero_swiper = new Swiper(".swiper.hero-swiper", {
            speed: 1000,
            loop: true,
            slidesPerView: 1,
            spaceBetween: 0,
            autoplay: {
                delay: 4500,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },
            navigation: {
                nextEl: "#hero .hero-next",
                prevEl: "#hero .hero-prev",
            },
            effect: "fade",
            pagination: {
                el: "#hero .swiper-page",
                clickable: true,
                bulletClass: "hero-bullet",
                bulletActiveClass: "hero-bullet-active"
            },
            on: {
                autoplayTimeLeft(swiper, time, percent) {
                    let line = $("#hero .progress-line").height();
                    let height = (1 - percent) * 100;
                    height = height > 100 ? 100 : height;
                    hero_progress.height(height+'%');
                },
                slideChange: function(swiper) {
                    hero_stop = false;
                    let idx = swiper.realIndex+1 > 9 ? swiper.realIndex+1 : "0"+(swiper.realIndex+1);
                    $("#hero .progress-num").text(idx);
                },
            }
        });
        
        /* slide change content text */
        let text_list = $("#hero .hero-text-box[data-slide]");
        let before_content = text_list.last();
        function heroContentChange(e) {
            const idx = e.realIndex;
            let current = text_list.eq(idx);
            gsap.to(before_content, { opacity: 0, display: "none", duration: slide_duration/1000/2, onComplete: () => {
                gsap.fromTo(current, { opacity: 0, display: "flex" }, { opacity: 1, duration: 1.2, ease: "power4.out", delay: 0.3 });
                gsap.fromTo(current.find("[up-transition]"), { y: "100px" }, { y: "0%", duration: 1.0, ease: "power4.out", delay: 0.3 });
                before_content = current;
            }});
        }
        let up_list = $("#hero [up-transition]");
        $.each(up_list, function(){
            $(this).wrap("<div class='hide-box'></div>")
        });
        hero_swiper.on('realIndexChange', function (e) {
            heroContentChange(e);
        });
        heroContentChange(hero_swiper);

        /* button mouseover slide pause */
        $(".hero-more").on("mouseover", function(){
            hero_swiper.autoplay.pause();
        });
        $(".hero-more").on("mouseout", function(){
            hero_swiper.autoplay.resume();
        });
    }
    heroSlider();


    /* notice board */
    function noticeBoardExtraction() {
        if ($("section.notice table.article-list").length==0) {return;}
        
        let regex = RegExp(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/);
        let gl = $("section.notice table.article-list > tbody > tr");
        let boards = [];
        gl.each((i, el) => {
            let a = $(el).find("a");
            let title = a.text().trim();
            let href = a.attr("href");
            let desc = $(el).find("td").last().text().trim();
            let d = $(el).find("td").eq(2);
            let date = '';
            if (d.length > 0) {
                if (regex.test(d.text())) {
                    date = d.text().replaceAll("-", ".");
                }
            }
            
            boards.push({date: date, title: title, desc: desc, href: href});
        });
        $("section.notice table.article-list").remove();
        
        let code = '';
        boards.forEach((board) => {
            code += '<div class="swiper-slide">';
            code += '<a href="'+board.href+'">';
            code += '<div class="notice-title">';
            code += '<h5>'+board.title+'</h5></div>';
            code += '<div class="notice-content">';
            code += '<p class="ellipsis-1">'+board.desc+'</p></div>';
            code += '<div class="notice-date">';
            code += '<p>'+board.date+'</p>';
            code += '</div></a></div>';
        });
        $("section.notice .notice-swiper .swiper-wrapper").html(code);
    }
    noticeBoardExtraction();

    /* notice swiper */
    var notice_swiper = new Swiper(".notice .notice-swiper", {
        direction: 'vertical',
        effect: 'slide',
        slidesPerView: 1,
        loop: true,
        navigation: {
            nextEl: ".notice .notice-next",
            prevEl: ".notice .notice-prev",
        },
    });


    /* ability counter */
    $('.counter').counterUp({
        delay: 10,
        time: 1000
    });
    

    /* brand video layer popup */
    let video_popup = $("#video-popup");
    let video_wrapper = $("#video-popup .video-wrapper");
    let video_type = video_wrapper.children().data("video");
    let youtube_player;
    if (video_type == "youtube"){
        youtubeScriptSetting();
    }
    function youtubeScriptSetting() {
        let video_id = $("#ytplayer").attr("video-id");
        window.YT.ready(function() {
            youtube_player = new YT.Player("ytplayer", {
                videoId: video_id,
                playerVars:{
                    'origin': location.origin,
                    'playlist': video_id 
                }
            });
        });
    }
    
    $("#video-view").on("click", function () {
        gsap.fromTo(video_popup, { opacity: 0, display: "flex" }, { opacity: 1, duration: 0.5, ease: "power4.out", onComplete: () => {
            gsap.fromTo(video_wrapper, { y: "-50%", opacity: 0, display: "flex" }, { y: "0%", opacity: 1, duration: 0.5, ease: "power4.out", onComplete: () => {
                if (video_type == "vimeo") {
                    let vimeo_player = new Vimeo.Player($("#video-popup iframe"));
                    vimeo_player.play();
                } else if (video_type == "youtube") {
                    youtube_player.playVideo();
                } else if (video_type == "ftp") {
                    let ftp_player = video_wrapper[0].children[0];
                    ftp_player.play();
                }
            }});
        }});
    });
    $("#video-popup .close-cover").on("click", function(){
        gsap.fromTo(video_wrapper, { y: "0%" }, { y: "-50%", opacity: 0, display: "none", duration: 0.5, ease: "power4.out", onComplete: () => {
            if (video_type == "vimeo") {
                let vimeo_player = new Vimeo.Player($("#video-popup iframe"));
                vimeo_player.pause();
                vimeo_player.setCurrentTime(0);
            } else if (video_type == "youtube") {
                youtube_player.stopVideo();
            } else if (video_type == "ftp") {
                let ftp_player = video_wrapper[0].children[0];
                ftp_player.pause();
                ftp_player.currentTime = 0;
            }
        }});
        gsap.fromTo(video_popup, { opacity: 1 }, { opacity: 0, display: "none", duration: 0.5, ease: "power4.out"});
    });
  


    /* product board + slide */
    function productBoardExtraction(_id) {
        if ($(_id+"table.article-list").length==0) {return;}
        
        let gl = $(_id+"table.article-list > tbody > tr");
        let boards = [];
        gl.each((i, el) => {
            let a = $(el).find(".board_output_gallery_img > a");
            let t = $(el).find("tr:last-child > td");
            let href = a.attr("href");
            let src = a.find("img").attr("src");
            let title_tag = t.find(".board_output_gallery_subject a");
            let desc_tag = t.find(".board_output_gallery_description");
            let title = title_tag.text().trim();
            let desc = desc_tag.text().trim();
            title_tag.remove();
            desc_tag.remove();
            let category = t.text().trim();
            boards.push({category: category, title: title, desc: desc, href: href, src: src});
        });
        $(_id+"table.article-list").remove();
        
        let code = '';
        boards.forEach((board) => {
            code += '<div class="swiper-slide">';
            code += '<a href="'+board.href+'">';
            code += '<div class="product-img">';
            code += '<img src="'+board.src+'" alt="'+board.title+'">';
            code += '<div class="product-hover">';
            code += '<span>View product</span></div></div>';
            code += '<div class="product-text">';
            code += '<h5 class="product-title">'+board.title+'</h5>';
            code += '</div></a></div>';
        });
        $(_id+".product-swiper .swiper-wrapper").html(code);
    }
    function setProductSwiper(){
        let product = $(".product");
        $.each(product, function(i, dom) {
            var dom_id = "#"+dom.id+" ";

            productBoardExtraction(dom_id);
            let product_swiper = new Swiper(dom_id+".product-swiper", {
                slidesPerView: 1,
                spaceBetween: 22,
                freeMode: true,
                navigation: {
                    nextEl: dom_id+".swiper-next",
                    prevEl: dom_id+".swiper-prev",
                },
                breakpoints: {
                    480: {
                        slidesPerView: 2
                    },
                    768: {
                        slidesPerView: 3
                    },
                    1100: {
                        slidesPerView: 3
                    }
                },
            });
        });
    }
    setProductSwiper();

    /* product swiper mobile buttons */
    $(".product .swiper-mobile-buttons button").on("click", function(e){
        if ($(this).hasClass("prev")) {
            $(".product .swiper-prev").trigger("click");
        } else {
            $(".product .swiper-next").trigger("click");
        }
    });

    /* client marquee */
    $('.client-box').marquee({
        speed: 80,
        duplicated: true,
        pauseOnHover: true
    });
    

    function blogBoardExtraction(_id) {
        if ($(_id+"table.article-list").length==0) {return;}

        let gl = $(_id+"table.article-list > tbody > tr");
        let regex = RegExp(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/);
        let boards = [];
        gl.each((i, el) => {
            let a = $(el).find("a");
            let href = a.attr("href");
            let src = a.find("img").attr("src");
            let title = $(el).find(".bd_out1").text().trim();
            let date = $(el).find("td").eq(3).text().trim();
            if (regex.test(date)) {
                date = date.substr(5,5).replace("-", ".");
            }
            
            boards.push({title: title, date: date, href: href, src: src});
        });
        $(_id+"table.article-list").remove();
        
        let code1 = '<div class="col-4"><div class="blog-img" data-aos="fade-up">';
        let code2 = '<div class="col-md-8 col-12"><div class="blog-list" data-aos="fade-up">';

        boards.forEach((board, i) => {
            let active = i==0 ? ' active' : '';
            code1 += '<img class="'+active+'" src="'+board.src+'" alt="'+board.title+'">';
            
            code2 += '<a href="'+board.href+'" class="blog-row'+active+'">';
            code2 += '<img src="'+board.src+'" alt="'+board.title+'">';
            code2 += '<div class="blog-date">'+board.date+'</div>';
            code2 += '<div class="blog-title">'+board.title+'</div>';
            code2 += '<button class="blog-link">More</button></a>';
        });
        code1 += '</div></div>';
        code2 += '</div></div>';
        
        $(_id+".blog-box").html(code1 + code2);
    }
    
    function setBlogSwiper(){
        let blog = $(".blog");
        $.each(blog, function(i, dom) {
            var dom_id = "#"+dom.id+" ";
            blogBoardExtraction(dom_id);
        });
    }
    setBlogSwiper();


    /* blog mouseover */
    $(".blog .blog-row").on("mouseover", function(e){
        $(".blog .blog-row").removeClass("active");
        $(this).addClass("active");
        let idx = $(this).index();
        $(".blog .blog-img img").removeClass("active");
        $(".blog .blog-img img").eq(idx).addClass("active");
    });

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