function initGallery() {
    $('.gallery').each((index, element) => {
        let $gallery = $(element);

        let onAnimation = false;

        let $galleryItem = $gallery.find('.gallery__item');

        let $pagination = $gallery.find('.gallery__pagination');

        let $galleryNav = $gallery.find('.gallery__nav');

        let $galleryNavPrev = $galleryNav.filter('[data-nav="prev"]');

        let $galleryNavNext = $galleryNav.filter('[data-nav="next"]');

        let $galleryNavPrevArrow = $galleryNavPrev.find('.gallery__nav__arrow');

        let $galleryNavNextArrow = $galleryNavNext.find('.gallery__nav__arrow');

        let $galleryNavPrevImage = $galleryNavPrev.find('.gallery__nav__image');

        let $galleryNavNextImage = $galleryNavNext.find('.gallery__nav__image');

        function galleryHeight() {
            $gallery.attr('style', `height: ${Math.max(...$galleryItem.find('img').get().map((item) => item.offsetHeight))}px`);
        }

        let galleryHeightTimeout = setTimeout(() => {
            galleryHeight();
        }, 100);

        $(window).on('resize', () => {
            clearTimeout(galleryHeightTimeout);

            galleryHeightTimeout = setTimeout(() => {
                galleryHeight();
            }, 100);
        });

        let currentSlideIndex = 0;

        for (let i = 0; i < $galleryItem.length; i++) {
            $galleryItem.eq(i).data('slide', i).attr('data-slide', i);

            $pagination.append(`
                <div class="gallery__pagination__item" data-item="${i}"></div>
            `);
        }

        let $paginationItem = $gallery.find('.gallery__pagination__item');

        let $currentSlide;

        let $nextSlide;

        let $prevSlide;

        let $currentPuginationItem;

        function sortSlides() {
            $currentSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex}"]`);

            if (currentSlideIndex !== $galleryItem.length - 1) {
                $nextSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex + 1}"]`);
            } else {
                $nextSlide = $galleryItem.filter('[data-slide="0"]');
            }

            if (currentSlideIndex !== 0) {
                $prevSlide = $galleryItem.filter(`[data-slide="${currentSlideIndex - 1}"]`);
            } else {
                $prevSlide = $galleryItem.filter(`[data-slide="${$galleryItem.length - 1}"]`);
            }

            $galleryNavPrevImage.find('img').remove();

            $galleryNavPrevImage.append(`
                <img src="${$prevSlide.find('img').attr('src')}" alt="" />
            `);

            $galleryNavNextImage.find('img').remove();

            $galleryNavNextImage.append(`
                <img src="${$nextSlide.find('img').attr('src')}" alt="" />
            `);

            $currentPuginationItem = $paginationItem.filter(`[data-item="${currentSlideIndex}"]`);

            $currentPuginationItem.addClass('is-active');
        }

        sortSlides();

        $currentSlide.addClass('is-current');
        $nextSlide.addClass('is-next');
        $prevSlide.addClass('is-prev');

        function nextSlide() {
            new TimelineMax({
                onStart() {
                    $nextSlide.addClass('is-before-current');
                    onAnimation = true;
                    $currentPuginationItem.removeClass('is-active');
                },
                onComplete() {
                    $currentSlide.removeClass('is-current');
                    $nextSlide.removeClass('is-next is-before-current').addClass('is-current');
                    $prevSlide.removeClass('is-prev');
                    currentSlideIndex = $nextSlide.data('slide');
                    TweenMax.set($currentSlide, {clearProps: 'all'});
                    sortSlides();
                    onAnimation = false;
                },
            })
                .to($currentSlide, 1, {
                    x: '-100%',
                });
        }

        function prevSlide() {
            new TimelineMax({
                onStart() {
                    $prevSlide.addClass('is-before-current');
                    onAnimation = true;
                    $currentPuginationItem.removeClass('is-active');
                },
                onComplete() {
                    $currentSlide.removeClass('is-current');
                    $prevSlide.removeClass('is-prev is-before-current').addClass('is-current');
                    $nextSlide.removeClass('is-next');
                    currentSlideIndex = $prevSlide.data('slide');
                    TweenMax.set($currentSlide, {clearProps: 'all'});
                    sortSlides();
                    onAnimation = false;
                },
            })
                .to($currentSlide, 1, {
                    x: '100%',
                });
        }

        $galleryNavPrev.on('click', () => {
            if (!onAnimation) {
                prevSlide();
            }
        });

        $galleryNavNext.on('click', () => {
            if (!onAnimation) {
                nextSlide();
            }
        });

        $(document).on('mousemove', (e) => {
            if (innerWidth > 1024) {
                if (
                    e.pageX > $gallery.offset().left &&
                    e.pageX < $gallery.offset().left + $galleryNavPrev.width() &&
                    e.pageY > $gallery.offset().top &&
                    e.pageY < $gallery.offset().top + $gallery.height()
                ) {
                    if (
                        e.pageX > $gallery.offset().left + $galleryNavPrevArrow.width() / 2 &&
                        e.pageX < $gallery.offset().left + $galleryNavPrev.width() - $galleryNavPrevArrow.width() / 2
                    ) {
                        $galleryNavPrevArrow.css({
                            left: e.pageX - $gallery.offset().left,
                        });
                    } else if (e.pageX > $gallery.offset().left + $galleryNavPrevArrow.width() / 2) {
                        $galleryNavPrevArrow.css({
                            left: $galleryNavNext.width() - $galleryNavPrevArrow.width() / 2,
                        });
                    } else if (
                        e.pageX < $gallery.offset().left + $galleryNavPrev.width() - $galleryNavPrevArrow.width() / 2
                    ) {
                        $galleryNavPrevArrow.css({
                            left: 0 + $galleryNavPrevArrow.width() / 2,
                        });
                    }

                    if (
                        e.pageY > $gallery.offset().top + $galleryNavPrevArrow.height() / 2 &&
                        e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavPrevArrow.height() / 2
                    ) {
                        $galleryNavPrevArrow.css({
                            top: e.pageY - $gallery.offset().top,
                        });
                    } else if (e.pageY > $gallery.offset().top + $galleryNavPrevArrow.height() / 2) {
                        $galleryNavPrevArrow.css({
                            top: $gallery.height() - $galleryNavPrevArrow.height() / 2,
                        });
                    } else if (
                        e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavPrevArrow.height() / 2
                    ) {
                        $galleryNavPrevArrow.css({
                            top: 0 + $galleryNavPrevArrow.height() / 2,
                        });
                    }

                    if (!$galleryNavPrevArrow.hasClass('is-active')) {
                        $galleryNavPrevArrow.addClass('is-active');
                    }
                } else {
                    $galleryNavPrevArrow.removeClass('is-active');
                }

                if (
                    e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() &&
                    e.pageX < $gallery.offset().left + $gallery.width() &&
                    e.pageY > $gallery.offset().top &&
                    e.pageY < $gallery.offset().top + $gallery.height()
                ) {
                    if (
                        e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() +
                        $galleryNavNextArrow.width() / 2 &&
                        e.pageX < $gallery.offset().left + $gallery.width() - $galleryNavNextArrow.width() / 2
                    ) {
                        $galleryNavNextArrow.css({
                            left: e.pageX - $gallery.offset().left - $gallery.width() + $galleryNavNext.width(),
                        });
                    } else if (
                        e.pageX > $gallery.offset().left + $gallery.width() - $galleryNavNext.width() +
                        $galleryNavNextArrow.width() / 2
                    ) {
                        $galleryNavNextArrow.css({
                            left: $galleryNavNext.width() - $galleryNavNextArrow.width() / 2,
                        });
                    } else if (
                        e.pageX < $gallery.offset().left + $gallery.width() - $galleryNavNextArrow.width() / 2
                    ) {
                        $galleryNavNextArrow.css({
                            left: 0 + $galleryNavNextArrow.width() / 2,
                        });
                    }

                    if (
                        e.pageY > $gallery.offset().top + $galleryNavNextArrow.height() / 2 &&
                        e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavNextArrow.height() / 2
                        - $pagination.height()
                    ) {
                        $galleryNavNextArrow.css({
                            top: e.pageY - $gallery.offset().top,
                        });
                    } else if (e.pageY > $gallery.offset().top + $galleryNavNextArrow.height() / 2) {
                        $galleryNavNextArrow.css({
                            top: $gallery.height() - $galleryNavNextArrow.height() / 2 - $pagination.height(),
                        });
                    } else if (
                        e.pageY < $gallery.offset().top + $gallery.height() - $galleryNavNextArrow.height() / 2
                    ) {
                        $galleryNavNextArrow.css({
                            top: 0 + $galleryNavNextArrow.height() / 2,
                        });
                    }

                    if (!$galleryNavNextArrow.hasClass('is-active')) {
                        $galleryNavNextArrow.addClass('is-active');
                    }
                } else {
                    $galleryNavNextArrow.removeClass('is-active');
                }
            }
        });
    });
}

initGallery();