$(function() {
    

    new Swiper(".bannerSwiper", {
        effect: 'fade',
        autoplay: {
            disableOnInteraction: false,
            // delay: 5000,
        },
        // loop : true,
        speed: 3000,
        pagination: {
            el: ".banner-pagination",
            clickable: true,
        },
        autoplay: true,
        breakpoints: {
            750: {
                speed: 1000,
            }
            
        },
    });
    new Swiper(".video-player-content", {
        effect: 'fade',
        // autoplay: {
        //     disableOnInteraction: false,
        //     // delay: 5000,
        // }, 
        pagination: {
            el: ".video-pagination",
            clickable: true,
        },
    });
    new Swiper(".award-Swiper", {
        // autoplay: {
        //     delay: 2000,
        //     stopOnLastSlide: false,
        //     disableOnInteraction: false,
        // },
        speed: 2000,
        // loop: true,
        // loopedSlides: 3,
        slidesPerView: 3,
        spaceBetween: 60, 
        // centeredSlides: true,
        paginationClickable: true,
        autoplayDisableOnInteraction: false,
        on:{
            init: function(){
                $('.popup-img').magnificPopup({
                    type: 'image',
                    closeOnContentClick: true,
                    mainClass: 'mfp-img-mobile',
                    image: {
                        verticalFit: true
                    }
            
                });
            }
        },
        breakpoints: {
            750: {
                loopedSlides: 1,
                slidesPerView: 1,
                spaceBetween: 30,
            }
            
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
        // navigation: {
        //     nextEl: '.award-next',
        //     prevEl: '.award-prev',
        // },
    });
    // videoSlide(1)
    // $(window).resize(function () {
    //     videoSlide(1)
    //   }).resize();
    // $('.video-player-slide').on('click', function() {
    //         if (!$(this).hasClass('video-player-slide-active')) {
    //             let currentV = $(this).index()
    //             videoSlide(currentV)
    //         }

    //     })
        // 寮圭獥
    function loadJS(url, callback) {
        var script = document.createElement('script'),
            fn = callback || function() {};
        script.type = 'text/javascript';
        //IE
        if (script.readyState) {
            script.onreadystatechange = function() {
                if (script.readyState == 'loaded' || script.readyState == 'complete') {
                    script.onreadystatechange = null;
                    fn();
                }
            };
        } else {
            //鍏朵粬娴忚鍣
            script.onload = function() {
                fn();
            };
        }
        script.src = url;
        document.getElementsByTagName('head')[0].appendChild(script);
    }
    loadJS('/wp-content/themes/bb-theme-child/migration/ciie2019/js/jquery.magnific-popup.js', function() {})
    $('.popup-youtube').magnificPopup({
        type: 'iframe',
        mainClass: 'mfp-fade',
        closeOnContentClick: false,
        closeBtnInside: true,
        tLoading: '',
        preloader: true,
        callbacks: {
            open: function() {
                var videoid = this.currItem.src;
                $('.mfp-close').css("cssText", "right:-40px !important;top:-40px !important;");
                if (window.innerWidth < 640) {
                    var windowWidth = window.innerWidth - 40
                    $('.mfp-iframe-scaler').css({
                        "position": 'relative',
                        "padding-top": "64.25%"
                    })
                    var height = (windowWidth) * 9 / 16
                    $('#youkuplayer-popup').css({
                        "width": windowWidth + "px",
                        "height": height + "px",
                        "bottom": '0px',
                        "left": '0px',
                        "position": 'absolute'
                    })
                    $('.mfp-close').css("cssText", "left:2px !important;top:-14px !important;");
                    $('body').css('overflow', 'hidden')
                }
                var player = new YKU.Player('youkuplayer-popup', {

                    styleid: '0',

                    client_id: 'add33ebd50a54298',

                    vid: videoid,

                    newPlayer: true
                });
            },
            close: function() {
                $('body').css('overflow', 'auto')
            }
        }
    })

    var controller = new ScrollMagic.Controller()
    let leaftween = new TweenMax.staggerFromTo(['#house #leaf2', '#house #leaf1'], 1, {
        opacity: 0,
        scale:0.2,
        transformOrigin:'left center'
    }, {
        opacity: 1,
        scale:1,
        ease: "Linear.easeNone"
    }, 1)
    let cotween1 = new TweenMax.staggerFromTo(['#co2 #arr1', '#co2 #arr2'], 0.5, {
        opacity: 0
    }, {
        opacity: 1,
        ease: "Linear.easeNone"
    }, 0.5)
    new TimelineMax({ repeat: -1 })
        .add([leaftween, cotween1])
    let suntween = new TweenMax.to('#sun #sun0', 6, {
        rotation: 360,
        transformOrigin: "center",
        ease: "Linear.easeNone",
        repeat: -1
    })
    if(window.innerWidth>=750){
        new ScrollMagic.Scene({
            triggerElement: "#section4",
            triggerHook: 0.7,
            reverse: false
        })
        .on("enter", function(event) {
            console.log("Scene entered.");
            $('#gifvideo')[0].play()
        })
        .addTo(controller);
    }
    // new ScrollMagic.Scene({
    //     triggerElement: "#section5",
    //     triggerHook: 0.4,
    //     reverse:false
    // })
    // .on("enter", function (event) {
    //     console.log("Scene entered.");
    //     $('#section5').addClass('s5-enter')
    // })
    // .addTo(controller);

    new WOW().init();
    let trailArr = [
        { x: 100, y: -150 },
        { x: 0, y: -200 },
        { x: 0, y: 0 },
    ];
    let townMove = function(step) {
        let toX = trailArr[step].x;
        let toY = trailArr[step].y;
        TweenMax.to(".town-bg", 16, {
            x: toX,
            y: toY,
            onComplete: function() {
                step++;
                if (step > 2) {
                    step = 0;
                }
                townMove(step);
            }
        });
    };
    townMove(0)
    if(window.innerWidth<750){
        $('#gifvideo').hide()
        // $('#gifvideo').eq(0).attr('controls','controls')
    }
})
function loadJS(url, callback) {
    var script = document.createElement('script'),
        fn = callback || function() {};
    script.type = 'text/javascript';
    //IE
    if (script.readyState) {
        script.onreadystatechange = function() {
            if (script.readyState == 'loaded' || script.readyState == 'complete') {
                script.onreadystatechange = null;
                fn();
            }
        };
    } else {
        //鍏朵粬娴忚鍣
        script.onload = function() {
            fn();
        };
    }
    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
}
function videoSlide(idx) {
    $('.video-player-slide').removeClass('video-z1 video-z2 video-z3 video-player-slide-active')
    let first = idx
    let second = first > 0 ? first - 1 : 2
    let third = second > 0 ? second - 1 : 2
    // let second = first > 0 ? 0 : 1

    $('.video-player-slide').eq(first).addClass('video-player-slide-active video-z3')
    $('.video-player-slide').eq(second).addClass('video-z2')
    $('.video-player-slide').eq(third).addClass('video-z1')
    if (window.innerWidth > 640) {
    new TimelineMax()
    .to('.video-z3', 0.6, {
        x: 0,
        y: 50,
    }, 0)
    .to('.video-z2', 0.5, {
        x: -50,
        y: 0,
    }, 0)
    .to('.video-z1',0.5, {
        x: -100,
        y: -50,
    }, 0)
    
    }else{
        new TimelineMax()
        .to('.video-z3', 0.6, {
            x: 10,
            y: 0,
        }, 0)
        .to('.video-z2', 0.5, {
            x: 0,
            y: -28,
        }, 0)
        .to('.video-z1',0.5, {
            x: -10,
            y: -56,
        }, 0)
    }
}