/*
 * Name     : main.js
 * Version  : 1.0.3
 * Author   : 1px studio
 * Date     : 2023-07-19
 * Desc     : -
 * -------------------------------------------------
 */
$(function(){
    // 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)
        })
    }
    )();

    /* AOS (스크롤시 transition 효과 라이브러리) */
    AOS.init({
        duration: 1200,
        // once: true 이 옵션은 스크롤 효과를 최초 한번만 실행합니다. 
    });

    /* 메인 슬라이드 리사이징 */
    function news_slide_resize() {
        var left = $(".news-text").offset().left + 320;
        var slide_width = $(window).width() - left;
        $("#main .news-slide").css("width", slide_width+"px");
    }
    news_slide_resize();
    $(".text-box").eq(0).addClass("on");
    $(window).resize(news_slide_resize);

    /* 메인 슬라이드 swiper */
    var main_swiper = new Swiper(".main-swiper", {
        autoplay: {
            delay: 4000,
            disableOnInteraction: false,
        },
        speed: 800,
        loop: false,
        effect: "creative",
        creativeEffect: {
            prev: {
                translate: [0, 0, -400],
            },
            next: {
                translate: ["100%", 0, 0],
            },
        },
        navigation: {
            nextEl: ".main-slide .swiper-button-next",
            prevEl: ".main-slide .swiper-button-prev",
        },
        pagination: {
            el: ".main-slide .swiper-pagination",
            type: "fraction",
            clickable: true,
            formatFractionCurrent: function (number) {
                return ('0' + number).slice(-2);
            },
            formatFractionTotal: function (number) {
                return ('0' + number).slice(-2);
            },
        },
    });
    main_swiper.on('slideChange', function (e) {
        var idx = e.realIndex+1;
        $(".text-box").removeClass("on");
        $(".text-box[data-slide='"+idx+"']").addClass("on");
    });
    /* 메인 슬라이드 PC/모바일 이미지 전환 */
    function mainSlideImageSet() {
        let imgs = $(".main-slide-img");
        if (!imgs[0].hasAttribute("data-src")) {
            return false;
        }
        if (window.innerWidth <= 1200 && !$(imgs[0]).hasClass("mb")) {
            imgs.each((i, el) => {
                var pcSrc = el.src;
                el.src = el.getAttribute('data-src');
                el.setAttribute('data-src', pcSrc);
                el.className = 'main-slide-img mb';
            });
        } else if (this.window.innerWidth > 1200 && $(imgs[0]).hasClass("mb")) {
            imgs.each((i, el) => {
                var mobileSrc = el.src;
                el.src = el.getAttribute('data-src');
                el.setAttribute('data-src', mobileSrc);
                el.className = 'main-slide-img';
            });
        }
    }
    mainSlideImageSet();
    window.addEventListener('resize', mainSlideImageSet);


    /* 제품소식 게시판 추출 */
    function newsBoardExtraction() {
        if ($("#product-output1 table.article-list").length==0) {return;}

        let gl = $("#product-output1 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});
        });
        $("#product-output1 table.article-list").remove();
        
        let code = '';
        boards.forEach((board) => {
            code += '<div class="swiper-slide"><a href="'+board.href+'">';
            code += '<img class="news-slide-img" src="'+board.src+'">';
            code += '<p class="font-product-s-2-SB">'+board.category+'</p>'
            code += '<h3 class="font-product-m-1-SB">'+board.title+'</h3>';
            code += '<p class="font-product-s-2">'+board.desc+'</p>';
            code += '</a></div>';
        });
        $("#product-output1 .news-swiper .swiper-wrapper").html(code);
    }
    newsBoardExtraction();

    /* 제품 소식 슬라이드 swiper */
    var news_swiper = new Swiper("#product-output1 .news-swiper", {
        slidesPerView: "auto",
        spaceBetween: 20,
        slidesOffsetAfter: 20,
        resizeObserver: false,
        navigation: {
            nextEl: "#product-output1 .swiper-button-next",
            prevEl: "#product-output1 .swiper-button-prev",
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
        },
    });

    // 광고대행 게시판 추출
    function newsBoardExtraction2() {
        if ($("#product-output2 table.article-list").length==0) {return;}

        let gl = $("#product-output2 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});
        });
        $("#product-output2 table.article-list").remove();
        
        let code = '';
        boards.forEach((board) => {
            code += '<div class="swiper-slide"><a href="'+board.href+'">';
            code += '<img class="news-slide-img" src="'+board.src+'">';
            code += '<p class="font-product-s-2-SB">'+board.category+'</p>'
            code += '<h3 class="font-product-m-1-SB">'+board.title+'</h3>';
            code += '<p class="font-product-s-2">'+board.desc+'</p>';
            code += '</a></div>';
        });
        $("#product-output2 .news-swiper .swiper-wrapper").html(code);
    }
    newsBoardExtraction2();

    /* 제품 소식 슬라이드 swiper */
    var news_swiper2 = new Swiper("#product-output2 .news-swiper", {
        slidesPerView: "auto",
        spaceBetween: 20,
        slidesOffsetAfter: 20,
        resizeObserver: false,
        navigation: {
            nextEl: "#product-output2 .swiper-button-next",
            prevEl: "#product-output2 .swiper-button-prev",
        },
        scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
        },
    });


    /* 이벤트 게시판 추출 */
    function eventBoardExtraction() {
        // 코딩형 썸네일 
        if ($(".event table.board_output").length==0) {
            let imgs = $(".event .preview-box .slide-img");
            let thumb = '';
            imgs.each((i, el) => {
                thumb += '<div class="swiper-slide"><img class="thumb-img" src="'+el.src+'"></div>';
            });
            $(".event-swiper-thumb .swiper-wrapper").html(thumb);

        // 게시판 연동형 슬라이드+썸네일 
        } else {
            let vl = $(".event table.board_output table.board_output > tbody > tr > td");
            if (vl.length == 0) {return;}
            let boards = [];
            vl.each((i, el) => {
                let imgTag = $(el).find(".board_output_gallery_img");
                let tdTag = $(el).find("tr:last-child > td");
    
                let href = imgTag.find("a").attr("href");
                let src = imgTag.find("img").attr("src");
                let title = tdTag.find(".board_output_gallery_subject").text().trim();
                let desc = tdTag.find(".board_output_gallery_description").text();
                
                boards.push({title: title, desc: desc, href: href, src: src});
            });
            $(".event table.board_output").remove();
            
            let code = '';
            let thumb = '';
            boards.forEach((board) => {
                code += '<div class="swiper-slide"><a href="'+board.href+'">';
                code += '<img class="slide-img" src="'+board.src+'">';
                code += '<div class="hover-bg"><i class="bi bi-arrow-right"></i></div>';
                code += '<div class="hover-text">';
                code += '<div class="font-event-l">'+board.title+'</div>';
                code += '<div class="font-event-s br-mb-none">'+board.desc+'</div>';
                code += '</div></a></div>';
    
                thumb += '<div class="swiper-slide"><img class="thumb-img" src="'+board.src+'"></div>';
            });
            
            $(".event-swiper .swiper-wrapper").html(code);
            $(".event-swiper-thumb .swiper-wrapper").html(thumb);
        }

    }
    eventBoardExtraction();

    /* 이벤트 슬라이드 swiper */
    var event_swiper_thumb = new Swiper(".event-swiper-thumb", {
        spaceBetween: 10,
        slidesPerView: "auto",
        freeMode: true,
        watchSlidesProgress: true,
    });
    var event_swiper = new Swiper(".event-swiper", {
        spaceBetween: 10,
        speed: 800,
        navigation: {
            nextEl: ".event .swiper-button-next",
            prevEl: ".event .swiper-button-prev",
        },
        thumbs: {
            swiper: event_swiper_thumb,
        },
    });
});