var upwardsLocked = false

// JQ 功能擴增
$.fn.triggerAll = function(list) {
    return this.each(function() {
        const $this = $(this)

        $.each(list.split(' '), function(key, val) {
            $this.trigger(val)
        })
    })
}

// 裝置判斷
function DeviceIsTouch() {
    const userAgent = navigator.userAgent
    const regexp = /Android|iPhone|SymbianOS|Windows Phone|iPad|iPod|Touch|Mobile|Tablet|BlackBerry/gi

    return !!userAgent.match(regexp)
}

// resize 裝置判斷
;(function($) {
    $(window).on('resize', function(e) {
        if(DeviceIsTouch()) {
            $('body').removeClass('DeviceWithHover')
        } else {
            $('body').addClass('DeviceWithHover')
        }
    })
})($)

//定義css變數 --vh 避免行動裝置vh計算異常(會被瀏覽器address bar影響)
$(function(){
    function setVh(){
        $('html').attr('style', `--vh: ${window.innerHeight * 0.01}px;`)
    }

    setVh()
    $(window).on('resize', setVh)
})

// 天邊跑馬燈設定
;(function($) {
    const marqueeTarget = $(".top-marquee .marquee-list")
    if(marqueeTarget.length && marqueeTarget.children('.marquee-item').length > 1) {
        $(".top-marquee .marquee-list").owlCarousel({
            items: 1,
            nav: false,
            dots: false,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: true,
            animateIn: 'slideInUp',
            animateOut: 'slideOutUp',
            mouseDrag: false,
            loop: true,
        });
    }

    //跑馬燈倒數模式
    if($('.top-marquee .countdown-box').length) {
        countDown('.top-marquee .countdown-box')
    }

    function leadingZero(number) {
        const num = parseInt(number)
        if(!isNaN(num)) {
            if(Math.abs(num) < 10) {
                return "0" + Math.abs(num)
            } else {
                return String(Math.abs(num))
            }
        } else {
            console.error('輸入格式錯誤')
        }
    }

    function countdownBox(number, string = null) {
        const numberStr = leadingZero(number)
        const letterAry = numberStr.split('')

        const returnStr = letterAry.reduce(function(prev, ele) {
            const str = prev +  '<div class="countdown-rotor">' + ele + '</div>'
            return str
        }, '')
        if(string) {
            return returnStr + '<div class="countdown-text">' + string + '</div>'
        } else {
            return returnStr
        }
    }

    function countDown(target) {
        const leftTime = $(target).attr('data-second')

        if(leftTime > 0) {
            const leftSec = leftTime % 60
            const leftMin = Math.floor(leftTime / 60) % 60
            const leftHour = Math.floor(leftTime / 60 / 60) % 24
            const leftDate = Math.floor(leftTime / 60 / 60 / 24)

            if(leftDate > 0) {
                $(target).html(`
                    <div class="countdown-group">${countdownBox(leftDate, _jsLang.天)}</div>
                    <div class="countdown-group">${countdownBox(leftHour, _jsLang.時)}</div>
                    <div class="countdown-group">${countdownBox(leftMin, _jsLang.分)}</div>
                    <div class="countdown-group">${countdownBox(leftSec, _jsLang.秒)}</div>
                `)
            } else {
                $(target).html(`
                    <div class="countdown-group">${countdownBox(leftHour, _jsLang.時)}</div>
                    <div class="countdown-group">${countdownBox(leftMin, _jsLang.分)}</div>
                    <div class="countdown-group">${countdownBox(leftSec, _jsLang.秒)}</div>
                `)
            }
            $(target).attr('data-second', leftTime - 1)
            setTimeout(countDown, 1000, target)
        }
        else
        {
            $(".top-marquee").hide();
        }
    }
})($)

// 螢幕滾動
;(function($) {
    $(window).on('scroll', function(e) {
        if($(this).scrollTop() > 0) {
            $('.gotop').fadeIn(400)
            $("body").addClass('is-sticky');
        } else {
            $('.gotop').fadeOut(400)
            $("body").removeClass('is-sticky');
        }
    })
})($)


