/**
 * News Carousel JavaScript
 * Handles news carousel and hero image rotation
 */

(function($) {
    'use strict';
    
    $(document).ready(function() {
        const newsCarousel = {
            init: function() {
                this.bindEvents();
                this.startHeroRotation();
                this.initNewsFlow();
            },
            
            bindEvents: function() {
                // News hero image rotation
                this.initHeroRotation();
            },
            
            startHeroRotation: function() {
                const $heroImage = $('#news-hero-image');
                const $heroCaption = $('#news-hero-caption');
                
                if ($heroImage.length === 0) return;
                
                const titles = $heroImage.data('titles') || [];
                if (titles.length === 0) return;
                
                this.currentImageIndex = 0;
                this.images = [
                    'n1.jpg', 'n2.jpg', 'n3.jpg', 'n4.jpg', 'n5.jpg',
                    'n6.jpg', 'n7.jpg', 'n8.jpg', 'n9.jpg', 'n10.jpg',
                    'n11.jpg', 'n12.jpg'
                ];
                
                this.rotateHeroImage();
            },
            
            rotateHeroImage: function() {
                const $heroImage = $('#news-hero-image');
                const $heroCaption = $('#news-hero-caption');
                const titles = $heroImage.data('titles') || [];
                
                if (titles.length === 0) return;
                
                const imageIndex = this.currentImageIndex % this.images.length;
                const titleIndex = this.currentImageIndex % titles.length;
                
                // Update image
                $heroImage.attr('src', nihongo_ajax.theme_url + '/assets/img/' + this.images[imageIndex]);
                
                // Update caption
                $heroCaption.text(titles[titleIndex]);
                
                this.currentImageIndex++;
                
                // Continue rotation
                setTimeout(() => {
                    this.rotateHeroImage();
                }, 3000);
            },
            
            initNewsFlow: function() {
                const $flowTrack = $('.flow-cards-track');
                if ($flowTrack.length === 0) return;
                
                this.initFlowAnimation($flowTrack);
            },
            
            initFlowAnimation: function($track) {
                const $cards = $track.find('.flow-card');
                const cardWidth = $cards.first().outerWidth(true);
                const trackWidth = $cards.length * cardWidth;
                
                // Duplicate cards for seamless loop
                $cards.clone().appendTo($track);
                
                let position = 0;
                const speed = 1; // pixels per frame
                
                const animate = () => {
                    position -= speed;
                    
                    if (position <= -trackWidth) {
                        position = 0;
                    }
                    
                    $track.css('transform', `translateX(${position}px)`);
                    requestAnimationFrame(animate);
                };
                
                // Pause on hover
                $track.on('mouseenter', () => {
                    this.isPaused = true;
                });
                
                $track.on('mouseleave', () => {
                    this.isPaused = false;
                });
                
                // Start animation
                this.isPaused = false;
                animate();
            }
        };
        
        // Initialize news carousel
        newsCarousel.init();
    });
    
})(jQuery);
