// fade-pro.js
jQuery(document).ready(function($) {
    $('.rzcps-container').each(function () {
        const container = $(this);
        const marquee = container.find('.rzcps');
        const isVertical = container.hasClass('vertical');
        const isFade = container.hasClass('fade');

        if (!isFade) return;

        const items = marquee.find('.item');
        const speed = parseInt(container.data('speed')) || 50;
        const visible = isVertical ? parseInt(container.data('visible')) || 3 : 1;
        const interval = speed * 20;
        const total = items.length;


        // Calculate and set height dynamically (vertical + fade or vertical + marquee)
        if (isVertical) {
            let tallest = 0;
            items.each(function () {
                tallest = Math.max(tallest, $(this).outerHeight(true));
            });
            items.css('height', tallest + 'px');
            const itemHeight = tallest; 
            marquee.css({
                display: 'flex',
                flexDirection: 'column',
                transition: 'transform 0.5s ease',
                willChange: 'transform',
                height: (isFade ? itemHeight * visible : itemHeight * total) + 'px',
            });

            // Set the container's height
            container.css('height', itemHeight * visible + 'px');
        }else{
            items.css({
                width: '100%',
                flexShrink: 0,
            });
            // Set .rzcps to horizontal row and wide enough to hold all items
            marquee.css({
                display: 'flex',
                flexDirection: 'row',
                width: `${100 * total}%`,
                transition: 'transform 0.5s ease'
            });
        }

        // Fade Mode
        if (isFade) {
            let currentIndex = 0;

            function showItems(index) {
                items.hide();
                for (let i = 0; i < visible; i++) {
                    const idx = (index + i) % total;
                    items.eq(idx).fadeIn();
                }
            }

            showItems(currentIndex);

            let timer = setInterval(() => {
                currentIndex = (currentIndex + visible) % total;
                showItems(currentIndex);
            }, interval);

            container.hover(() => clearInterval(timer), () => {
                timer = setInterval(() => {
                    currentIndex = (currentIndex + visible) % total;
                    showItems(currentIndex);
                }, interval);
            });

            return; // Skip marquee logic
        }

    });
});