// 主選單
;(function($) {
    let navbarStep =  ''

    $(window).on('resize', function(e) {

        if($(this).width() >= 1200 && navbarStep !== "desktop") {
            navbarStep = "desktop"

            $('body').removeClass('menu-open overflow-hidden');
            $('body').off('click', '.navbar-toggle')
            $('.navbar-main').off('click', '.main-menu .navbar-arrow')
                             .find('.with-children').removeClass('in-active')

        } else if($(this).width() < 1200 && navbarStep !== "mobile") {
            navbarStep = "mobile"

            $('body').on('click', '.navbar-toggle', function(e) {
                e.preventDefault()
                $('body').toggleClass('menu-open overflow-hidden');
                $('.aside-panel, .function-item').removeClass('in-active');
            })

            $('.navbar-main').on('click', '.main-menu .navbar-arrow', function(e) {
                $(this).closest('.with-children').toggleClass('in-active')
                       .siblings('.with-children').removeClass('in-active')
            })
        }
    })

    //桌機板拖動
    function menuGrabScroll(triggerFlag){
        let menu = $(".main-menu"),
            currentAnchor = '',
            pos = {
                left: 0,
                x: 0,
            }
        //判斷navbar是否過長
        if(menu.width() < menu.prop("scrollWidth") && $(".navbar-overflow-arrow").length <= 0){
            $(".navbar-main").append(`<div class="hide-to-xl navbar-overflow-arrow theme-right">
                                          <i class="icon icon-angle-right"></i>
                                      </div>
                                      <div class="hide-to-xl navbar-overflow-arrow theme-left hide">
                                          <i class="icon icon-angle-left"></i>
                                      </div>`)
        }

        function mousedownEvent(e){
            pos = {
                left: menu.scrollLeft(),
                x: e.clientX,
            }
            currentAnchor = $(e.target).closest(".link-anchor")
            if($(e.target).closest(".submenu-item").length <= 0){
                menu.addClass("theme-grabing")
                menu.on("mousemove", mousemoveEvent)
                menu.on("mouseup mouseleave", mouseupEvent)
                $(".navbar-overflow-arrow").removeClass("hide")
            }
        }

        function mousemoveEvent(e){
            e.preventDefault()
            const x = pos.left - (e.clientX - pos.x)
            menu.scrollLeft(x)
        }

        function mouseupEvent(e){
            menu.removeClass("theme-grabing")
            menu.off("mousemove")
            menu.off("mousemove mouseup mouseleave")
            if(pos.left == menu.scrollLeft() && pos.x == e.clientX && currentAnchor.length > 0){
                //沒移動
                window.location = currentAnchor.prop("href")
            }
        }

        //點箭頭左右scroll
        function navbarArrowClick(e){
            let type = ($(e.currentTarget).hasClass("theme-right"))? 'right' : 'left',
                marginLeft = 30,
                offsetRight = 0,
                offsetLeft = 0
            $(".main-item").each(function(){
                let _this = $(this)
                if(_this.position().left - marginLeft < 0){
                    offsetLeft = _this.position().left - marginLeft
                }
                if(_this.position().left - marginLeft > 0){
                    offsetRight = _this.position().left - marginLeft
                    return false
                }
            })

            if(type == 'right'){
                let offsetFinal = menu.scrollLeft() + offsetRight + 1
                if(offsetRight > 0){
                    menu.scrollLeft(offsetFinal)
                    $(".navbar-overflow-arrow.theme-left").removeClass("hide")
                }
            }else{
                let offsetFinal = menu.scrollLeft() + offsetLeft
                if(offsetLeft < 0){
                    menu.scrollLeft(offsetFinal)
                }
            }
        }

        let throttle = throttleScroll(function(){
            if(menu.scrollLeft() == 0){
                $(".navbar-overflow-arrow.theme-left").addClass("hide")
            }else{
                $(".navbar-overflow-arrow.theme-left").removeClass("hide")
            }
            if(menu.scrollLeft() == (menu[0].scrollWidth - menu[0].clientWidth)){
                $(".navbar-overflow-arrow.theme-right").addClass("hide")
            }else{
                $(".navbar-overflow-arrow.theme-right").removeClass("hide")
            }
        }, 250, menu)

        if(!triggerFlag){
            menu.on("mousedown", mousedownEvent)
            $(document).on("click", ".navbar-overflow-arrow", navbarArrowClick)
            throttle.init()
        }else{
            menu.off("mousedown mousemove mouseup mouseleave")
            $(document).off("click", ".navbar-overflow-arrow", navbarArrowClick)
            throttle.destroy()
        }


    }

    let triggerFlag = false
    $(window).on("resize", function(){
        if(($(window).width() >= 1200) && !triggerFlag){
            menuGrabScroll(triggerFlag)
            triggerFlag = true
        }else if(($(window).width() < 1200) && triggerFlag){
            menuGrabScroll(triggerFlag)
            triggerFlag = false
        }
    })
})($)

