$(function(){
    //切換樣式
    const body = $("body")
    const blocks = document.querySelectorAll(".index-block[data-theme='reverse']")
    const blocksOpacity = document.querySelectorAll(".index-block")


    const obs = new IntersectionObserver(function(entries){
        return entries.forEach(function(entry){
            if(entry.isIntersecting){
                body.addClass("theme-reverse")
            }else{
                body.removeClass("theme-reverse")
            }
        })
    },{
        threshold: 0.7
    })
    const obsOpacity = new IntersectionObserver(function(entries){
        return entries.forEach(function(entry){
            if(entry.isIntersecting){
                $(entry.target).addClass("in-display")
            }
        })
    },{
        threshold: 0.2
    })
    blocks.forEach(function(block){
        obs.observe(block)
    })
    blocksOpacity.forEach(function(block){
        obsOpacity.observe(block)
    })

    //紅眼
    let redeye = $(".redeye-slide")

    if(redeye.find(".slide-item").length){
        redeye.owlCarousel({
            items : 1,
            nav : true,
            navText : ['<span class="nav-btn">Prev</span>','<span class="nav-btn">Next</span>'],
            dots:false,
            autoplay:true,
            navSpeed:1000,
            autoplayTimeout:8000,
            autoplaySpeed:1000,
            dotsSpeed:1000,
            loop: true,
            autoplayHoverPause:true,
            onInitialized: updateIndicatorRedeye,
            onChanged: updateIndicatorRedeye,
        });
    }
    function updateIndicatorRedeye(e){
        let total = e.item.count
        let perPage = e.relatedTarget.settings.slideBy || e.relatedTarget.settings.items
        let totalPages = Math.ceil(total / perPage)
        let $nav = $(e.target).closest(".owl-carousel").find(".owl-nav")
        let currentPage = 1

        if(!$nav.find(".owl-page-indicator").length){
            $('<span class="owl-page-indicator"></span>').insertAfter($nav.find(".owl-prev"))
        }else{
            //已初始化 active會抓到更改前所以+1
            currentPage = parseInt($(e.target).find(".owl-item.active .slide-item").data("page")) + 1
        }

        if(currentPage > total){
            currentPage = 1
        }
        $nav.find(".owl-page-indicator").text(currentPage + ' / ' + totalPages)
    }

    //跑馬燈
    $(".marquee").marquee({yScroll: "bottom"});
    if($(".otherlink .item").length>=4){
        $(".otherlink").owlCarousel({
            loop : true,
            // items : 4,
            responsive:{
                0:{
                    items : 1
                },
                480:{
                    items : 3
                },
                960:{
                    items : 4
                }
            },
            nav : true,
            navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
            dots:false,
            autoplay:true,
            navSpeed:1000,
            autoplayTimeout:8000,
            autoplaySpeed:1000,
            dotsSpeed:1000,
        });
    };

    //影音廣告
    let videoCarousel = $(".video-slide")
    if(videoCarousel.find(".slide-item").length){
        videoCarousel.owlCarousel({
            nav : true,
            navText : ['<span class="nav-btn">Prev</span>','<span class="nav-btn">Next</span>'],
            dots:false,
            responsive:{
                0:{
                    items : 1,
                    slideBy: 1,
                    margin: 20
                },
                768:{
                    items : 2,
                    slideBy: 2,
                    margin: 20,
                },
                992:{
                    items : 2,
                    slideBy: 2,
                    margin: 40,
                },
                1200:{
                    items : 2,
                    slideBy: 2,
                    margin: 66,
                },
                1440:{
                    items : 3,
                    slideBy: 3,
                    margin: 66,
                }
            },
            onInitialized: updateIndicator,
            onChanged: updateIndicator
        })
    }
    //櫥窗7
    function getMasonryOptions(){
        let col, gutter
        let windowWidth = $(window).width()
        if(windowWidth >= 1440){
            col = 4
            gutter = 66
        }else if(windowWidth >= 1200){
            col = 4
            gutter = 40
        }else if(windowWidth >= 768){
            col = 3
            gutter = 24
        }else {
            col = 2
            gutter = 16
        }

        return {
            itemSelecor:'.col-item',
            gutter: gutter,
            percentPosition: true
        }
    }
    function initMasonry(){
        const $grid = $(".window-col-box")

        $grid.imagesLoaded(function(){
            $grid.masonry(getMasonryOptions())
        })

        return $grid
    }
    if($(".window-col-box").length > 0){
        let masonryItem = initMasonry()
        $(window).on("resize", function(){
            masonryItem.masonry("destroy")
            masonryItem = initMasonry()
        })
    }

    $('.number').each(function(e,item){
        var n =600*(e+1);
        $(item).animateNumber({
            number:$(item).attr('number')
        },n);
    });

    //小廣告
    let featureCarousel = $(".feature-list")
    let featrueType = ''
    function wrapFeature(){
        let list = $(".feature-list")
        let item = list.children(".feature-item")
        if(list.find(".featrue-group").length > 0){
            return
        }
        for(let i = 0; i< item.length; i +=4){
            item.slice(i, i+4).wrapAll(`<div class="feature-group"></div>`)
        }
    }
    function unwrapFeature(){
        $(".feature-list .feature-group").each(function(){
            $(this).children(".feature-item").unwrap()
        })
    }
    function featureSlide(){
        let width = $(window).width()
        if(width >= 768){
            if(featrueType != 'single'){
                featrueType = 'single'
                featureCarousel.trigger("destroy.owl.carousel")
                unwrapFeature()
                featureCarousel.owlCarousel({
                    nav : true,
                    navText : ['<span class="nav-btn">Prev</span>','<span class="nav-btn">Next</span>'],
                    dots:false,
                    responsive:{
                        0:{
                            items : 1,
                            margin: 12
                        },
                        768:{
                            items : 4,
                            margin: 18,
                        },
                        1200:{
                            items : 4,
                            margin: 66,
                        }
                    },
                })
            }
        }else{
            if(featrueType != 'group'){
                featrueType = 'group'
                featureCarousel.trigger("destroy.owl.carousel")
                wrapFeature()
                featureCarousel.owlCarousel({
                    nav : true,
                    navText : ['<span class="nav-btn">Prev</span>','<span class="nav-btn">Next</span>'],
                    dots:false,
                    responsive:{
                        0:{
                            items : 1,
                            margin: 12
                        },
                        768:{
                            items : 4,
                            margin: 18,
                        },
                        1200:{
                            items : 4,
                            margin: 66,
                        }
                    },
                })
            }
        }
    }
    if(featureCarousel.find(".feature-item").length > 4){
        featureSlide()
        $(window).on("resize", function(){
            featureSlide()
        })
    }



});