var script =  function () {

    var $body = $('html,body');
    var winH = $(window).height();
    var winW = $(window).outerWidth();
    // var docH  = $(document).height();
    var $win = $(window);
    var scrollBottom = $(window).scrollTop() + $(window).height();
    var conH = $('.wrapper').height();
    var headerH = $('.myheader2').height();



    var $sec = $('.sec');
    var hash = location.hash,
        href;

    /* page scroll */
    var thispage = 0;
    var pagescroll = true;
    var pageT = [],
        $sec = $('.sec'),
        $main = $('.wrapper'),
        // _mainTOP = $main.offset().top,
        ah = $main.outerHeight(true),
        pageName = ['kv', 'n20','video', 'moresp' ,'buy'];

    var _thispagescroll = pageName.indexOf(hash);

    

    if(winW > 768){
        $('.playlistWrap').mCustomScrollbar({
            scrollInertia: 500,
            autoDraggerLength: false,
            axis:"y"
        });
    }else{
        $('.playlistWrap').mCustomScrollbar({
            scrollInertia: 500,
            autoDraggerLength: false,
            axis:"x",
            
            // contentTouchScroll: integer
        });
    }


    /* slick ---------------------------------------------------*/

    // $('.sec1 .allkv').not('.slick-initialized').slick({
    //     dots: true,
    //     arrows: false,
    //     autoplay: true,
    //     autoplaySpeed: 2000,
    //     customOnChange: function justChanged(){

    //         if( $('.slick-current .kv').hasClass('white') ){
    //             $('.myheader').removeClass('white');
    //         }else{
    //             $('.myheader').addClass('white');
    //         }

    //     }
    // });

    // $('.sec3').find('.slidebox').slick({
    //     dots: true,
    //     arrows: true
    //     // autoplay: true,
    //     // autoplaySpeed: 4000
    // });


    // var sec2slide = $('.sec2 ._slick').slick({
    //     centerMode: true,
    //     centerPadding: "20%",
    //     slidesToShow: 3,
    //     slidesToScroll: 1,
    //     infinite: true,
    //     autoplay: true,
    //     autoplaySpeed: 4000,
    //     speed: 300,
    //     dots: true,
    //     initialSlide: 0,
    //     responsive: [
    //         {
    //             breakpoint: 769,
    //             settings: {
    //                 centerMode: true,
    //                 centerPadding: "18%",
    //                 slidesToShow: 1,
    //                 initialSlide: 0
    //             }
    //         }
    //       ]
    // });
    // sec2slide.slickPause();

    $('.sec4 .slidebox').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 3500,
        speed: 300,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2
                }
            },
            {
                breakpoint: 640,
                settings: {
                    slidesToShow: 1
                }
            }
          ]
    });
    // $('.sec2 ._slick').slick('slickPause');

    // $('.arrow-box ._prev').on('click', function(){
    //     $('.act-box .slick-prev').click();
    // })
    // $('.arrow-box ._next').on('click', function(){
    //     $('.act-box .slick-next').click();
    // })

    // function sec2slickplay() {
    //     var _scroll = $win.scrollTop(),
    //         _sec2pos = $('.sec2').offset().top;
    //     if( _scroll >=  _sec2pos/2){
    //         // console.log(23)
    //         $('.sec2 ._slick').slick('slickPlay');
    //         // $('.sec2 ._slick').slick('slickSetOption','autoplay','true');
    //     }
    // }
    // $win.scroll(sec2slickplay);

    // $('.sec2 ._slick').slick('slickGoTo', 1);


    // $('.ani3').click(function() {
        // var $inner = $('.sec3 .slick-track');
        // var $tmp = $('<span>')

        // $inner.append($tmp);

        // var counter = $tmp.prevAll('.sec3 .slick-slide').length;
        // while (counter > 0) {
        //     var $box = $tmp.prevAll('.sec3 .slick-slide');
        //     var num = Math.ceil(Math.random() * $box.length);
        //     $tmp.after($box.eq(num));
        //     counter--;
        // }

        // $tmp.remove()

    // })








    // kv白底

    function headerwhite() {

        if( $('.slick-current .kv').hasClass('white') ){
            $('.myheader').removeClass('white');
        }else{
            $('.myheader').addClass('white');
        }

    }
    // headerwhite();




    /* header fix ---------------------------------------------------*/

    var _sec2pos = $('.sec2').offset().top;

    function headerfix() {
        var _scroll = $win.scrollTop();

        if(_scroll >= _sec2pos /3){
            $('.myheader2').fadeIn('fast');
        }else{
            $('.myheader2').fadeOut('fast');
        }
    }
    $win.scroll(headerfix);







    /* 選單 ---------------------------------------------------*/

    // 手機fix
    // function navfix() {
    //     var _scroll = $win.scrollTop();
    //     if( winW<=768 ){
    //         if(_scroll >= 65){
    //             $('.nav').addClass('fixed');
    //         }else{
    //             $('.nav').removeClass('fixed');
    //         }
    //     }else{
    //         $('.nav').removeClass('fixed');
    //     }
    // }
    // navfix();
    // $win.scroll(navfix);

    // // 展開收闔
    // function navslide() {
    //     var _pos = $('.sec1').offset().top;
    //     var _scroll = $win.scrollTop();
    //     if( _scroll >= _pos /2){
    //         $('.nav').removeClass('open');
    //     }
    // }
    // $win.scroll(navslide);


    // 重設
    function navde() {
        $('.mainnav').find('li').removeClass('open');
        $('.subnav').hide();

        $('.burger').attr('toggle', '0');
        $('.burger').removeClass('isclick');

        $('.mainnav').css('height','');
        $('.myheader').css('height','auto');
        TweenMax.to('.myheader', .1, { backgroundColor:'transparent', ease: Quart.easeOut });

        TweenMax.to($('.myheader').find('.logo').find('a') , .1 ,{autoAlpha:1 ,ease:Linear.easeNone});
        $('.logonav').hide();

        $('body').css({
            'overflow-y':'',
            'position': '',
            'height':''
        });

        // $('.mainnav').css('display','flex');

        if(winW <= 768){
            $('.mainnav').hide();
        }else{
            $('.mainnav').show();
        }
    }
    navde();

    // 主選單
    function navfunc() {
        var navopen = $('.burger').attr('toggle');
        if( navopen == 0 ){

            $('.myheader').css({
                'height':'100vh',
                'overflow':'auto'
            });
            // $('.mainnav ul').css('overflow-y','scroll');

            TweenMax.to('.myheader', .1, { backgroundColor:'#fff', ease: Quart.easeOut });
            $('.mainnav').slideDown();

            TweenMax.to($('.myheader').find('.logo').find('a') , .1 ,{autoAlpha:0 ,ease:Linear.easeNone});
            $('.logonav').show();


            $('body').css({
                'overflow-y': 'hidden',
                'position': 'fixed',
                'height':'100%'
            });

            $('.burger').attr('toggle', '1');
            $('.burger').addClass('isclick');
        }
        else if( navopen == 1 ){

            $('.mainnav').css('height','');
            TweenMax.to('.myheader', .5, { backgroundColor:'transparent', delay: .3, ease: Quart.easeOut });
            $('.mainnav').slideUp();

            TweenMax.to($('.myheader').find('.logo').find('a') , .1 ,{autoAlpha:1 ,ease:Linear.easeNone});
            $('.logonav').hide();

            $('body').css({
                'overflow-y':'',
                'position': '',
                'height':''
            });

            $('.burger').attr('toggle', '0');
            $('.burger').removeClass('isclick');
        }
    }
    $('.burger').click(navfunc);


    // 子選單
    // function subnavfunc() {
    //     if( $('.subnav').length ){

    //         $(this).toggleClass('open');
    //         if( $(this).hasClass('open') ){
    //             $(this).find('.subnav').slideDown();
    //         }else{
    //             $(this).find('.subnav').slideUp();
    //         }

    //     }
    // }
    // $('.mainnav').find('li').click(subnavfunc);


    
    // 影片區

    $('.playlist .switchVideo').on('click', playThis);    

    function playThis() {
        var vid = $(this).data('vid');
        var pdname = $(this).data('pdname');
        var slogan = $(this).data('slogan');
        $('.playlist .switchVideo').removeClass('active');
        $(this).addClass('active');
        $('#mainIframe').attr("src","https://www.youtube.com/embed/"+vid+"?rel=0&autoplay=1");
        $('.mainVideo > .pdName').text(pdname);
        $('.mainVideo > .pdSlogan').text("[" + slogan + "]");
    }


    /* nav scroll --------------------------------------------*/

    /* page scroll */
    var thispage = 0;
    var pagescroll = true;
    var pageT = [],
        $sec = $('.sec'),
        $main = $('.wrapper'),
        ah = $main.outerHeight(true);
    // var _thispagescroll = pageName.includes(hash);



    // var hash = location.hash;

    var $navbtn = $('.navbtn');

    // var navRe = function() {
    //     $('.btn_nav').removeClass('isclick');
    //     $('.nav').fadeOut();
    //     $('.nav .inner').removeClass('in');
    // }

    var pageReset = function() {
        pageT = [];
        winW = $win.outerWidth();
        ah = $main.outerHeight(true);
        $sec.each(
            function(i, obj) {
                var t = $(obj).offset().top;
                pageT.push(t);
                if (i == $sec.length - 1) { pageT.push(ah); }
            }
        );

        // console.log(pageT)
    }

    var menuselect = function() {
        $navbtn.removeClass('select');

        // console.log(thispage)

        pageReset();
        // if (winW>=1024){
        //     $('.navbtn[data-page="' + thispage + '"]').addClass('select');
        // }
        $('.navbtn[data-page="' + thispage + '"]').addClass('select');


    }

    var menuscroll = function(n) {
        var _pos;
        thispage = n;
        // if(thispage!==1){sliderclose();}
        pageReset();

        // if (winW <= _media) { $headerH = 47; } else { $headerH = 50; }
        // if (n !== 0) { _pos = $headerH; } else { _pos = 0; }

        // TweenMax.to('body,html', .8, { scrollTop: pageT[thispage] - headerH , ease: Quart.easeOut });
        $body.animate({
            scrollTop: pageT[thispage] - headerH
        }, 600);


        // if(thispage == 4){ sec5Pagechange();}
        // _menuopen = true;
        // menuClick();
    }

    var scrollPage = function(wt, whelf) {
        winH = $win.height();
        winW = $win.outerWidth();
        wt = $win.scrollTop();
        whelf = winH / 3;
        // _mainTOP = $main.offset().top;

        for (var p = 0; p < $sec.length; p++) {
            if (wt > pageT[p] - whelf && wt < pageT[p + 1] - whelf) {
                thispage = p;
            }
        }

        // if(winW > _media){
        //     if(thispage == 1 && autoOpen){
        //         slideropen();
        //         autoOpen=false;
        //     }
        //     else if(thispage !==1){
        //         autoOpen=true;
        //     }
        // }else{
        //     if(thispage == 1 && autoOpen){slideropen(); console.log(autoOpen); autoOpen=false;}
        // }

        // if (wt > _mainTOP) {
        //     var w = $header.width();
        //     $header.addClass('fix');
        //     $header.css('marginLeft',-(w/2));
        // } else {
        //     $header.removeClass('fix');
        //     $header.css('marginLeft','0');
        // }

        menuselect();

        href = pageName[thispage];
        window.location.hash = href;
    }

    var scrollthispage = function() {
        var _pos;
        _thispagescroll = pageName.indexOf(hash.substr(1));

        // console.log(_thispagescroll)

        pageReset();

        var topH = $('.myheader2').height();

        if (_thispagescroll != -1) {
            thispage = pageName.indexOf(hash.substr(1));

            pageReset();

            // if (winW <= _media) { $headerH = 47; } else { $headerH = 50; }
            // if (thispage !== 0) { _pos = $headerH; } else { _pos = 0; }
            if (thispage == 0) {
                TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut });
            } else {
                TweenMax.to('body,html', .8, { scrollTop: pageT[thispage] - topH, ease: Quart.easeOut });
                // $body.animate({
                //     scrollTop: pageT[thispage] 
                // }, 600);
            }

            menuselect();
            href = pageName[thispage];
            window.location.hash = href;
            pagescroll = false;
        } else {

            TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut });

            // lbhref = window.location.hash.substr(1);
            // TweenMax.to('body,html', .8, { scrollTop: 0, ease: Quart.easeOut,onComplete:function()


        };

    }
    setTimeout(function() {
        scrollthispage()
    }, 600);
    
    $navbtn.click(
        function() {
            var n = $(this).data('page');
            // if($(this).attr('data-sec5list')) thisS5 = $(this).data('sec5list');
            menuscroll(n);

            navde();
            // if(winW<=1024){ navRe();}

            // if(_lb)lbClose();
            // _lb = true;
        }
    );




    /* sec4 切換 -----------------------------------------------------*/

    var thisS4 = 0,
        prevS4 = '',
        $btn_sec4 = $('.sec4 .sidebar li');

    var sec4Pagechange = function () {
        if(thisS4 !== prevS4)$('.sec4 .inner').fadeOut(0);
        $('.sec4 .inner[data-inner="' + thisS4 + '"]').fadeIn(500);
        $btn_sec4.removeClass('select');
        $btn_sec4.eq(thisS4).addClass('select');
        prevS4 = thisS4;
    }
    sec4Pagechange(thisS4);
    $btn_sec4.click(function(){
        thisS4 = $(this).index();
        sec4Pagechange();
    });




    /* sec5 切換 -----------------------------------------------------*/

    var thisS5 = 0,
        prevS5 = '',
        $btn_sec5 = $('.sec5 .tabbtn');

    var sec5Pagechange = function () {
        if(thisS5 !== prevS5)$('.sec5 .list').fadeOut(0);
        $('.sec5 .list[data-list ="' + thisS5 + '"]').fadeIn(500);
        $btn_sec5.removeClass('select');
        $btn_sec5.eq(thisS5).addClass('select');
        prevS5 = thisS5;
    }
    sec5Pagechange(thisS5);
    $btn_sec5.click(function(){
        thisS5 = $(this).index();
        sec5Pagechange();
    });







    /* lightbox
    ------------------------------------------------------------*/

    // var lightbox = function(){

        var $lb = $('.lb'),
            $lbbox = $('.lbbox');
        var _vdUrl = 'https://www.youtube.com/embed/'

        var lb_data;
            // lbname = 'announcement';

        // TweenMax.set($('.lb'),{autoAlpha:0});
        // TweenMax.set($('.lb') ,{css:{zIndex:-1}});

        var lbOpen = function(lb_data){

            var lbAni = new TimelineMax();
                lbAni.to($('.lb[data-lb="'+lb_data+'"]') , .5 ,{css:{zIndex:1000}} , '-=.5')
                     .to($('.lb[data-lb="'+lb_data+'"]') , .5 ,{autoAlpha:1 ,ease:Linear.easeNone});
        }

        var lbClose = function(){

            var lbCloseAni = new TimelineMax();
                lbCloseAni.to($('.lb') , .5 ,{autoAlpha:0 ,ease:Linear.easeNone})
                          .to($('.lb') , .5 ,{css:{zIndex:-1}});

            $('#youtuUrl').attr('src' ,'');
        }

        // lbOpen(lbname);
        $('.libtn').click(function(){
            var lbname = $(this).data('lb');
            var ytid = $(this).attr('ytid');

            lbOpen(lbname);
            $('#youtuUrl').attr('src' ,_vdUrl+ytid+'?autoplay=1&wmode=opaque&showinfo=0');

            return false;
        });


        $('.lb .btn_x').click(lbClose);


    // }
    // lightbox();

    $('body').click(function(e){
        var _con = $('.lbbox');   // 设置目标区域
        if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
            lbClose();
        }
    });













    /* resize
    ------------------------------------------------------------*/

    var _resize = function() {

        winW = $win.outerWidth();
        winH = $win.height();
        docH = $(document).height();
        _scroll = $(window).scrollTop();
        scrollBottom = $(window).scrollTop() + $(window).height();
        headerH = $('.myheader2').height();


        // _sec1pos = $('.sec1').offset().top;

        navde();
        // if (pagescroll || winW > 1000) scrollthispage();

        // navfix();

    }
    $win.scroll(scrollPage);
    _resize();
    $win.resize(function() {

        // _resize();

    });





    var windowHeight = $(window).height();

    // Resize Event
    $(window).resize(function() {

        // Check window width has actually changed and it's not just iOS triggering a resize event on scroll
        if ($(window).width() != windowHeight) {

            // Update the window width for next time
            windowHeight = $(window).width();

            // Do stuff here
            _resize();
            // if (pagescroll || windowHeight > 768) scrollthispage();

        }

    });



}





$(function() {
    // $('header').load('include/header.html');
    // $('footer').load('include/footer.html');

    // var imagesLoaded = loading();
    //        imagesLoaded.loadfunc();
    //        imagesLoaded.callback = function(){

    //          script();

    //        };

    script();

    $('.gb-footer-2019__btn-top').click(function () {
        var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
        $body.animate({
            scrollTop: 0
        }, 600);
    })



});