// gotop
;(function($) {
    $('.gotop').on('click', function(e){
        e.preventDefault()
        $("html, body").animate({scrollTop: 0},800);
    });
})($)





// ==========================================================
//  owl carousel 樣式校正
// ==========================================================
;(function($) {
    function dotsCheck(jqElement) {
        const thisTarget = jqElement
        const checkTarget = thisTarget.find('.owl-dots')

        if(!checkTarget.hasClass('disabled')) {
            thisTarget.addClass('with-dots')
        } else {
            thisTarget.removeClass('with-dots')
        }
    }

    $('body').on('refreshed.owl.carousel', '.owl-carousel.with-dots', function(e) {
        dotsCheck($(this))
    })
})($)






// ==========================================================
//  footer menu toggle
// ==========================================================
;(function($, jQuery, window, document) {
    let footerMenuStep = '';

    $(window).on('resize', function(e) {
        if($(this).width() >= 1200 && footerMenuStep !== 'desktop') {
            footerMenuStep = 'desktop'
            $('.footer-menu').off('click', '.menu-title').find('.menu-item').removeClass('in-active')

        } else if($(this).width() < 1200 && footerMenuStep !== 'mobile') {
            footerMenuStep = 'mobile'
            $('.footer-menu').on('click', '.menu-title', function(e) {
                e.preventDefault()

                $(this).parent('.menu-item').toggleClass('in-active')
                       .siblings('.menu-item').removeClass('in-active')
            })
        }
    })
})($, jQuery, window, document)






// ==========================================================
//  通用跳窗功能
// ==========================================================
;(function($) {
    $('body').on('click', '.popupBox-wrapper', function(e) {
        if(e.currentTarget === e.target || $(e.target).hasClass('closer') || $(e.target).parent().hasClass('closer')) {
            e.preventDefault()

            let popupWrapper = '';

            if(e.currentTarget === e.target) {
                popupWrapper = $(e.target)
            } else {
                popupWrapper = $(e.target).parents('.popupBox-wrapper')
            }

            if(!popupWrapper.hasClass('popupBox-constant')) {
				PopupCloseAnimate(popupWrapper)
            } else {
				PopupCloseAnimate(popupWrapper, false)
            }
        }
    })

    $(document).on('click', '.popupBox-trigger', function(){
        let target = $(this).data("target"),
            popupTarget = $('.popupBox-wrapper[data-popup=' + target + ']')

        if(popupTarget.length > 0){
            $('body').addClass('overflow-hidden')
            popupTarget.removeClass('hide')
        }
    })
})($)


// ==========================================================
//  再買一次
// ==========================================================
;(function($) {
    //再買一次
    $(document).on("click",".Order_Again",function(){
        const order_num = $(this).data("order");
        $.ajax({
            url:Project_Country+"member/ajax/ajax_order_again.php",
            type:"POST",
            data:{order_num:order_num,},
            dataType:'json',
            error:function(d){
                alert('網路連線過慢，網頁請重新整理');
            },
            success:function(d)
            {
                if(d.status != 'ok')
                {
                    alert(d.msg);
                }
                else
                {
                    if(d.dataLayer)eval(d.dataLayer);
                    window.location.href = d.url;
                }
            }
        });
    });
})($)





// ==========================================================
//  快速購物跳窗
// ==========================================================
;(function($) {
    let commonShopcartStep = false
    $('body').on('click', '.QuickShop', function(e) {
        e.preventDefault()
        if(!commonShopcartStep) {
            commonShopcartStep = true
            jQuery.ajax({
                url:  Project_Country + 'ajax/ajax_popup_shopbox.php',
                type: 'POST',
                dataType: 'html',
                data: {
                    SID: $(this).attr('SID'),
                    Serial: $(this).attr('serial'),
                    Amount: $(this).parent().find('.amountBox').val(),
                },
            }).done(function(res){
                if(res.indexOf('window.location.href=') == 0)
                {
                    eval(res);
                }
                else
                {
                    $('body').addClass('overflow-hidden').append(res)
                    const slideTarget = $('.quickShop-box .preview-slide')
                    if(slideTarget.length && slideTarget.children('.slide-item').length > 1) {
                        slideTarget.addClass('with-dots').owlCarousel({
                            nav: true,
                            navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
                            dots: true,
                            margin: 10,
                            items: 1,
                        })
                    }
                }
            }).fail(function(x, y, z) {
                console.log(x)
            }).always(function() {
                commonShopcartStep = false
            })
        }
    })
})($)


