(function ($) {
    ('use strict');
    // Detect mobile device (Do not remove!!!)
    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Nokia|Opera Mini/i.test(navigator.userAgent) ? true : false;
    if (isMobile) {
        $('body').addClass('is-mobile');
    }
    var tl = gsap.timeline();
    var $pageAppear = $('.appear');
    if ($pageAppear.length) {
        tl.from(
            $pageAppear,
            {
                duration: 2,
                y: 40,
                autoAlpha: 0,
                stagger: 0.3,
                ease: Expo.easeOut,
                clearProps: 'all',
            },
            1.5,
        );
    }
    //PARALLAX ITEM
    $('.parallax-item').wrap('<div class="parallax-item-wrap"></div>');
    const itemWraps = document.querySelectorAll('.parallax-item-wrap');
    const calcValue = (value, inputMax, inputMin, outputMax, outputMin) => {
        const percent = (value - inputMin) / (inputMax - inputMin);
        const output = percent * (outputMax - outputMin) + outputMin;
        return output;
    };
    itemWraps.forEach(function (itemWrap) {
        const item = itemWrap.querySelector('.parallax-item');
        itemWrap.addEventListener('mousemove', function (e) {
            const mouseX = e.clientX;
            const mouseY = e.clientY;
            const rect = itemWrap.getBoundingClientRect();
            const offsetX = rect.left + rect.width / 2;
            const offsetY = rect.top + rect.height / 2;
            const deltaX = mouseX - offsetX;
            const deltaY = mouseY - offsetY;
            const percentX = deltaX / (itemWrap.clientWidth / 2);
            const percentY = deltaY / (itemWrap.clientHeight / 2);
            TweenMax.to(item, 0.5, {
                x: calcValue(percentX, 1, -1, 20, -20),
                y: calcValue(percentY, 1, -1, 20, -20),
                rotationX: calcValue(percentY, 1, -1, 5, -5),
                rotationY: calcValue(percentX, 1, -1, -5, 5),
                ease: Power1.easeOut,
            });
        });
        itemWrap.addEventListener('mouseleave', function (e) {
            TweenMax.to(item, 0.5, {
                x: 0,
                y: 0,
                rotationX: 0,
                rotationY: 0,
                ease: Power1.easeOut,
            });
        });
    });
    //GSAP scrollTrigger
    gsap.registerPlugin(ScrollTrigger);
    let animationRotate = document.querySelectorAll('.animation-rotate');
    animationRotate.forEach((animationRotate) => {
        gsap.to(animationRotate, {
            duration: 2,
            rotation: 360,
            ease: 'linear',
            repeat: -1,
        });
    });
    let scrollRotate = document.querySelectorAll('.scroll-rotate');
    scrollRotate.forEach((scrollRotate) => {
        gsap.to(scrollRotate, {
            scrollTrigger: {
                trigger: scrollRotate,
                scrub: 2,
            },
            rotation: 720,
        });
    });
    let scrollMoveRight = document.querySelectorAll('.scroll-move-right');
    scrollMoveRight.forEach((scrollMoveRight) => {
        gsap.to(scrollMoveRight, {
            x: 500,
            duration: 1.5,
            scrollTrigger: {
                trigger: scrollMoveRight,
                start: 'top 30%',
                scrub: 2,
            },
        });
    });
    let scrollMoveLeft = document.querySelectorAll('.scroll-move-left');
    scrollMoveLeft.forEach((scrollMoveLeft) => {
        gsap.to(scrollMoveLeft, {
            x: -500,
            duration: 1.5,
            scrollTrigger: {
                trigger: scrollMoveLeft,
                start: 'top 30%',
                scrub: 2,
            },
        });
    });
    let scrollMoveRight2 = document.querySelectorAll('.scroll-move-right2');
    scrollMoveRight2.forEach((scrollMoveRight2) => {
        gsap.to(scrollMoveRight2, {
            x: 800,
            duration: 1.5,
            scrollTrigger: {
                trigger: scrollMoveRight2,
                start: 'top 80%',
                scrub: 2,
            },
        });
    });
    let scrollMoveLeft2 = document.querySelectorAll('.scroll-move-left2');
    scrollMoveLeft2.forEach((scrollMoveLeft2) => {
        gsap.to(scrollMoveLeft2, {
            x: -400,
            duration: 1.5,
            scrollTrigger: {
                trigger: scrollMoveLeft2,
                start: 'top 100%',
                scrub: 2,
            },
        });
    });
    let scrollMoveUp = document.querySelectorAll('.scroll-move-up');
    scrollMoveUp.forEach((scrollMoveUp) => {
        gsap.to(scrollMoveUp, {
            y: -400,
            duration: 1.5,
            scrollTrigger: {
                trigger: scrollMoveUp,
                start: 'top 20%',
                scrub: 2,
            },
        });
    });
    let growUp = document.querySelectorAll('.grow-up');
    growUp.forEach((growUp) => {
        gsap.fromTo(
            growUp,
            {
                autoAlpha: 0.5,
                scale: 0.7,
            },
            {
                autoAlpha: 1,
                duration: 2,
                scale: 1,
                scrollTrigger: {
                    trigger: growUp,
                    start: 'top 90%',
                },
                stagger: 0.2,
            },
        );
    });
    let scrollZoomIn = document.querySelectorAll('.scroll-zoom-in');
    scrollZoomIn.forEach((scrollZoomIn) => {
        gsap.to(scrollZoomIn, {
            scrollTrigger: {
                trigger: scrollZoomIn,
                start: 'top 10%',
                scrub: 2,
            },
            scale: 1.2,
        });
    });
    let scrollZoomIn2 = document.querySelectorAll('.scroll-zoom-in-2');
    scrollZoomIn2.forEach((scrollZoomIn2) => {
        gsap.to(scrollZoomIn2, {
            scrollTrigger: {
                trigger: scrollZoomIn2,
                start: 'top 90%',
                scrub: 2,
            },
            scale: 1,
        });
    });
    let scrollZoomOut = document.querySelectorAll('.scroll-zoom-out');
    scrollZoomOut.forEach((scrollZoomOut) => {
        gsap.to(scrollZoomOut, {
            scrollTrigger: {
                trigger: scrollZoomOut,
                start: 'top 5%',
                scrub: 2,
            },
            scale: 0.5,
        });
    });
    $('.scoll-reduce-border-radius').each(function () {
        $(this).wrap('<div class="scoll-reduce-border-wraper"></div>');
    });
    let reduceBorderRadius = document.querySelectorAll('.scoll-reduce-border-wraper');
    reduceBorderRadius.forEach((reduceBorderRadius) => {
        gsap.to(reduceBorderRadius, {
            scrollTrigger: {
                trigger: reduceBorderRadius,
                start: 'top 98%',
                end: 'top 50%',
                duration: 0,
                scrub: 2,
            },
            borderRadius: '0',
        });
    });
    let revealContainers = document.querySelectorAll('.reveal-img');
    revealContainers.forEach((revealContainers) => {
        let image = revealContainers.querySelector('img');
        let tl4 = gsap.timeline({
            scrollTrigger: {
                trigger: revealContainers,
                toggleActions: 'restart none none reset',
            },
        });
        tl4.set(revealContainers, { autoAlpha: 1 });
        tl4.from(revealContainers, 1.5, {
            xPercent: -100,
            ease: Power2.out,
        });
        tl4.from(image, 1.5, {
            xPercent: 100,
            scale: 1.3,
            delay: -1.5,
            ease: Power2.out,
        });
    });
    //TEXT-UP
    if ($(window).width() > 500) {
        $('.text-up').each(function () {
            $(this).wrap('<div class="reveal-text-cover"><div class="reveal-text"></div></div>');
        });
    }
    const revealTexts = document.querySelectorAll('.reveal-text');
    revealTexts.forEach((revealText) => {
        gsap.set(revealText, { y: 120, opacity: 0 });
        gsap.to(revealText, {
            duration: 1,
            y: 0,
            opacity: 1,
            ease: Power3.easeOut,
            scrollTrigger: {
                trigger: revealText,
                start: 'top 80%',
                end: 'top 20%',
                toggleActions: 'play none none reverse',
            },
        });
    });
    //FADEIN-UP
    const fadeInUp = document.querySelectorAll('.fadeInUp');
    fadeInUp.forEach((fadeInUp) => {
        gsap.fromTo(
            fadeInUp,
            {
                opacity: 0,
                scale: 0.8,
                y: 150,
            },
            {
                opacity: 1,
                duration: 1.5,
                scale: 1,
                y: 0,
            },
        );
    });
    let scrollMoveUp2 = document.querySelectorAll('.scroll-move-up-2');
    scrollMoveUp2.forEach((scrollMoveUp2) => {
        gsap.to(scrollMoveUp2, {
            y: -100,
            duration: 1.5,
            scrollTrigger: {
                trigger: scrollMoveUp2,
                start: 'top 70%',
                scrub: 2,
            },
        });
    });
    let scrollMoveUp3 = document.querySelectorAll('.scroll-move-up-3');
    scrollMoveUp3.forEach((scrollMoveUp3) => {
        gsap.to(scrollMoveUp3, {
            y: -80,
            duration: 2,
            scrollTrigger: {
                trigger: scrollMoveUp3,
                start: 'top 70%',
                scrub: 2,
            },
        });
    });
    //FILLTER BUTTON
    let btnTags = document.querySelectorAll('.btn-tags.btn-filter');
    btnTags.forEach((btnTags) => {
        gsap.from(btnTags, {
            duration: 2,
            scale: 0.8,
            opacity: 0,
            delay: 0,
            stagger: 0.2,
            ease: 'elastic',
            force3D: true,
            scrollTrigger: {
                trigger: btnTags,
                start: 'top 80%',
            },
        });
    });
    function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    }
    // Image parallax
    // ===============
    var imageParallax = document.querySelectorAll('.parallax-image');
    if (imageParallax.length > 0) {
        $('.parallax-image').each(function () {
            // Add wrap <div>.
            $(this).wrap('<div class="parallax-image-wrap"><div class="parallax-image-inner"></div></div>');
            // Add overflow hidden.
            $('.parallax-image-wrap').css({ overflow: 'hidden' });
            var $animImageParallax = $(this);
            var $aipWrap = $animImageParallax.parents('.parallax-image-wrap');
            var $aipInner = $aipWrap.find('.parallax-image-inner');
            let tl_ImageParallax = gsap.timeline({
                scrollTrigger: {
                    trigger: $aipWrap,
                    start: 'top bottom',
                    end: 'bottom top',
                    scrub: true,
                    onEnter: () => animImgParallaxRefresh(),
                },
            });
            tl_ImageParallax.to($animImageParallax, { yPercent: 30, ease: 'none' });
            function animImgParallaxRefresh() {
                tl_ImageParallax.scrollTrigger.refresh();
            }
            // Zoom in
            let tl_aipZoomIn = gsap.timeline({
                scrollTrigger: {
                    trigger: $aipWrap,
                    start: 'top 99%',
                },
            });
            tl_aipZoomIn.from($aipInner, { duration: 1.5, autoAlpha: 0, scale: 1.2, ease: Power2.easeOut, clearProps: 'all' });
        });
    }
    // SHOW IMAGE WHEN HOVER DIV
    const imageHoverShow = gsap.utils.toArray('.image-show-item');
    imageHoverShow.forEach((target) => {
        const image = target.querySelector('.project__img');
        const tlImageShow = gsap.timeline();
        tlImageShow
            .fromTo(
                image,
                {
                    autoAlpha: 0,
                    duration: 1,
                    clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)',
                },
                {
                    autoAlpha: 1,
                    clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0 100%)',
                },
                '>-0.5',
            )
            .pause();
        target.anim = tlImageShow.play().reversed(true);
        target.addEventListener('mouseenter', animateImg);
        target.addEventListener('mouseleave', animateImg);
        target.addEventListener('mousemove', (e) => {
            let xpos = e.offsetX;
            let ypos = e.offsetY;
            const tlImageShow = gsap.timeline();
            tlImageShow.to(image, { x: xpos, y: ypos });
        });
    });
    function animateImg() {
        this.anim.reversed(!this.anim.reversed());
    }
    ScrollTrigger.refresh();
    //growup-image
    var imageZoomIn = $('.img-zoom-in');
    if (imageZoomIn.length > 0) {
        gsap.from(imageZoomIn, 2, {
            scale: 0,
            ease: 'power3.inOut',
            delay: 0,
        });
    }
    //image mark
    var imageMark = $('.image-mark');
    if (imageMark.length > 0) {
        gsap.from(imageMark, 2, {
            width: '100%',
            ease: 'power3.inOut',
            delay: 0.5,
        });
    }
    //image mark
    if (!isMobile) {
        let imageMarkScroll = document.querySelectorAll('.image-mark-scroll');
        imageMarkScroll.forEach((imageMarkScroll) => {
            gsap.to(imageMarkScroll, {
                width: 0,
                ease: 'power3.inOut',
                duration: 1,
                scrollTrigger: {
                    trigger: imageMarkScroll,
                    start: 'top 90%',
                },
            });
        });
    } else {
        $('.image-mark-scroll').remove();
    }
    $('.text-opacity').each(function () {
        var words = $(this).text().split(' ');
        var total = words.length;
        $(this).empty();
        for (index = 0; index < total; index++) {
            $(this).append($('<span /> ').text(words[index] + ' '));
        }
    });
    var TextOpacity = gsap.utils.toArray('.text-opacity');
    TextOpacity.forEach(function (TextOpacity) {
        var spanOpacity = TextOpacity.querySelectorAll('span');
        gsap.to(spanOpacity, {
            scrollTrigger: {
                trigger: TextOpacity,
                start: 'top 85%',
                end: () => `+=${TextOpacity.offsetHeight}`,
                scrub: 1,
            },
            duration: 1,
            opacity: 1,
            stagger: 0.5,
            ease: Linear.easeNone,
        });
    });
    //Horizontal Scroll
    if (!isMobile) {
        let horizontalItem = document.querySelectorAll('.horizontal-item');
        let sectionsRail = document.querySelectorAll('.horizontal-rail');
        sectionsRail.forEach((sectionsRail) => {
            gsap.to(sectionsRail, {
                xPercent: -100 * (horizontalItem.length - 1),
                ease: 'none',
                scrollTrigger: {
                    trigger: '.horizontal-wrap',
                    pin: '.horizontal-wrap',
                    scrub: true,
                    start: 'top top',
                    end: () => `+=${sectionsRail.offsetWidth}`,
                },
            });
        });
    }
    //END
})(jQuery);