(function($) {
    "use strict";
    //Check element in viewport
    $.fn.isInViewport = function() {
        var elementTop = $(this).offset().top;
        var elementBottom = elementTop + $(this).outerHeight();

        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();

        return elementBottom > viewportTop && elementTop < viewportBottom;
    };
    

    $(document).ready(function() {
        var $menuIcon = $('.menu-humburgur-icon'),
            $header   = $('#header');
        $menuIcon.on('click',function(e){
            $(this).toggleClass('open');
            var target = $(this).data('target');
            $header.toggleClass('header--open');
            $(target).slideToggle();
        })
        
        var audio = document.getElementById('myAudio');
        audio.load();
        // setTimeout(function(){
        //     $('.icon-mute').trigger('click')
        // },5000)
        $('.icon-mute').on('click', function() {
            if ($(this).hasClass('playing')) {
                $(".icon-mute").removeClass("playing").removeClass("stopped");
                $(".icon-mute").addClass("stopped");
                $(".icon-mute").attr('src', "images/audio-off.png");
                $("#myAudio").prop("muted", true);
                audio.pause();
            } else {
                $(".icon-mute").removeClass("playing").removeClass("stopped");
                $(".icon-mute").addClass("playing");
                $(".icon-mute").attr('src', "images/audio-on.png");
                $("#myAudio").prop("muted", false);
                audio.play();
            }
        });

        
        
        $('.character-slider').slick({
            dots: false,
            autoplay: true,
            autoplaySpeed: 7000,
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 1,
            fade: true,
            responsive: [
                {
                    breakpoint: 768,
                    settings:{
                        arrows: false,
                        slidesToShow: 1,
                    },
                },
            ],
        })
        $('.gallery-slider').slick({
           slidesToShow: 3,
           slidesToScroll: 1,
           centerMode: true,
           arrows: true,
           dots: true,
           speed: 300,
           centerPadding: '0px',
           infinite: true,
           autoplaySpeed: 4000,
           autoplay: true
         });
        $('.gallery-slider-mobile').slick({
           slidesToShow: 1,
           slidesToScroll: 1,
           arrows: true,
           dots: true,
           speed: 300,
           autoplaySpeed: 4000,
           autoplay: true
        });
        $('.story-slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: true,
            dots: true,
            speed: 300,
            autoplaySpeed: 5000,
           // infinite: true,
            autoplay: true,
            responsive: [
                {
                    breakpoint: 768,
                    settings:{
                        slidesToShow: 1,
                        centerMode: true,
                        centerPadding: '17.6vw',
                    },
                },
            ],
         });
        
        $('.character-slider-thumb a').on('click',function(e){
            e.preventDefault();
            $('.character-slider-thumb a').removeClass('active')
            $(this).addClass('active')
            let tar = $(this).attr('data-index');
            $('.character-slider').slick('slickGoTo', tar);
        })
        $('.character-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
            $('.character-slider-thumb a').removeClass('active')
            $('.character-slider-thumb a[data-index="'+nextSlide+'"]').addClass('active')
            let bg = $('.character-slider-item[data-slick-index="'+nextSlide+'"]').attr('data-bg');
            let bgmb = $('.character-slider-item[data-slick-index="'+nextSlide+'"]').attr('data-bg-mb');
            $('#charDecor').attr('src',bg)
            $('#charDecor2').attr('src',bgmb)
        });
        
        

        $(window).on('scroll',function(){

            if($('#footer').isInViewport()){
                $('#TOP').show();
            }
            else{
                $('#TOP').hide();
            }
        })

        let lastScrollTop = 0;
        
        $('.modal-news-content').on('scroll', function () {
            let scrollTop = $(this).scrollTop();

            //
            if ((scrollTop - 20) > lastScrollTop) {
                $('.modal-news-scroll').fadeOut();
            } 
            //
            else if (scrollTop === 0) {
                $('.modal-news-scroll').fadeIn();
            }

            lastScrollTop = scrollTop;
        });

        setTimeout(() => {
            UIkit.modal('#modal-baodanh').show()
        }, 1000);

        var hasScrolled = false;
        var userInteracted = false;
        $(document).on('click keydown touchstart', function() {
            userInteracted = true;
            if (!hasScrolled) {
                hasScrolled = true;
                $(".icon-mute").removeClass("stopped").addClass("playing");
                $(".icon-mute").attr('src', "images/audio-on.png");
                $("#myAudio").prop("muted", false);
                audio.play().catch(function(error) {
                    console.log("Cannot auto-play audio:", error);
                });
            }
        });

        var showNofity = "";
        $('.banner-group-cta a').on('click',function(e){
            e.preventDefault();
            clearInterval(showNofity);
            $(this).parents('.banner-group-cta').find('.banner-group-cta-notify').show();
            showNofity = setInterval(function(){
                $('.banner-group-cta-notify').hide();
            },3000);
        })
        
    });


})(jQuery);