// 列表更多資訊開關
;(function($) {
    $('main').on('click', '.toggle-expand', function(e) {
        e.preventDefault();
        let parent = $(this).parents('.table-row')
        if(parent.hasClass("in-expand")){
            $(".table-row").removeClass('in-expand')
        }else{
            $(".table-row").removeClass('in-expand')
            parent.addClass('in-expand')
            parent.prev(".table-row-normal").addClass('in-expand')
            parent.next(".table-notebook").addClass('in-expand')
        }
    })
})($)




// ==========================================================
//  側欄選單開關
// ==========================================================
;(function($) {
    /*$('.aside-panel').on('click', 'a', function(e) {
        if($(this).parent().hasClass('with-children')) {
            e.preventDefault()
            $(this).parent('.with-children').toggleClass('in-active')
                   .siblings('.with-children').removeClass('in-active')
        }
    })*/

    $('.menu-switch').on('click', function(e){
        e.preventDefault()
        $(this).parents('.with-children').eq(0).toggleClass('in-active')
               .siblings('.with-children').removeClass('in-active')
    })

    $('.aside-panel').on('click', '.collapse-title', function(e) {
        e.preventDefault()
        $(this).parent('.item').toggleClass('in-active')
               .siblings('.item').removeClass('in-active')
    })
})($)






// ==========================================================
//  footer 訂閱電子報功能
// ==========================================================
;(function($) {
    if($('#EpaperForm').length) {
        $("body").on('submit', '#EpaperForm', function(e){
            e.preventDefault()

            const enter_str = check_tools.checkEmailNull($("#Epaper_Email"));
            if( enter_str == "NULL" ){
                alert(_jsLang.請輸入Email);
                return false;
            }else if( enter_str == "ERROR" ){
                alert(_jsLang.您輸入的Email格式錯誤);
                return false;
            }else if( enter_str == "PASS" ){
                $.ajax({
                    url: Project_Country + 'include/ajax/ajax_epaper-p.php',
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        Epaper_Email: $("#Epaper_Email").val()
                    },
                })
                .done(function(res) {
                    const status = res.status
                    if(status === "ORDER") {
                        alert(_jsLang.訂閱電子報成功);
                    } else if (status === "CANCEL") {
                        alert(_jsLang.取消訂閱電子報成功);
                    } else if (status === "Usable") {
                        alert(_jsLang.訂閱電子報成功抵用券序號已寄送至您的信箱);
                    } else if(status === "ERROR") {
                        alert(_jsLang.取消訂閱電子報失敗);
                    }
                })
                .fail(function(x, y, z) {
                    console.log(x);
                })
                .always(function() {
                    $("#Epaper_Email").val('');
                });
            }
        });
    }
})($)


// ==========================================================
//  搜尋click顯示
// ==========================================================
;(function($) {
    $(document).on('click', '.header-click-btn', function(e) {
        let clickPop = $(this).parents(".func-item").find(".func-click")
        if(!clickPop.hasClass("in-active")){
            $(".func-click").removeClass("in-active")
            clickPop.addClass("in-active")
            $(document).on("click.close_header_pop", function(e){
                let target = $(e.target)
                if(target.closest(".func-click").length <= 0){
                    clickPop.removeClass("in-active")
                    $(document).off("click.close_header_pop")
                }
            })
        }else{
            clickPop.removeClass(".in-active")
        }
    })
})($)

// ==========================================================
//  幣別切換
// ==========================================================
;(function($) {
    $(document).on('click', '.currency-toggle-btn', function(e) {
        let _this = $(this)
        let currency = _this.data("currency")
        $.ajax({
            url: Project_Country + "ajax/ajax_change_currency.php",
            type: 'POST',
            dataType:'JSON',
            data: {
                currency: currency
            }
        })
        .done(function(res) {
            if(res.status == "OK"){
                location.reload()
            }else{
                alert(_jsLang.資料庫忙線中);
            }
        })
        .fail(function(x, y, z) {
            console.log(x);
            alert(_jsLang.資料庫忙線中);
        })
    })
})($)


