/**
 * TRACK MAP WITH LEAFLET.JS
 * 
 * Basic Leaflet map test
 */

console.log('Track map script loaded2');

// Check if Leaflet is available
if (typeof L === 'undefined') {
    console.error('Leaflet library not loaded!');
} else {
    console.log('Leaflet library is available, version:', L.version);
}

document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM loaded, initializing map...');
    
    const mapElement = document.getElementById('map');
    console.log('Map element:', mapElement);
    
    if (!mapElement) {
        console.error('Map element not found!');
        return;
    }
    
    console.log('Map element dimensions:', mapElement.offsetWidth, 'x', mapElement.offsetHeight);
    
    try {
        // Image dimensions: 2876 x 2035 pixels
        const imageWidth = 2876;
        const imageHeight = 2035;
        
        // Create map with simple CRS (pixel coordinates)
        // Note: Leaflet uses [y, x] format, so bounds are [[0, 0], [height, width]]
        const bounds = [[0, 0], [imageHeight, imageWidth]];
        const map = L.map('map', {
            crs: L.CRS.Simple,
            minZoom: -2,
            maxZoom: 2,
            center: [imageHeight / 2, imageWidth / 2],
            zoom: -1
        });
        console.log('Map object created with CRS.Simple:', map);
        
        // Add aerial image overlay
        const imageUrl = '/assets/images/track-aerial.jpg';
        L.imageOverlay(imageUrl, bounds).addTo(map);
        console.log('Aerial image overlay added');
        
        // Add SVG overlay
        const svgUrl = '/assets/images/track-route.svg';
        L.imageOverlay(svgUrl, bounds, {
            opacity: 0.8,
            interactive: false
        }).addTo(map);
        console.log('SVG route overlay added');
        
        // Fit map to image bounds
        map.fitBounds(bounds);
        
        console.log('Map initialized successfully');
    } catch (error) {
        console.error('Error initializing map:', error);
    }
});