Latest revision as of 20:37, 1 March 2025

/* Any JavaScript here will be loaded for all users on every page load. */

$(document).ready(function() {
    'use strict';
    
    // Main race tab click handler (works for both regular and image buttons)
    $('.tab-navigation .tab-button, .tab-navigation .tab-button-image').click(function(e) {
        e.preventDefault();
        
        var targetId = $(this).data('target');
        
        // Update main race tabs (for both button types)
        $('.tab-navigation .tab-button, .tab-navigation .tab-button-image').removeClass('active');
        $(this).addClass('active');
        
        // Update main content panes
        $('.tab-content > .tab-pane').removeClass('active');
        $('#' + targetId).addClass('active');
        
        // Always activate the overview tab for the selected race
        var $subNav = $('#' + targetId + ' .sub-tab-navigation');
        var $overviewTab;
        
        // Check if using image tabs or regular tabs
        if ($subNav.find('.tab-button-image').length) {
            $overviewTab = $subNav.find('.tab-button-image').first();
        } else {
            $overviewTab = $subNav.find('.tab-button').first();
        }
        
        var overviewTargetId = $overviewTab.data('target');
        
        // Set overview tab and content as active
        $subNav.find('.tab-button, .tab-button-image').removeClass('active');
        $overviewTab.addClass('active');
        
        $subNav.find('.tab-content .tab-pane').removeClass('active');
        $('#' + overviewTargetId).addClass('active');
    });
    
    // Create collapsible sections
    $('.collapsible-header').click(function() {
        $(this).toggleClass('collapsed');
        $(this).next('.collapsible-content').slideToggle(300);
        
        // Toggle the icon
        var $icon = $(this).find('.collapse-icon');
        if ($icon.text() === '▼') {
            $icon.text('►');
        } else {
            $icon.text('▼');
        }
    });
    
    // Initialize all sections as expanded
    $('.collapsible-header').each(function() {
        $(this).find('.collapse-icon').text('▼');
    });
    
    // Sub-class tab click handler (works for both regular and image buttons)
    $('.sub-tab-navigation .tab-button, .sub-tab-navigation .tab-button-image').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var $this = $(this);
        var $subNav = $this.closest('.sub-tab-navigation');
        var targetId = $this.data('target');
        
        // Only update the buttons in this sub-tab navigation
        $subNav.find('.tab-button, .tab-button-image').removeClass('active');
        $this.addClass('active');
        
        // Find and update only the content panes within this sub-tab section
        $subNav.find('.tab-content .tab-pane').removeClass('active');
        $('#' + targetId).addClass('active');
        
        // Keep the parent tab-pane active
        $this.closest('.tab-pane').addClass('active');
    });
    
    // Initial setup
    function initializeTabs() {
        // Set first race tab active if none are
        var $mainNav = $('.tab-navigation');
        if (!$mainNav.find('.tab-button.active, .tab-button-image.active').length) {
            if ($mainNav.find('.tab-button-image').length) {
                var $firstMainTab = $mainNav.find('.tab-button-image').first();
                $firstMainTab.addClass('active');
            } else {
                var $firstMainTab = $mainNav.find('.tab-button').first();
                $firstMainTab.addClass('active');
            }
            
            var mainTargetId = $firstMainTab.data('target');
            $('#' + mainTargetId).addClass('active');
            
            // Set its overview tab active
            var $subNav = $('#' + mainTargetId + ' .sub-tab-navigation');
            var $overviewTab;
            
            // Check if using image tabs or regular tabs
            if ($subNav.find('.tab-button-image').length) {
                $overviewTab = $subNav.find('.tab-button-image').first();
            } else {
                $overviewTab = $subNav.find('.tab-button').first();
            }
            
            $overviewTab.addClass('active');
            $('#' + $overviewTab.data('target')).addClass('active');
        }
        
        // For each race tab that's active
        $('.tab-navigation .tab-button.active, .tab-navigation .tab-button-image.active').each(function() {
            var mainTargetId = $(this).data('target');
            var $mainContent = $('#' + mainTargetId);
            
            // Ensure overview tab is active if no sub-tab is active
            var $subNav = $mainContent.find('.sub-tab-navigation');
            if ($subNav.length && !$subNav.find('.tab-button.active, .tab-button-image.active').length) {
                var $overviewTab;
                
                // Check if using image tabs or regular tabs
                if ($subNav.find('.tab-button-image').length) {
                    $overviewTab = $subNav.find('.tab-button-image').first();
                } else {
                    $overviewTab = $subNav.find('.tab-button').first();
                }
                
                $overviewTab.addClass('active');
                $('#' + $overviewTab.data('target')).addClass('active');
            }
        });
    }
    
    // Run initial setup
    initializeTabs();
    
    // Add animation effect when switching tabs
    $('.tab-button, .tab-button-image').click(function() {
        $('.tab-pane.active').css('animation', 'tabFadeIn 0.3s');
        setTimeout(function() {
            $('.tab-pane.active').css('animation', '');
        }, 300);
    });
    
    // Add image button hover effect
    $('.tab-button-image').hover(function() {
        if (!$(this).hasClass('active')) {
            $(this).find('img').css('opacity', '0.8');
        }
    }, function() {
        $(this).find('img').css('opacity', '1');
    });
    
    // Add map tooltips
    $('span.material-button a').each(function() {
        var href = $(this).attr('href');
        if (href && href.indexOf('world-map') !== -1) {
            $(this).parent().attr('title', 'Click to view location on map');
            $(this).prepend('<span class="map-icon">🗺️ </span>');
        }
    });
    
    // Enhanced Image Previews
    $('.thumbimage').hover(function() {
        $(this).css({
            'transform': 'scale(1.05)',
            'transition': 'transform 0.3s ease',
            'box-shadow': '0 8px 16px rgba(0,0,0,0.2)'
        });
    }, function() {
        $(this).css({
            'transform': '',
            'box-shadow': ''
        });
    });
    
    // Mobile Experience Optimization
    if (window.matchMedia("only screen and (max-width: 768px)").matches) {
        // Make tab navigation scrollable
        $('.tab-nav').css({
            'overflow-x': 'auto',
            'white-space': 'nowrap',
            '-webkit-overflow-scrolling': 'touch'
        });
        
        // Ensure tab buttons don't wrap
        $('.tab-button, .tab-button-image').css({
            'display': 'inline-block',
            'float': 'none'
        });
        
        // Adjust image button sizes for mobile
        $('.tab-button-image').css({
            'width': '100px',
            'height': '70px'
        });
        
        // Touch-friendly image previews
        $('.thumbimage, .tab-button-image').on('touchstart', function() {
            var $this = $(this);
            $this.css({
                'transform': 'scale(1.05)',
                'transition': 'transform 0.3s ease',
                'box-shadow': '0 8px 16px rgba(0,0,0,0.2)'
            });
            
            setTimeout(function() {
                $this.css({
                    'transform': '',
                    'box-shadow': ''
                });
            }, 1000);
        });
    }
    
    // Add preload for tab images to prevent flickering on first load
    function preloadTabImages() {
        $('.tab-button-image img').each(function() {
            var img = new Image();
            img.src = $(this).attr('src');
        });
    }
    
    // Run preload
    preloadTabImages();
});