// ==========================================================
//  購物車簡易浮動跳窗
// ==========================================================
function FloatShopcart(res) {
    const returnDOM = `
        <div class="float-shopcart">
            ${res}
        </div>
    `

    return returnDOM
}
;(function($) {
    const shopcartTarget = $('#Shop_Cart_Total')
    let CanShowShopcart = true

    shopcartTarget.on('mouseenter', function(e) {
        if(CanShowShopcart) {
            CanShowShopcart = false
            $.ajax({
                url: Project_Country + "ajax/ajax_get_cart.php",
                type: 'GET',
                dataType: 'HTML',
            })
            .done(function(res) {
                shopcartTarget.append(FloatShopcart(res))
            })
            .fail(function(x, y, z) {
                console.log(x);
            })
            .always(function() {
                CanShowShopcart = true
            });
        }
    }).on('mouseleave', function(e) {
        shopcartTarget.children('.float-shopcart').remove()
    })

    // 浮動窗中商品刪除
    $('body').on('click', '.Left_Top_Del', function(e) {
        e.preventDefault()

        // if(confirm(_jsLang.確定刪除嗎+"?")){
            $.ajax({
                url: Project_Country + "shopcart/ajax/ajax_cart_del.php",
                type:"POST",
                cache:false,
                dataType:'json',
                data:{ID:$(this).attr("sid")},
            }).done(function(d){
                if(d.Status == 'RET_SUCCESS'){
                    // alert(_jsLang.刪除成功);
                    window.location.reload();
                }else{
                    alert(_jsLang.資料庫忙線中);
                }
            }).fail(function(d){
                alert('網路連線過慢，網頁請重新整理');
            })
        // }
    })
})($)
function FloatCartPopup(dataObj) {
    const shopcartTarget = $('#Shop_Cart_Total')
    $.ajax({
        url     : Project_Country + "ajax/ajax_get_cart.php",
        type    : "POST",
        async   : true,
        cache   : false,
        data    : dataObj,
    }).done(function(res) {
        shopcartTarget.append(FloatShopcart(res))

        setTimeout(function(){
            shopcartTarget.children('.float-shopcart').remove()
        },3000);
    }).fail(function(x, y, z) {
        console.log(x)
    })
}





// ==========================================================
//  影片預設圖 to iframe 撥放器
// ==========================================================
;(function($) {
    $(document).on('click', '.StaticVideo', function(e) {
        e.preventDefault()

        const targetVID = $(this).attr('data-vid')
        const targetType = $(this).attr('data-type')
        let videoChild = ''

        switch(targetType) {
            case 'youtube':
            default:
                videoChild = `<iframe class="responsive-embed-item" src="https://www.youtube.com/embed/${targetVID}?theme=light;showinfo=0;rel=0&autoplay=1;enablejsapi=1" frameborder="0"></iframe>`
                break;
            case 'facebook':
                videoChild = `<iframe class="responsive-embed-item" src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FDollbao%2Fvideos%2F${targetVID}%2F&show_text=false&width=560&t=0" width="560" height="314" style="border: none; overflow: hidden;" scrolling="no" frameborder="0" allowfullscreen="false" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="false"></iframe>`
                break;
        }

        $(this).parents('.responsive-embed').html(videoChild)

    })
})($)



// 商品大小格切換
;(function($) {
    if($('.switch-group').length) {
        const themeAry = []

        $('.switch-group').find('.switch-item').each(function(i, ele) {
                const themeItem = $(ele).attr('data-target')
                themeAry.push(themeItem)
        })

        $('.switch-group').on('click', '.switch-item', function(e) {
            const targetClass = $(this).data('target')

            $(this).addClass('now')
                   .siblings('.switch-item').removeClass('now')

            $(this).parents('main').find('.items-list').removeClass(themeAry.join(' ')).addClass(targetClass)
        })
    }
})($)






// ==========================================================
//  商品規格 tag 切換
// ==========================================================
;(function($) {
    $('body').on('click', '.tag-box .title-link', function(e) {
        e.preventDefault()

        const thisTarget = $(this).attr('href')
        $(this).parent('.title-item').addClass('in-active')
               .siblings('.title-item').removeClass('in-active')

        $(thisTarget).addClass('in-active')
                     .siblings('.content-item').removeClass('in-active')
    })
})($)


// ==========================================================
//  商品規格評論區塊腳本
// ==========================================================
;(function($) {
    // 輪播功能
    let productReviewStep = ''
    $(window).on('resize', function(e) {
        if($(this).width() >= 1200 && productReviewStep !== 'desktop') {
            productReviewStep = 'desktop'
            $('.content-pics').each(function(i, ele) {
                if($(ele).children().length > 3) {
                    $(ele).owlCarousel({
                        margin: 20,
                        nav: true,
                        dots: false,
                        navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
                        responsive: {
                            0: {
                                items: 3
                            },
                            1600: {
                                items: 4
                            },
                        }
                    })
                }
            });
        } else if($(this).width() < 1200 && productReviewStep !== 'mobile') {
            productReviewStep = 'mobile'
            $('.content-pics').each(function(i, ele) {
                if($(ele).data('owl.carousel')) {
                    $(ele).data('owl.carousel').destroy()
                }
            });
        }
    })

    // 放大圖
    $(document).on('click', '.content-pics .OpenSlide', function(e) {
        e.preventDefault()

        $('body').addClass('overflow-hidden')
        const targetPic = $(this).attr('href');
        const targetGroup = $(this).attr('group')
        const targetStep = $(this).attr('data-step')

        const groupAry = $(this).parents('.content-pics').find('[group=' + targetGroup + ']')
        const slideAry = []
        groupAry.each(function(i, ele) {
            const pushString = $(ele).attr('href')
            slideAry.push(pushString)
        });
        // console.log(slideAry)
        const appendSlides = slideAry.reduce(function(prev, ele, i) {
            const thisStr = `
                <div class="slide-item">
                    <img src="${ele}" alt="">
                </div>
            `
            return prev + thisStr
        }, '')

        const appendChild = `
        <div class="popupBox-wrapper popupComment">
            <button class="closer" type="button"><i class="icon icon-cross" aria-label="close poupBox"></i></button>
            <div class="popupBox-content">
                <div class="comment-slide">
                    ${appendSlides}
                </div>
            </div>
            <script type="text/javascript">
                $('.popupComment .comment-slide').owlCarousel({
                    items: 1,
                    margin: 10,
                    navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
                    nav: true,
                    dots: false,
                }).trigger('to.owl.carousel', [${targetStep - 1}, 1])
            </script>
        </div>
        `

        $('body').append(appendChild)
    })

    // 滑動到評價區塊
    $(document).on('click', '#Go_Comment', function(e) {
        e.preventDefault()
        const clickTarget = $(this).attr('data-target')

        if($(clickTarget).length) {
            const scrollTop = $(clickTarget).offset().top - $('.header-wrapper').height()

            $(clickTarget).trigger('click')
            $('html, body').animate({
                scrollTop
            }, 750)
        }
    })
})($)





// ==========================================================
//  桌機版商品放大功能
// ==========================================================
;(function($) {
    if(!DeviceIsTouch() && $(window).width() > 767) {
        $(document).on('click', '.zoom-link', function(e) {
            e.preventDefault()
        }).on('mouseenter', '.zoom-link', function(e) {
            e.preventDefault()
            const thisPic = $(this).attr('href')

            $(this).before(`
                <img class="zoomin-picture" src="${thisPic}">
                <img class="zoomin-cursor" src="${Project_Country}images/product/pic_zoom_in.svg">
            `)
        }).on('mousemove', '.zoom-link', function(e) {
            e.preventDefault()
            const targetImg = $(this).siblings('.zoomin-picture')
            const targetCursor = $(this).siblings('.zoomin-cursor')
            const imgHeight = $(targetImg).height()
            const imgWidth = $(targetImg).width()

            $(targetImg).css({
                top: (e.offsetY / $(this).height() * imgHeight * -1 + e.offsetY),
                left: (e.offsetX / $(this).width() * imgWidth * -1 + e.offsetX)
            })

            $(targetCursor).css({
                top: e.offsetY,
                left: e.offsetX
            })
        }).on('mouseleave', '.zoom-link', function(e) {
            e.preventDefault()

            $(this).siblings('.zoomin-picture, .zoomin-cursor').remove()
        })

    }
})($)





// ==========================================================
//  摺疊table開關功能
// ==========================================================
;(function($) {
    $(document).on('click', '.CollapseToggle', function(e) {
        e.preventDefault()

        const $targetBox = $(this).parents('.table-row')
        if($targetBox.hasClass('table-controls')) {
            $targetBox.toggleClass('in-expand');
        } else {
            $targetBox.prev('.table-controls').toggleClass('in-expand');
        }
    })
})($)




// ==========================================================
//  通用型滑動到指定位置
// ==========================================================
;(function($) {
    $(document).on('click', '.ScrollToTarget', function(e) {
        e.preventDefault()
        const scrollTarget = $(this).attr('data-target')

        if($(scrollTarget).length) {
            const scrollTop = $(scrollTarget).offset().top - $('.header-wrapper').height()
            $('html, body').animate({
                scrollTop
            }, 750)
        }
    })
})($)





// ==========================================================
//  密碼顯示切換
// ==========================================================
;(function($) {
    $(document).on('click', '.password-toggle', function(e) {
        e.preventDefault()
        const target = $(this).siblings('input')
        const targetType = target.attr('type')

        $(this).find('.icon').toggleClass('icon-eye').toggleClass('icon-eye-slash')
        if(targetType === 'password') {
            target.attr('type', 'text')
        } else if(targetType === 'text') {
            target.attr('type', 'password')
        }

    })
})($)



// trigger function
;(function($) {
    $(window).triggerAll('resize scroll')
})($)


/*影片效果*/
function videoBox(){
    //影片控制
    $(document).on('click','.videoControl',function(e){
        e.preventDefault()
        const targetVideo = $($(this).attr('data-target'))[0]

        if(targetVideo.paused){
            $(this).find('.fa').addClass('fa-pause').removeClass('fa-play');
            targetVideo.play();
        } else {
            $(this).find('.fa').addClass('fa-play').removeClass('fa-pause');
            targetVideo.pause();
        }
    });

    // //影片預覽圖
    // if(document.getElementById("Video")){
    //     document.getElementById("Video").oncanplay=function(){
    //         var video = $("#Video").get(0);
    //         var canvas = document.getElementById("video_review");
    //                 canvas.getContext('2d').drawImage(video, 0, 0, 66, 92);
    //     };
    // }
}

function LeadingZero(input, strLength = 2) {
    let str = String(input)
    if(str.length < strLength) {
        str = '0' + str
        // console.log(str)
        return LeadingZero(str, strLength)
    } else {
        return str
    }
}

function CountdownTimer(limitTime, runFunc = () => false) {
    const now = Date.now()

    if(limitTime > now) {
        const leftTimes     = limitTime - now
        const leftSec       = Math.floor(leftTimes / 1000) % 60
        const leftMin       = Math.floor(leftTimes / 1000 / 60) % 60
        const leftHour      = Math.floor(leftTimes / 1000 / 60 / 60)

        runFunc(`
            <span class="countdown-str">${_jsLang.倒數}</span>
            <span class="countdown-str">${LeadingZero(leftHour)}:${LeadingZero(leftMin)}:${LeadingZero(leftSec)}</span>
        `)
        setTimeout(CountdownTimer, 1000, limitTime, runFunc)
    } else {
        runFunc(`<span><span class="countdown-str">${_jsLang.活動結束}</span></span>`)
    }
}

function CountDown(secondsTarget, runFunc = () => false) {
    const seconds = secondsTarget.attr('second')
    if(seconds > 0) {
        const leftSec       = Math.floor(seconds / 1) % 60
        const leftMin       = Math.floor(seconds / 1 / 60) % 60
        const leftHour      = Math.floor(seconds / 1 / 60 / 60)

        runFunc(`
            <span class="countdown-str">${_jsLang.倒數}</span>
            <span class="countdown-str">${LeadingZero(leftHour)}:${LeadingZero(leftMin)}:${LeadingZero(leftSec)}</span>
        `)
        secondsTarget.attr('second', seconds - 1)
        setTimeout(CountDown, 1000, secondsTarget, runFunc)
    } else {
        runFunc(`<span><span class="countdown-str">${_jsLang.活動結束}</span></span>`)
    }
}

// 關閉跳窗特效
function PopupCloseAnimate(jqElement, removeFlag = true) {
	if(removeFlag){
		jqElement.fadeOut(250, function() {
			jqElement.remove()
		});
	}else{
		jqElement.addClass('hide')
	}
	$('body').removeClass('overflow-hidden')
}

//  客製化 alert popup
function AlertPop(obj) {
    const setting = {
        backgroundColor: '',
        color: '',
        icon: '',
        string: '',
    }
    if(obj) {
        Object.assign(setting, obj)
    }

    let customStyle = ''
    customStyle += (setting.backgroundColor)? `background-color: ${setting.backgroundColor};`: ''
    customStyle += (setting.color)? `color: ${setting.color};`: ''
    const alertStyle = (customStyle)? `style="${customStyle}"`: ''
    const customIcon = (setting.icon)? `<span class="alert-icon">${setting.icon}</span>`: '';
    const alertElement = `
        <div class="alert-wrapper">
            <div class="alert-content" ${alertStyle}>
                ${customIcon}
                <p class="alert-string">${setting.string}</p>
            </div>
        </div>
    `

    $('body').addClass('overflow-hidden').append(alertElement)
    const alertTarget = $('.alert-wrapper')
    setTimeout(function() {
        PopupCloseAnimate(alertTarget)
    }, 1500)
}

//  自定義 confirm popup
function ConfirmPop(obj) {
    const setting = {
        titleName: '',
        titleColor: '',
        string: '',
        trueFunction: () => false,
        falseFunction: () => false,
        extraClass: '',
    }
    if(obj) {
        Object.assign(setting, obj)
    }
    const titleStyle = (setting.titleColor)? `class="confirm-title" style="color: ${setting.titleColor};"`: `class="confirm-title font-primary"`
    const confirmTitle = (setting.titleName)? `<p ${titleStyle}>${setting.titleName}</p>`: ''
    const confirmElement = `
        <div class="popupBox-wrapper confirm-popup ${setting.extraClass}">
            <div class="popupBox-content">
                <button class="closer" type="button" aria-label="close confirm popup"><i class="icon icon-cross"></i></button>
                ${confirmTitle}
                <p class="confirm-string">${setting.string}</p>
                <div class="button-group">
                    <button class="btn btn-outline-default" type="button" data-value="false">${_jsLang.取消}</button>
                    <button class="btn btn-default" type="button" data-value="true">${_jsLang.確認}</button>
                </div>
            </div>
        </div>
    `
    $('body').addClass('overflow-hidden').append(confirmElement)

    $('.confirm-popup').on('click', '.btn', function(e) {
        e.preventDefault()
        let returnValue = false
        const targetWrap = $(this).parents('.confirm-popup')
        PopupCloseAnimate(targetWrap)

        if($(this).attr('data-value') === 'true') {
            returnValue = true
        } else {
            returnValue = false
        }

        return (returnValue)? setting.trueFunction(): setting.falseFunction()
    })
}



// ==========================================================
//  複製連結
// ==========================================================
$(function(){
	$(document).on("click", ".copy-btn", function(e){
		window.navigator.clipboard.writeText($(this).data("link"))
		alert("複製連結成功")
	})
})


$(function(){
	$(".HITS_BT").on("click",function(e){
        e.preventDefault();
        if( $.isNumeric($(this).attr('hid')) && $.isNumeric($(this).attr('hdid')) ){
            var hid = $(this).attr('hid');
            var hdid = $(this).attr('hdid');
            var url = $(this).attr('href');
            var target = $(this).attr('target');
            $.ajax({
                url:Project_Country+"ajax/ajax_add_ad_hits-p.php",
                type:"POST",
                cache:false,
                async:false,
                data:{Hid: hid , Hdid : hdid},
                error:function(d){
                    alert('網路連線過慢，網頁請重新整理');
                },
                success:function(d){
                    if(url){
                        if(target == '_blank'){
                            window.open(url);
                        }else if( ( typeof target === 'undefined' ) || (target == '') ){
                            window.location = url;
                        }else{
                        }
                    }
                }
            });
        }else{
            alert(_jsLang.這是錯誤的連結);
        }
    });
})


// ==========================================================
//  滾動事件節流
// ==========================================================
function throttleScroll(func, time, scrollBox = $(window)){
    let throttleFlag = false


    function throttle(method ,currentScroll){
        if(throttleFlag){
            return false
        }
        throttleFlag = true
        setTimeout(function(){
            //currentScroll為當前滾動的容器
            method(currentScroll)
            throttleFlag = false
        }, time)
    }

    let tempFunc = function(){
        throttle(func, $(this))
    }

    return {
        init: function(){
            scrollBox.on('scroll', tempFunc)
        },
        destroy: function(){
            scrollBox.off('scroll', tempFunc)
        }
    }

}



// ==========================================================
//  商品排序外框
// ==========================================================
$(function(){
    if($(".select-box").length > 0){
        $(document).on("click", function(e){
            if($(e.target).closest(".select-box").length <= 0){
                //點選擇器外
                $(".select-box").removeClass("in-active")
            }
        })
        $(".select-box").each(function(){
            let box = $(this),
                select = box.find(".page-select")
            box.on("click", ".order-title", function(){
                box.toggleClass("in-active")
            })
            box.on("click", ".order-btn", function(){
                let _btn = $(this)
                _btn.addClass("selected").siblings().removeClass("selected")
                select.val(_btn.data("val")).trigger("change")
            })
        })
    }
})



// ==========================================================
//  語系 切換
// ==========================================================
;(function($) {
    //語系選擇
    $(".Select_This_Lang").on("click","li",function(){
         $.post('/ajax/ajax_change_language.php', {Name: $(this).attr('sid')}, function(h){
            window.location.reload();
         }, 'html');
    });

    //語系選擇
    $("#Select_This_Lang3").on("click","a",function(){
            $.ajax({
                url:"/ajax/ajax_change_language.php",
                type:"POST",
                cache:false,
                async:false,
                data:{Name: $(this).attr('sid')},
                success:function(d){
                    window.location.reload();
                }
            });
    });
})($)