script.js

// Shipping Container Tracker - Main Application
class ContainerTracker {
    constructor() {
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        this.globe = null;
        this.ship = null;
        this.shipMarker = null;
        this.isPlaying = true;
        this.currentJourneyIndex = 0;
        this.journeyData = null;
        this.milestones = [];
        this.currentMilestone = 0;
        this.currentMode = 'globe';
        this.textures = {};
        this.flatMapMesh = null;
        this.followShip = false; // Whether to automatically follow ship position
        
        // Leaflet (2D map) state
        this.leafletMap = null;
        this.leafletMarker = null;
        this.leafletRoute = null;
        this.leafletStartMarker = null;
        this.leafletEndMarker = null;
        // Shared current position
        this.currentPosition = null;
        // WorldWind state (globe only)
        this.wwd = null;

        // High-quality texture URLs (fallback to procedural if unavailable)
        this.textureUrls = {
            earth: 'https://raw.githubusercontent.com/fernandojsg/threejs-360-earth/master/img/2_no_clouds_4k.jpg',
            bump: 'https://raw.githubusercontent.com/fernandojsg/threejs-360-earth/master/img/elev_bump_4k.jpg',
            specular: 'https://raw.githubusercontent.com/fernandojsg/threejs-360-earth/master/img/water_4k.png',
            clouds: 'https://raw.githubusercontent.com/fernandojsg/threejs-360-earth/master/img/fair_clouds_4k.png',
            stars: 'https://raw.githubusercontent.com/fernandojsg/threejs-360-earth/master/img/galaxy_starfield.png'
        };
        
        this.init();
    }
    initWorldWind() {
        console.log('Initializing WorldWind...');
        if (!window.WorldWind) {
            console.error('WorldWind library not loaded');
            return;
        }
        
        const canvasId = 'ww-canvas';
        const canvas = document.getElementById(canvasId);
        if (!canvas) {
            console.error('WorldWind canvas not found:', canvasId);
            return;
        }
        
        console.log('Canvas found, creating WorldWindow...');
        try {
            this.wwd = new WorldWind.WorldWindow(canvasId);
            console.log('WorldWindow created successfully');
            
            // Ensure canvas is properly sized
            const container = canvas.parentElement;
            if (container) {
                canvas.width = container.clientWidth;
                canvas.height = container.clientHeight;
                console.log('Canvas sized:', canvas.width, 'x', canvas.height);
            }
            
            // Set up proper navigation controls
            this.wwd.navigator.range = 20000000; // 20,000km altitude for good overview
            this.wwd.navigator.tilt = 0; // Start with no tilt
            this.wwd.navigator.heading = 0; // Start with no rotation
            console.log('Navigation controls set');
            
        } catch (e) { 
            console.error('Failed to initialize WorldWind:', e);
            return; 
        }

        // Use basic layers first to test
        console.log('Adding basic layers...');
        try {
            // Add basic Blue Marble layer first
            const bmngLayer = new WorldWind.BMNGLayer();
            this.wwd.addLayer(bmngLayer);
            console.log('Added BMNG layer');
            
            // Add controls
            const compassLayer = new WorldWind.CompassLayer();
            this.wwd.addLayer(compassLayer);
            console.log('Added Compass layer');
            
            const viewControlsLayer = new WorldWind.ViewControlsLayer(this.wwd);
            this.wwd.addLayer(viewControlsLayer);
            console.log('Added ViewControls layer');
            
        } catch (e) {
            console.error('Error adding layers:', e);
        }

        // Add ship layer for WorldWind
        console.log('Creating ship layer...');
        this.wwShipLayer = new WorldWind.RenderableLayer("Ship");
        this.wwd.addLayer(this.wwShipLayer);

        // Create ship placemark
        const shipAttributes = new WorldWind.PlacemarkAttributes(null);
        shipAttributes.imageSource = "data:image/svg+xml;base64," + btoa('<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="#ff6b35" d="M2 13h2l2 3h8l2-3h2l-2 5H4z"/><path fill="#ffffff" d="M7 12h2v-2H7zm3 0h2V9h-2zm3 0h2V8h-2z"/></svg>');
        shipAttributes.imageScale = 1.5;
        shipAttributes.imageOffset = new WorldWind.Offset(WorldWind.OFFSET_FRACTION, 0.5, WorldWind.OFFSET_FRACTION, 0.5);

        const start = this.currentPosition || this.journeyData.currentPosition || {lat: 0, lng: 0};
        this.wwShip = new WorldWind.Placemark(new WorldWind.Position(start.lat, start.lng, 0), true, shipAttributes);
        this.wwShip.label = "MV Ocean Explorer";
        this.wwShipLayer.addRenderable(this.wwShip);
        console.log('Ship placemark created at:', start.lat, start.lng);

        // Create ship trail
        this.wwTrail = new WorldWind.Path([]);
        this.wwTrail.altitudeMode = WorldWind.CLAMP_TO_GROUND;
        this.wwTrail.attributes = new WorldWind.ShapeAttributes(null);
        this.wwTrail.attributes.outlineColor = WorldWind.Color.CYAN;
        this.wwTrail.attributes.outlineWidth = 3;
        this.wwTrail.attributes.drawOutline = true;
        this.wwTrail.attributes.drawInterior = false;
        this.wwShipLayer.addRenderable(this.wwTrail);

        // Set initial view to show the whole Earth (no automatic ship following)
        console.log('Setting initial view to show whole Earth...');
        // Don't automatically fly to ship position - let user explore freely
        
        // Add a simple test shape to see if WorldWind is working
        console.log('Adding test shape...');
        try {
            const testShape = new WorldWind.SurfaceCircle(
                new WorldWind.Location(0, 0), // Center of Earth
                1000000 // 1000km radius
            );
            testShape.attributes = new WorldWind.ShapeAttributes(null);
            testShape.attributes.outlineColor = WorldWind.Color.RED;
            testShape.attributes.outlineWidth = 5;
            testShape.attributes.drawOutline = true;
            testShape.attributes.drawInterior = false;
            this.wwShipLayer.addRenderable(testShape);
            console.log('Test shape added');
        } catch (e) {
            console.error('Error adding test shape:', e);
        }
        
        // Force a redraw
        console.log('Forcing redraw...');
        this.wwd.redraw();

        // Handle window resize for WorldWind
        window.addEventListener('resize', () => {
            if (this.wwd && document.getElementById('ww-canvas').style.display !== 'none') {
                const canvas = document.getElementById('ww-canvas');
                const container = canvas.parentElement;
                if (container) {
                    canvas.width = container.clientWidth;
                    canvas.height = container.clientHeight;
                }
                this.wwd.redraw();
            }
        });
    }

    async init() {
        await this.loadJourneyData();
        this.setupEventListeners();
        this.setupUI();
        
        // Initialize WorldWind first as the primary globe
        this.initWorldWind();
        
        // Initialize Three.js but keep it hidden
        await this.loadTextures();
        this.setupThreeJS();
        this.createGlobe();
        this.createShip();
        
        // Show WorldWind globe by default
        this.showGlobeMode();
        this.hideLoadingScreen();
        this.startJourney();
    }

    async loadJourneyData() {
        // Simulated journey data - in a real app, this would come from maritime APIs
        this.journeyData = {
            ship: {
                name: "MV Ocean Explorer",
                imo: "9876543",
                type: "Container Ship",
                length: "366m",
                width: "51m"
            },
            route: [
                { lat: 35.6228, lng: 139.7710, name: "Tokyo Port (Oi)", time: "2024-01-01T00:00:00Z", milestone: "Departure" },
                { lat: 35.0951, lng: 129.0390, name: "Busan Port", time: "2024-01-02T12:00:00Z", milestone: "First Stop" },
                { lat: 22.3035, lng: 114.1809, name: "Hong Kong Port", time: "2024-01-04T08:00:00Z", milestone: "Major Hub" },
                { lat: 1.2644, lng: 103.8400, name: "Singapore Port", time: "2024-01-06T14:00:00Z", milestone: "Southeast Asia" },
                // Sea waypoints to avoid land crossings
                { lat: 2.5, lng: 101.0, name: "Malacca Strait" },
                { lat: 8.5, lng: 95.0, name: "Andaman Sea" },
                { lat: 5.0, lng: 79.0, name: "South of Sri Lanka" },
                { lat: -15.0, lng: 70.0, name: "Central Indian Ocean" },
                { lat: -28.0, lng: 50.0, name: "SW Indian Ocean" },
                { lat: -36.0, lng: 20.0, name: "Off Cape Agulhas" },
                { lat: -32.0, lng: 10.0, name: "South Atlantic" },
                { lat: -22.0, lng: 5.0, name: "Off Namibia" },
                { lat: 0.0, lng: 0.0, name: "Gulf of Guinea" },
                { lat: 10.0, lng: -10.0, name: "Off West Africa" },
                { lat: 46.0, lng: -6.0, name: "Bay of Biscay" },
                { lat: 50.5, lng: 0.0, name: "English Channel" },
                { lat: 51.4631, lng: 0.3336, name: "Port of Tilbury (London)", time: "2024-01-22T12:00:00Z", milestone: "Final Destination" }
            ],
            currentPosition: { lat: 35.6762, lng: 139.6503 },
            speed: 18.5,
            course: 180,
            eta: "2024-01-22T12:00:00Z"
        };

        this.milestones = this.journeyData.route.filter(point => point.milestone);
    }

    async loadTextures() {
        const loader = new THREE.TextureLoader();
        try {
            const [earth, bump, specular, clouds, stars] = await Promise.all([
                loader.loadAsync(this.textureUrls.earth),
                loader.loadAsync(this.textureUrls.bump),
                loader.loadAsync(this.textureUrls.specular),
                loader.loadAsync(this.textureUrls.clouds),
                loader.loadAsync(this.textureUrls.stars)
            ]);

            this.textures.earth = earth;
            this.textures.bump = bump;
            this.textures.specular = specular;
            this.textures.clouds = clouds;
            this.textures.stars = stars;

            // Improve sampling
            [earth, bump, specular, clouds, stars].forEach(t => {
                t.anisotropy = 8;
            });
        } catch (e) {
            // Fallback to procedural textures if CDN fails
            this.textures.earth = this.createEarthTexture();
            this.textures.clouds = this.createCloudTexture();
            this.textures.night = this.createNightTexture();
            this.textures.bump = this.createBumpTexture();
        }
    }

    createEarthTexture() {
        const canvas = document.createElement('canvas');
        canvas.width = 1024;
        canvas.height = 512;
        const ctx = canvas.getContext('2d');
        
        // Create a simple Earth-like texture with continents
        const gradient = ctx.createLinearGradient(0, 0, 0, 512);
        gradient.addColorStop(0, '#87CEEB'); // Sky blue
        gradient.addColorStop(0.3, '#4682B4'); // Steel blue
        gradient.addColorStop(0.7, '#4682B4'); // Steel blue
        gradient.addColorStop(1, '#191970'); // Midnight blue
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 1024, 512);
        
        // Add continents
        ctx.fillStyle = '#228B22'; // Forest green
        this.drawContinent(ctx, 200, 100, 150, 80, 'North America');
        this.drawContinent(ctx, 400, 200, 120, 100, 'Europe');
        this.drawContinent(ctx, 600, 150, 100, 90, 'Asia');
        this.drawContinent(ctx, 300, 300, 180, 120, 'Africa');
        this.drawContinent(ctx, 700, 350, 150, 100, 'Australia');
        this.drawContinent(ctx, 150, 400, 200, 80, 'South America');
        
        const texture = new THREE.CanvasTexture(canvas);
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.ClampToEdgeWrapping;
        return texture;
    }

    drawContinent(ctx, x, y, width, height, name) {
        ctx.beginPath();
        ctx.ellipse(x, y, width/2, height/2, 0, 0, 2 * Math.PI);
        ctx.fill();
        
        // Add some variation
        ctx.fillStyle = '#32CD32'; // Lime green
        ctx.beginPath();
        ctx.ellipse(x + width/4, y - height/4, width/4, height/4, 0, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.fillStyle = '#228B22'; // Reset to forest green
    }

    createCloudTexture() {
        const canvas = document.createElement('canvas');
        canvas.width = 1024;
        canvas.height = 512;
        const ctx = canvas.getContext('2d');
        
        // Create cloud pattern
        ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
        for (let i = 0; i < 50; i++) {
            const x = Math.random() * 1024;
            const y = Math.random() * 512;
            const size = Math.random() * 100 + 50;
            
            ctx.beginPath();
            ctx.arc(x, y, size, 0, 2 * Math.PI);
            ctx.fill();
        }
        
        const texture = new THREE.CanvasTexture(canvas);
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.ClampToEdgeWrapping;
        return texture;
    }

    createNightTexture() {
        const canvas = document.createElement('canvas');
        canvas.width = 1024;
        canvas.height = 512;
        const ctx = canvas.getContext('2d');
        
        // Dark background
        ctx.fillStyle = '#000011';
        ctx.fillRect(0, 0, 1024, 512);
        
        // Add city lights
        ctx.fillStyle = '#FFFF00';
        for (let i = 0; i < 200; i++) {
            const x = Math.random() * 1024;
            const y = Math.random() * 512;
            const size = Math.random() * 3 + 1;
            
            ctx.beginPath();
            ctx.arc(x, y, size, 0, 2 * Math.PI);
            ctx.fill();
        }
        
        const texture = new THREE.CanvasTexture(canvas);
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.ClampToEdgeWrapping;
        return texture;
    }

    createBumpTexture() {
        const canvas = document.createElement('canvas');
        canvas.width = 1024;
        canvas.height = 512;
        const ctx = canvas.getContext('2d');
        
        // Create height map
        const gradient = ctx.createLinearGradient(0, 0, 0, 512);
        gradient.addColorStop(0, '#808080');
        gradient.addColorStop(0.5, '#404040');
        gradient.addColorStop(1, '#808080');
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 1024, 512);
        
        // Add mountain ranges
        ctx.fillStyle = '#FFFFFF';
        for (let i = 0; i < 20; i++) {
            const x = Math.random() * 1024;
            const y = Math.random() * 512;
            const width = Math.random() * 200 + 50;
            const height = Math.random() * 20 + 10;
            
            ctx.fillRect(x, y, width, height);
        }
        
        const texture = new THREE.CanvasTexture(canvas);
        texture.wrapS = THREE.RepeatWrapping;
        texture.wrapT = THREE.ClampToEdgeWrapping;
        return texture;
    }

    setupThreeJS() {
        const canvas = document.getElementById('globe-canvas');
        const container = canvas.parentElement;

        // Scene
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0x000011);
        this.scene.fog = new THREE.Fog(0x000011, 2, 8);

        // Camera
        this.camera = new THREE.PerspectiveCamera(
            60,
            container.clientWidth / container.clientHeight,
            0.01,
            1000
        );
        this.camera.position.set(0, 0, 4);

        // Renderer with enhanced settings
        this.renderer = new THREE.WebGLRenderer({ 
            canvas: canvas, 
            antialias: true,
            alpha: true,
            powerPreference: "high-performance"
        });
        const initialWidth = container.clientWidth || container.offsetWidth || window.innerWidth;
        const initialHeight = container.clientHeight || container.offsetHeight || window.innerHeight;
        this.renderer.setSize(initialWidth, initialHeight);
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        this.renderer.toneMappingExposure = 1.2;
        this.renderer.outputEncoding = THREE.sRGBEncoding;

        // Enhanced Controls
        this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.05;
        this.controls.enableZoom = true;
        this.controls.enablePan = false;
        this.controls.minDistance = 1.8;
        this.controls.maxDistance = 8;
        this.controls.maxPolarAngle = Math.PI * 0.8;
        this.controls.autoRotate = true;
        this.controls.autoRotateSpeed = 0.5;

        // Advanced Lighting Setup
        this.setupAdvancedLighting();

        // Handle window resize
        window.addEventListener('resize', () => this.onWindowResize());
    }

    setupAdvancedLighting() {
        // Ambient light for overall illumination
        const ambientLight = new THREE.AmbientLight(0x404080, 0.3);
        this.scene.add(ambientLight);

        // Main directional light (sun)
        const sunLight = new THREE.DirectionalLight(0xffffff, 1.5);
        sunLight.position.set(10, 10, 5);
        sunLight.castShadow = true;
        sunLight.shadow.mapSize.width = 2048;
        sunLight.shadow.mapSize.height = 2048;
        sunLight.shadow.camera.near = 0.5;
        sunLight.shadow.camera.far = 50;
        sunLight.shadow.camera.left = -10;
        sunLight.shadow.camera.right = 10;
        sunLight.shadow.camera.top = 10;
        sunLight.shadow.camera.bottom = -10;
        this.scene.add(sunLight);

        // Rim light for atmosphere
        const rimLight = new THREE.DirectionalLight(0x00bcd4, 0.8);
        rimLight.position.set(-5, 0, -5);
        this.scene.add(rimLight);

        // Point light for ship illumination
        this.shipLight = new THREE.PointLight(0x00bcd4, 2, 3);
        this.shipLight.position.set(0, 0, 1.02);
        this.scene.add(this.shipLight);

        // Hemisphere light for natural sky/ground lighting
        const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x362d1d, 0.4);
        this.scene.add(hemisphereLight);
    }

    createGlobe() {
        // Create Earth geometry with higher detail
        const geometry = new THREE.SphereGeometry(1, 128, 128);
        
        // Create advanced Earth material with high-quality textures
        const material = new THREE.MeshPhongMaterial({
            map: this.textures.earth,
            bumpMap: this.textures.bump,
            bumpScale: 0.04,
            specularMap: this.textures.specular,
            specular: new THREE.Color(0x333333),
            shininess: 25
        });

        this.globe = new THREE.Mesh(geometry, material);
        this.globe.receiveShadow = true;
        this.globe.castShadow = true;
        this.scene.add(this.globe);

        // Add multiple atmosphere layers for depth
        this.createAtmosphereLayers();
        
        // Add ocean shimmer ring (subtle)
        this.createOceanWaves();
        
        // Add clouds layer with texture
        this.createClouds();
        
        // Add skydome starfield
        this.createSkyDome();
        
        // Add orbital rings
        this.createOrbitalRings();
    }

    createAtmosphereLayers() {
        // Outer atmosphere
        const outerAtmosphereGeometry = new THREE.SphereGeometry(1.08, 32, 32);
        const outerAtmosphereMaterial = new THREE.MeshBasicMaterial({
            color: 0x4fc3f7,
            transparent: true,
            opacity: 0.06,
            side: THREE.BackSide,
            blending: THREE.AdditiveBlending,
            depthWrite: false
        });
        const outerAtmosphere = new THREE.Mesh(outerAtmosphereGeometry, outerAtmosphereMaterial);
        this.scene.add(outerAtmosphere);

        // Inner atmosphere
        const innerAtmosphereGeometry = new THREE.SphereGeometry(1.03, 32, 32);
        const innerAtmosphereMaterial = new THREE.MeshBasicMaterial({
            color: 0x00bcd4,
            transparent: true,
            opacity: 0.04,
            side: THREE.BackSide,
            blending: THREE.AdditiveBlending,
            depthWrite: false
        });
        const innerAtmosphere = new THREE.Mesh(innerAtmosphereGeometry, innerAtmosphereMaterial);
        this.scene.add(innerAtmosphere);
    }

    createOceanWaves() {
        const waveGeometry = new THREE.SphereGeometry(1.001, 64, 64);
        const waveMaterial = new THREE.MeshPhongMaterial({
            color: 0x0066cc,
            transparent: true,
            opacity: 0.3,
            side: THREE.FrontSide
        });
        
        this.waveMesh = new THREE.Mesh(waveGeometry, waveMaterial);
        this.scene.add(this.waveMesh);
    }

    createClouds() {
        const cloudGeometry = new THREE.SphereGeometry(1.01, 64, 64);
        const cloudMaterial = new THREE.MeshLambertMaterial({
            map: this.textures.clouds,
            transparent: true,
            opacity: 0.35,
            depthWrite: false
        });
        this.cloudMesh = new THREE.Mesh(cloudGeometry, cloudMaterial);
        this.cloudMesh.renderOrder = 2;
        this.scene.add(this.cloudMesh);
    }

    createOrbitalRings() {
        // Create orbital rings around the globe
        const ringGeometry = new THREE.RingGeometry(1.2, 1.25, 64);
        const ringMaterial = new THREE.MeshBasicMaterial({
            color: 0x00bcd4,
            transparent: true,
            opacity: 0.1,
            side: THREE.DoubleSide
        });
        
        this.orbitalRing = new THREE.Mesh(ringGeometry, ringMaterial);
        this.orbitalRing.rotation.x = Math.PI / 2;
        this.scene.add(this.orbitalRing);
    }

    createSkyDome() {
        if (!this.textures.stars) return;
        const skyGeo = new THREE.SphereGeometry(50, 32, 32);
        const skyMat = new THREE.MeshBasicMaterial({
            map: this.textures.stars,
            side: THREE.BackSide,
            depthWrite: false
        });
        const sky = new THREE.Mesh(skyGeo, skyMat);
        sky.renderOrder = 0;
        this.scene.add(sky);
    }

    createNebula() {
        const nebulaGeometry = new THREE.SphereGeometry(25, 32, 32);
        const nebulaMaterial = new THREE.MeshBasicMaterial({
            color: 0x4400aa,
            transparent: true,
            opacity: 0.02,
            side: THREE.BackSide
        });
        
        const nebula = new THREE.Mesh(nebulaGeometry, nebulaMaterial);
        this.scene.add(nebula);
    }

    createShip() {
        // Create detailed ship model
        this.ship = new THREE.Group();
        
        // Ship hull
        const hullGeometry = new THREE.BoxGeometry(0.03, 0.015, 0.08);
        const hullMaterial = new THREE.MeshPhongMaterial({
            color: 0xff6b35,
            shininess: 150,
            specular: 0x333333
        });
        const hull = new THREE.Mesh(hullGeometry, hullMaterial);
        hull.castShadow = true;
        this.ship.add(hull);

        // Ship deck
        const deckGeometry = new THREE.BoxGeometry(0.025, 0.005, 0.06);
        const deckMaterial = new THREE.MeshPhongMaterial({
            color: 0x2c3e50,
            shininess: 100
        });
        const deck = new THREE.Mesh(deckGeometry, deckMaterial);
        deck.position.y = 0.01;
        this.ship.add(deck);

        // Ship containers (simplified)
        for (let i = 0; i < 3; i++) {
            const containerGeometry = new THREE.BoxGeometry(0.02, 0.02, 0.02);
            const containerMaterial = new THREE.MeshPhongMaterial({
                color: 0x3498db,
                shininess: 80
            });
            const container = new THREE.Mesh(containerGeometry, containerMaterial);
            container.position.set(0, 0.02 + i * 0.025, -0.02 + i * 0.01);
            container.castShadow = true;
            this.ship.add(container);
        }

        // Ship lights
        const lightGeometry = new THREE.SphereGeometry(0.003, 8, 8);
        const lightMaterial = new THREE.MeshBasicMaterial({
            color: 0xffff00,
            emissive: 0xffff00
        });
        
        const portLight = new THREE.Mesh(lightGeometry, lightMaterial);
        portLight.position.set(-0.012, 0.01, 0.03);
        this.ship.add(portLight);
        
        const starboardLight = new THREE.Mesh(lightGeometry, lightMaterial);
        starboardLight.position.set(0.012, 0.01, 0.03);
        this.ship.add(starboardLight);

        this.ship.position.set(0, 0, 1.02);
        this.scene.add(this.ship);

        // Create enhanced ship trail with particles
        this.createShipTrail();
        
        // Create wake effect
        this.createWakeEffect();
    }

    createShipTrail() {
        const trailGeometry = new THREE.BufferGeometry();
        const trailMaterial = new THREE.LineBasicMaterial({
            color: 0x00bcd4,
            transparent: true,
            opacity: 0.8,
            linewidth: 2
        });

        this.shipTrail = new THREE.Line(trailGeometry, trailMaterial);
        this.scene.add(this.shipTrail);

        // Create particle trail
        const particleCount = 50;
        const particleGeometry = new THREE.BufferGeometry();
        const particlePositions = new Float32Array(particleCount * 3);
        const particleColors = new Float32Array(particleCount * 3);
        const particleSizes = new Float32Array(particleCount);

        for (let i = 0; i < particleCount; i++) {
            const i3 = i * 3;
            particlePositions[i3] = 0;
            particlePositions[i3 + 1] = 0;
            particlePositions[i3 + 2] = 0;
            
            particleColors[i3] = 0.0;     // R
            particleColors[i3 + 1] = 0.7; // G
            particleColors[i3 + 2] = 1.0; // B
            
            particleSizes[i] = Math.random() * 0.01 + 0.005;
        }

        particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));
        particleGeometry.setAttribute('color', new THREE.BufferAttribute(particleColors, 3));
        particleGeometry.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1));

        const particleMaterial = new THREE.PointsMaterial({
            size: 0.01,
            transparent: true,
            opacity: 0.6,
            vertexColors: true,
            sizeAttenuation: true
        });

        this.shipParticles = new THREE.Points(particleGeometry, particleMaterial);
        this.scene.add(this.shipParticles);
    }

    createWakeEffect() {
        // Create wake rings behind the ship
        const wakeGeometry = new THREE.RingGeometry(0.01, 0.05, 16);
        const wakeMaterial = new THREE.MeshBasicMaterial({
            color: 0x00bcd4,
            transparent: true,
            opacity: 0.3,
            side: THREE.DoubleSide
        });
        
        this.wakeRing = new THREE.Mesh(wakeGeometry, wakeMaterial);
        this.wakeRing.rotation.x = Math.PI / 2;
        this.scene.add(this.wakeRing);
    }

    setupEventListeners() {
        // Play/Pause button
        document.getElementById('playPauseBtn').addEventListener('click', () => {
            this.togglePlayPause();
        });

        // Reset button
        document.getElementById('resetBtn').addEventListener('click', () => {
            this.resetJourney();
        });

        // Fullscreen button
        document.getElementById('fullscreenBtn').addEventListener('click', () => {
            this.toggleFullscreen();
        });

        // Map mode buttons
        document.querySelectorAll('.mode-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const mode = e.currentTarget.dataset.mode;
                if (mode) this.switchMapMode(mode);
            });
        });

        // Start Live button
        const startLiveBtn = document.getElementById('startLiveBtn');
        if (startLiveBtn) {
            startLiveBtn.addEventListener('click', () => {
                const mmsi = (document.getElementById('mmsiInput')?.value || '').trim();
                this.startLiveStream(mmsi);
            });
        }

        // Globe zoom controls (WorldWind or Three.js fallback)
        const zoomInBtn = document.getElementById('zoomInBtn');
        const zoomOutBtn = document.getElementById('zoomOutBtn');
        if (zoomInBtn && zoomOutBtn) {
            zoomInBtn.addEventListener('click', () => this.zoomGlobe(1));
            zoomOutBtn.addEventListener('click', () => this.zoomGlobe(-1));
        }

        // Follow ship button
        const followShipBtn = document.getElementById('followShipBtn');
        if (followShipBtn) {
            followShipBtn.addEventListener('click', () => {
                this.toggleFollowShip();
            });
        }

        // Modal close
        document.getElementById('closeModal').addEventListener('click', () => {
            this.closeModal();
        });

        // Click outside modal to close
        window.addEventListener('click', (event) => {
            const modal = document.getElementById('milestoneModal');
            if (event.target === modal) {
                this.closeModal();
            }
        });
    }

    zoomGlobe(direction) {
        // If WorldWind is active
        const wwCanvas = document.getElementById('ww-canvas');
        if (wwCanvas && wwCanvas.style.display !== 'none' && this.wwd) {
            const nav = this.wwd.navigator; // has range (zoom) in meters
            const factor = direction > 0 ? 0.7 : 1.3; // zoom in or out
            nav.range = Math.max(100000, Math.min(5e7, nav.range * factor));
            this.wwd.redraw();
            return;
        }
        // Three.js fallback
        const delta = direction > 0 ? -0.3 : 0.3;
        const newZ = THREE.MathUtils.clamp(this.camera.position.z + delta, 1.8, 8);
        this.camera.position.z = newZ;
    }

    toggleFollowShip() {
        this.followShip = !this.followShip;
        const followBtn = document.getElementById('followShipBtn');
        
        if (this.followShip) {
            followBtn.classList.add('active');
            followBtn.title = 'Stop Following Ship';
            // If ship position exists, fly to it
            if (this.currentPosition && this.wwd) {
                const goTo = new WorldWind.GoToAnimator(this.wwd);
                goTo.goTo(new WorldWind.Location(this.currentPosition.lat, this.currentPosition.lng, 1000000));
            }
        } else {
            followBtn.classList.remove('active');
            followBtn.title = 'Follow Ship';
        }
    }

    startLiveStream(mmsi) {
        try {
            if (this.eventSource) {
                this.eventSource.close();
                this.eventSource = null;
            }
        } catch {}

        const url = `/api/ship/stream${mmsi ? `?mmsi=${encodeURIComponent(mmsi)}` : ''}`;
        const es = new EventSource(url);
        this.eventSource = es;

        // If a known MMSI is provided, switch the planned route and rebuild UI
        if (mmsi) {
            this.setRouteForMMSI(mmsi);
            // setRouteForMMSI now handles all the reset logic, just need to update Leaflet
            if (this.leafletMap) {
                this.rebuildLeafletRoute();
                this.updateStartEndMarkers();
            }
        }

        es.onmessage = (ev) => {
            try {
                const data = JSON.parse(ev.data);
                if (data.type === 'position' && typeof data.lat === 'number' && typeof data.lng === 'number') {
                    // Update UI stats
                    if (typeof data.speed === 'number') this.journeyData.speed = data.speed;
                    if (typeof data.course === 'number') this.journeyData.course = data.course;
                    // Move ship to new live position
                    this.updateShipPosition({ lat: data.lat, lng: data.lng });
                }
            } catch {}
        };

        es.onerror = () => {
            // Keep connection attempts minimal; SSE will auto-reconnect.
        };
    }

    // Hardcoded MMSI → route presets (realistic corridors over water)
    setRouteForMMSI(mmsi) {
        const presets = {
            // Hamburg → Gibraltar → Suez → Singapore → Shanghai
            '211331640': [
                { lat: 53.5461, lng: 9.9662, name: 'Hamburg', milestone: 'Journey Begins' },
                { lat: 51.0, lng: 2.0, name: 'North Sea' },
                { lat: 48.7, lng: -4.5, name: 'Off Brest' },
                { lat: 36.0, lng: -5.5, name: 'Strait of Gibraltar', milestone: 'Mediterranean Entry' },
                { lat: 31.2, lng: 32.3, name: 'Port Said (Suez North)' },
                { lat: 29.9, lng: 32.55, name: 'Suez Canal', milestone: 'Canal Transit' },
                { lat: 12.5, lng: 43.2, name: 'Bab-el-Mandeb' },
                { lat: 15.0, lng: 46.0, name: 'Gulf of Aden' },
                { lat: 9.0, lng: 70.0, name: 'Arabian Sea' },
                { lat: 5.0, lng: 90.0, name: 'Bay of Bengal' },
                { lat: 1.26, lng: 103.84, name: 'Singapore', milestone: 'Major Hub' },
                { lat: 10.0, lng: 112.0, name: 'South China Sea' },
                { lat: 22.5, lng: 120.5, name: 'Taiwan Strait' },
                { lat: 31.2304, lng: 121.4737, name: 'Shanghai', milestone: 'Final Destination' }
            ],
            // LA → Panama Canal → Miami → New York (US MMSI range 366-369)
            '366982000': [
                { lat: 33.7329, lng: -118.2710, name: 'Port of LA', milestone: 'Journey Begins' },
                { lat: 25.0, lng: -112.0, name: 'Off Baja' },
                { lat: 8.95, lng: -79.55, name: 'Panama Canal (Pacific)' },
                { lat: 9.35, lng: -79.9, name: 'Panama Canal (Atlantic)', milestone: 'Canal Transit' },
                { lat: 20.0, lng: -78.0, name: 'Caribbean Sea' },
                { lat: 25.7781, lng: -80.1794, name: 'PortMiami', milestone: 'Major Hub' },
                { lat: 31.0, lng: -76.0, name: 'Off Carolinas' },
                { lat: 40.6711, lng: -74.0456, name: 'Port of NY/NJ', milestone: 'Final Destination' }
            ],
            // Default (Tokyo → Busan → Hong Kong → Singapore → Cape → London)
            'DEFAULT': [
                { lat: 35.6228, lng: 139.7710, name: 'Tokyo Port (Oi)', milestone: 'Journey Begins' },
                { lat: 35.0951, lng: 129.0390, name: 'Busan Port', milestone: 'First Stop' },
                { lat: 22.3035, lng: 114.1809, name: 'Hong Kong Port', milestone: 'Major Hub' },
                { lat: 1.2644, lng: 103.8400, name: 'Singapore Port', milestone: 'Southeast Gateway' },
                { lat: -15.0, lng: 70.0, name: 'Central Indian Ocean' },
                { lat: -36.0, lng: 20.0, name: 'Off Cape Agulhas', milestone: 'Rounding Africa' },
                { lat: -32.0, lng: 10.0, name: 'South Atlantic' },
                { lat: -22.0, lng: 5.0, name: 'Off Namibia' },
                { lat: 0.0, lng: 0.0, name: 'Gulf of Guinea' },
                { lat: 10.0, lng: -10.0, name: 'Off West Africa' },
                { lat: 46.0, lng: -6.0, name: 'Bay of Biscay' },
                { lat: 50.5, lng: 0.0, name: 'English Channel' },
                { lat: 51.4631, lng: 0.3336, name: 'Port of Tilbury (London)', milestone: 'Final Destination' }
            ]
        };
        const route = presets[mmsi] || presets['DEFAULT'];
        if (route && route.length) {
            // Update the route
            this.journeyData.route = route;
            this.journeyData.ship.mmsi = mmsi;
            
            // Reset journey to the beginning of the new route
            this.currentJourneyIndex = 0;
            this.isPlaying = true;
            
            // Move ship to the start of the new route
            const startPoint = route[0];
            this.currentPosition = startPoint;
            this.updateShipPosition(startPoint);
            
            // Update UI elements
            this.updateProgress(0);
            this.createTimeline();
            this.updateTimeline();
            
            // Update play button
            document.getElementById('playPauseBtn').textContent = '⏸️ Pause';
            
            // Start the journey from the beginning
            this.startShipMovement();
        }
    }

    rebuildLeafletRoute() {
        if (!this.leafletMap) return;
        if (this.leafletRoute) {
            try { this.leafletMap.removeLayer(this.leafletRoute); } catch (_) {}
            this.leafletRoute = null;
        }
        const route = this.journeyData?.route || [];
        const densify = (a, b, steps = 96) => {
            const pts = [];
            for (let i = 0; i <= steps; i++) {
                const t = i / steps;
                const lat = a.lat + (b.lat - a.lat) * t;
                const lng = a.lng + (b.lng - a.lng) * t;
                pts.push([lat, lng]);
            }
            return pts;
        };
        let latlngs = [];
        for (let i = 0; i < route.length - 1; i++) {
            latlngs = latlngs.concat(densify(route[i], route[i + 1]));
        }
        if (window.L && L.polyline && window.antPath) {
            this.leafletRoute = window.antPath(latlngs, {
                paused: false,
                reverse: false,
                delay: 1200,
                dashArray: [15, 25],
                weight: 4,
                color: '#00bcd4',
                pulseColor: '#4fc3f7',
                opacity: 0.9
            }).addTo(this.leafletMap);
        } else {
            this.leafletRoute = L.polyline(latlngs, { color: '#00bcd4', weight: 4, opacity: 0.9 }).addTo(this.leafletMap);
        }
        if (latlngs.length) this.leafletMap.fitBounds(this.leafletRoute.getBounds(), { padding: [30, 30] });
    }

    setupUI() {
        // Update ship info
        document.getElementById('shipName').textContent = this.journeyData.ship.name;
        
        // Create timeline
        this.createTimeline();
        
        // Update initial position
        this.updateShipPosition(this.journeyData.currentPosition);
    }

    createTimeline() {
        const timeline = document.getElementById('timeline');
        timeline.innerHTML = '';

        this.journeyData.route.forEach((point, index) => {
            const timelineItem = document.createElement('div');
            timelineItem.className = 'timeline-item';
            if (index === 0) timelineItem.classList.add('current');
            
            timelineItem.innerHTML = `
                <div class="timeline-content">
                    <div class="timeline-title">${point.milestone || point.name}</div>
                    <div class="timeline-description">${point.name}</div>
                    <div class="timeline-time">${new Date(point.time).toLocaleDateString()}</div>
                </div>
            `;
            
            timeline.appendChild(timelineItem);
        });
    }

    startJourney() {
        this.animate();
        this.startShipMovement();
    }

    animate() {
        requestAnimationFrame(() => this.animate());

        const time = Date.now() * 0.001;

        // Rotate globe slowly
        if (this.globe) {
            this.globe.rotation.y += 0.001;
        }

        // Animate atmosphere layers
        if (this.waveMesh) {
            this.waveMesh.rotation.y += 0.0005;
            this.waveMesh.rotation.x += 0.0002;
        }

        if (this.cloudMesh) {
            this.cloudMesh.rotation.y += 0.0008;
        }

        // Animate orbital ring
        if (this.orbitalRing) {
            this.orbitalRing.rotation.z += 0.002;
        }

        // Animate stars
        if (this.stars) {
            this.stars.rotation.y += 0.0001;
        }

        // Animate ship
        if (this.ship) {
            this.ship.rotation.y += Math.sin(time * 2) * 0.01;
            this.ship.rotation.x += Math.sin(time * 1.5) * 0.005;
        }

        // Animate ship light
        if (this.shipLight) {
            this.shipLight.intensity = 2 + Math.sin(time * 3) * 0.5;
        }

        // Animate wake effect
        if (this.wakeRing) {
            this.wakeRing.rotation.z += 0.01;
            this.wakeRing.material.opacity = 0.3 + Math.sin(time * 4) * 0.1;
        }

        // Update particle trail
        this.updateParticleTrail();

        // Update controls
        this.controls.update();

        // Render
        // Render only when Three.js is visible
        const cesiumEl = document.getElementById('cesiumContainer');
        const cesiumVisible = cesiumEl && cesiumEl.style.display !== 'none';
        if (!cesiumVisible) {
            this.renderer.render(this.scene, this.camera);
        }
    }

    updateParticleTrail() {
        if (!this.shipParticles || !this.ship) return;

        const positions = this.shipParticles.geometry.attributes.position.array;
        const colors = this.shipParticles.geometry.attributes.color.array;
        
        // Shift particles backward
        for (let i = positions.length - 3; i >= 3; i -= 3) {
            positions[i] = positions[i - 3];
            positions[i + 1] = positions[i - 2];
            positions[i + 2] = positions[i - 1];
            
            // Fade colors
            colors[i] *= 0.95;
            colors[i + 1] *= 0.95;
            colors[i + 2] *= 0.95;
        }
        
        // Add new particle at ship position
        if (this.ship.position) {
            positions[0] = this.ship.position.x;
            positions[1] = this.ship.position.y;
            positions[2] = this.ship.position.z;
            
            colors[0] = 0.0;
            colors[1] = 0.7;
            colors[2] = 1.0;
        }
        
        this.shipParticles.geometry.attributes.position.needsUpdate = true;
        this.shipParticles.geometry.attributes.color.needsUpdate = true;
    }

    startShipMovement() {
        if (!this.isPlaying) return;

        const currentPoint = this.journeyData.route[this.currentJourneyIndex];
        const nextPoint = this.journeyData.route[this.currentJourneyIndex + 1];

        if (nextPoint) {
            this.animateShipToNextPoint(currentPoint, nextPoint);
        } else {
            // Journey complete
            this.completeJourney();
        }
    }

    animateShipToNextPoint(from, to) {
        const duration = 60000; // 60 seconds per segment (slower)
        const startTime = Date.now();
        
        const animate = () => {
            if (!this.isPlaying) return;
            
            const elapsed = Date.now() - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            // Interpolate position
            const lat = from.lat + (to.lat - from.lat) * progress;
            const lng = from.lng + (to.lng - from.lng) * progress;
            
            this.updateShipPosition({ lat, lng });
            
            // Update progress
            const totalProgress = (this.currentJourneyIndex + progress) / (this.journeyData.route.length - 1);
            this.updateProgress(totalProgress);
            
            if (progress < 1) {
                requestAnimationFrame(animate);
            } else {
                // Reached next point
                this.currentJourneyIndex++;
                this.updateTimeline();
                // Milestone alerts disabled
                this.startShipMovement();
            }
        };
        
        animate();
    }

    updateShipPosition(position) {
        this.currentPosition = position;
        if (this.currentMode === 'globe') {
            this.updateGlobeShipPosition(position);
            // Update WorldWind ship
            if (this.wwd && this.wwShip) {
                this.wwShip.position = new WorldWind.Position(position.lat, position.lng, 0);
                // Add to trail
                if (!this.wwTrailPositions) {
                    this.wwTrailPositions = [];
                }
                this.wwTrailPositions.push(new WorldWind.Position(position.lat, position.lng, 0));
                // Keep trail length manageable
                if (this.wwTrailPositions.length > 200) {
                    this.wwTrailPositions.shift();
                }
                // Update trail path
                if (this.wwTrail) {
                    this.wwTrail.positions = this.wwTrailPositions;
                }
                
                // Only follow ship if followShip is enabled
                if (this.followShip) {
                    const goTo = new WorldWind.GoToAnimator(this.wwd);
                    goTo.goTo(new WorldWind.Location(position.lat, position.lng, 1000000));
                }
                
                // Redraw WorldWind
                this.wwd.redraw();
            }
        } else if (this.currentMode === 'flat') {
            this.updateLeafletShipPosition(position);
        }

        // Update ship marker position
        this.updateShipMarker(position);
        
        // Update UI
        this.updateLocationInfo(position);
    }

    updateGlobeShipPosition(position) {
        // Convert lat/lng to 3D coordinates on sphere
        const phi = (90 - position.lat) * (Math.PI / 180);
        const theta = (position.lng + 180) * (Math.PI / 180);
        
        const x = 1.02 * Math.sin(phi) * Math.cos(theta);
        const y = 1.02 * Math.cos(phi);
        const z = 1.02 * Math.sin(phi) * Math.sin(theta);
        
        if (this.ship) {
            this.ship.position.set(x, y, z);
            
            // Make ship face the direction of movement
            const nextPoint = this.journeyData.route[this.currentJourneyIndex + 1];
            if (nextPoint) {
                const nextPhi = (90 - nextPoint.lat) * (Math.PI / 180);
                const nextTheta = (nextPoint.lng + 180) * (Math.PI / 180);
                const nextX = 1.02 * Math.sin(nextPhi) * Math.cos(nextTheta);
                const nextY = 1.02 * Math.cos(nextPhi);
                const nextZ = 1.02 * Math.sin(nextPhi) * Math.sin(nextTheta);
                
                this.ship.lookAt(nextX, nextY, nextZ);
            }
        }

        // Update ship light position
        if (this.shipLight) {
            this.shipLight.position.set(x, y, z);
        }

        // Update wake effect position
        if (this.wakeRing) {
            this.wakeRing.position.set(x, y, z);
        }

        // Update ship trail
        this.updateShipTrail(x, y, z);
    }

    // Leaflet integration
    initLeaflet() {
        if (!window.L) return;
        const leafletEl = document.getElementById('leafletContainer');
        this.leafletMap = L.map(leafletEl, {
            zoomControl: true,
            attributionControl: true
        });

        // Rich basemaps: Esri World Imagery + labels + hillshade via direct tile endpoints
        const esriWorldImagery = L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            maxZoom: 19,
            attribution: 'Tiles &copy; Esri — Source: Esri, Maxar, Earthstar Geographics, and the GIS User Community'
        }).addTo(this.leafletMap);

        // Create a dedicated pane for labels so they stay on top
        this.leafletMap.createPane('labels');
        this.leafletMap.getPane('labels').style.zIndex = 650;
        this.leafletMap.getPane('labels').style.pointerEvents = 'none';
        const esriLabels = L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {
            maxZoom: 19,
            pane: 'labels',
            attribution: 'Labels &copy; Esri'
        }).addTo(this.leafletMap);

        const esriHillshade = L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Elevation/World_Hillshade/MapServer/tile/{z}/{y}/{x}', {
            maxZoom: 19,
            opacity: 0.35,
            attribution: 'Hillshade &copy; Esri'
        });

        // Alternative vector/raster basemap option
        const osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors'
        });

        const baseLayers = { 'Esri Satellite': esriWorldImagery, 'OpenStreetMap': osm };
        const overlays = { 'Labels': esriLabels, 'Terrain (Hillshade)': esriHillshade };
        L.control.layers(baseLayers, overlays, { position: 'topright', collapsed: true }).addTo(this.leafletMap);

        // Densify route for smoother arc over long distances
        const densify = (a, b, steps = 96) => {
            const pts = [];
            for (let i = 0; i <= steps; i++) {
                const t = i / steps;
                const lat = a.lat + (b.lat - a.lat) * t;
                const lng = a.lng + (b.lng - a.lng) * t;
                pts.push([lat, lng]);
            }
            return pts;
        };
        let latlngs = [];
        for (let i = 0; i < this.journeyData.route.length - 1; i++) {
            latlngs = latlngs.concat(densify(this.journeyData.route[i], this.journeyData.route[i+1]));
        }
        // Animated ant-path for a premium look
        if (window.L && L.polyline && window.antPath) {
            this.leafletRoute = window.antPath(latlngs, {
                paused: false,
                reverse: false,
                delay: 1200,
                dashArray: [15, 25],
                weight: 4,
                color: '#00bcd4',
                pulseColor: '#4fc3f7',
                opacity: 0.9
            }).addTo(this.leafletMap);
        } else {
            this.leafletRoute = L.polyline(latlngs, { color: '#00bcd4', weight: 4, opacity: 0.9 }).addTo(this.leafletMap);
        }
        if (latlngs.length) this.leafletMap.fitBounds(this.leafletRoute.getBounds(), { padding: [30, 30] });

        const shipIcon = L.divIcon({ className: 'leaflet-ship-icon', html: '🚢', iconSize: [28, 28], iconAnchor: [14, 14] });
        const start = this.currentPosition || this.journeyData.currentPosition;
        this.leafletMarker = L.marker([start.lat, start.lng], { icon: shipIcon }).addTo(this.leafletMap);

        // Show start and end markers and enable quick jump
        this.updateStartEndMarkers();
    }

    updateLeafletShipPosition(position) {
        if (!this.leafletMap || !this.leafletMarker) return;
        this.leafletMarker.setLatLng([position.lat, position.lng]);
    }

    updateStartEndMarkers() {
        if (!this.leafletMap) return;
        const route = this.journeyData?.route || [];
        if (route.length < 2) return;

        // Remove old markers
        if (this.leafletStartMarker) {
            try { this.leafletMap.removeLayer(this.leafletStartMarker); } catch (_) {}
            this.leafletStartMarker = null;
        }
        if (this.leafletEndMarker) {
            try { this.leafletMap.removeLayer(this.leafletEndMarker); } catch (_) {}
            this.leafletEndMarker = null;
        }

        const start = route[0];
        const end = route[route.length - 1];

        const startIcon = L.divIcon({ className: 'leaflet-start-icon', html: 'S', iconSize: [20, 20], iconAnchor: [10, 10] });
        const endIcon = L.divIcon({ className: 'leaflet-end-icon', html: 'E', iconSize: [20, 20], iconAnchor: [10, 10] });

        this.leafletStartMarker = L.marker([start.lat, start.lng], { icon: startIcon, keyboard: false }).addTo(this.leafletMap);
        this.leafletEndMarker = L.marker([end.lat, end.lng], { icon: endIcon, keyboard: false }).addTo(this.leafletMap);

        // Click to jump ship position
        this.leafletStartMarker.on('click', () => this.updateShipPosition({ lat: start.lat, lng: start.lng }));
        this.leafletEndMarker.on('click', () => this.updateShipPosition({ lat: end.lat, lng: end.lng }));
    }

    updateShipTrail(x, y, z) {
        if (!this.shipTrail) return;

        // Add current position to trail
        if (!this.trailPositions) {
            this.trailPositions = [];
        }

        this.trailPositions.push(new THREE.Vector3(x, y, z));

        // Keep only last 50 positions
        if (this.trailPositions.length > 50) {
            this.trailPositions.shift();
        }

        // Update trail geometry
        const positions = [];
        this.trailPositions.forEach(pos => {
            positions.push(pos.x, pos.y, pos.z);
        });

        this.shipTrail.geometry.setFromPoints(this.trailPositions);
    }

    updateShipMarker(position) {
        const shipMarker = document.getElementById('shipMarker');
        if (shipMarker) {
            // Convert lat/lng to screen coordinates (simplified)
            const x = ((position.lng + 180) / 360) * 100;
            const y = ((90 - position.lat) / 180) * 100;
            
            shipMarker.style.left = `${x}%`;
            shipMarker.style.top = `${y}%`;
        }
    }

    updateLocationInfo(position) {
        document.getElementById('coordinates').textContent = 
            `${position.lat.toFixed(4)}°, ${position.lng.toFixed(4)}°`;
        
        const currentPoint = this.journeyData.route[this.currentJourneyIndex];
        if (currentPoint) {
            document.getElementById('locationName').textContent = currentPoint.name;
        }
        
        // Update ship details
        document.getElementById('shipSpeed').textContent = `${this.journeyData.speed} knots`;
        document.getElementById('shipCourse').textContent = `${this.journeyData.course}°`;
        
        const eta = new Date(this.journeyData.eta);
        document.getElementById('shipETA').textContent = eta.toLocaleDateString();
    }

    updateProgress(progress) {
        const progressFill = document.getElementById('progressFill');
        const progressText = document.getElementById('progressText');
        
        if (progressFill) {
            progressFill.style.width = `${progress * 100}%`;
        }
        
        if (progressText) {
            progressText.textContent = `${Math.round(progress * 100)}% Complete`;
        }
    }

    updateTimeline() {
        const timelineItems = document.querySelectorAll('.timeline-item');
        timelineItems.forEach((item, index) => {
            item.classList.remove('current', 'completed');
            
            if (index < this.currentJourneyIndex) {
                item.classList.add('completed');
            } else if (index === this.currentJourneyIndex) {
                item.classList.add('current');
            }
        });
    }

    checkMilestone(point) {
        // Alerts disabled: do nothing on milestones
    }

    showMilestone(point) {
        const modal = document.getElementById('milestoneModal');
        const title = document.getElementById('milestoneTitle');
        const description = document.getElementById('milestoneDescription');
        const image = document.getElementById('milestoneImage');
        
        title.textContent = point.milestone;
        description.textContent = `The MV Ocean Explorer has reached ${point.name}! This marks an important milestone in our journey across the world's oceans.`;
        image.textContent = '🌊';
        
        modal.style.display = 'block';
        
        // Auto-close after 5 seconds
        setTimeout(() => {
            this.closeModal();
        }, 5000);
    }

    closeModal() {
        const modal = document.getElementById('milestoneModal');
        modal.style.display = 'none';
    }

    togglePlayPause() {
        this.isPlaying = !this.isPlaying;
        const btn = document.getElementById('playPauseBtn');
        
        if (this.isPlaying) {
            btn.textContent = '⏸️ Pause';
            this.startShipMovement();
        } else {
            btn.textContent = '▶️ Play';
        }
    }

    resetJourney() {
        this.currentJourneyIndex = 0;
        this.isPlaying = true;
        
        const firstPoint = this.journeyData.route[0];
        this.updateShipPosition(firstPoint);
        this.updateProgress(0);
        this.updateTimeline();
        
        document.getElementById('playPauseBtn').textContent = '⏸️ Pause';
        this.startShipMovement();
    }

    toggleFullscreen() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen();
        } else {
            document.exitFullscreen();
        }
    }

    hideLoadingScreen() {
        const loadingScreen = document.getElementById('loading-screen');
        const app = document.getElementById('app');
        
        setTimeout(() => {
            loadingScreen.style.opacity = '0';
            setTimeout(() => {
                loadingScreen.style.display = 'none';
                app.style.display = 'block';
                
                // Force a resize to ensure renderer and camera match final sizes
                this.onWindowResize();
                
                // Ensure WorldWind is properly sized and rendered
                if (this.wwd) {
                    const canvas = document.getElementById('ww-canvas');
                    const container = canvas.parentElement;
                    if (container) {
                        canvas.width = container.clientWidth;
                        canvas.height = container.clientHeight;
                    }
                    this.wwd.redraw();
                }
                
                // Render a frame immediately so the globe appears
                if (this.renderer && this.scene && this.camera) {
                    this.renderer.render(this.scene, this.camera);
                }
            }, 500);
        }, 2000);
    }

    completeJourney() {
        this.isPlaying = false;
        document.getElementById('playPauseBtn').textContent = '✅ Complete';
        document.getElementById('shipStatus').textContent = 'Journey Complete';
    }

    switchMapMode(mode) {
        // Update button states
        document.querySelectorAll('.mode-btn').forEach(btn => {
            btn.classList.remove('active');
        });
        document.querySelector(`[data-mode="${mode}"]`).classList.add('active');
        
        this.currentMode = mode;
        
        switch(mode) {
            case 'globe':
                this.showGlobeMode();
                break;
            case 'flat':
                this.showFlatMapMode();
                break;
            
        }
    }

    showGlobeMode() {
        // Hide Leaflet map
        const leafletEl = document.getElementById('leafletContainer');
        if (leafletEl) leafletEl.style.display = 'none';

        // Display the WorldWind canvas
        const wwCanvas = document.getElementById('ww-canvas');
        const threeCanvas = document.getElementById('globe-canvas');
        const overlayEl = document.querySelector('.globe-overlay');
        if (wwCanvas) {
            wwCanvas.style.display = 'block';
            // Ensure canvas is properly sized
            const container = wwCanvas.parentElement;
            if (container) {
                wwCanvas.width = container.clientWidth;
                wwCanvas.height = container.clientHeight;
            }
        }
        if (threeCanvas) threeCanvas.style.display = 'none';
        if (overlayEl) overlayEl.style.display = 'none';
        
        if (!this.wwd) {
            this.initWorldWind();
        } else {
            // Force canvas resize and redraw
            setTimeout(() => {
                if (this.wwd) {
                    // Ensure proper sizing
                    const canvas = document.getElementById('ww-canvas');
                    const container = canvas.parentElement;
                    if (container) {
                        canvas.width = container.clientWidth;
                        canvas.height = container.clientHeight;
                    }
                    this.wwd.redraw();
                }
            }, 100);
        }
    }

    showFlatMapMode() {
        // Hide Three.js canvas/overlay
        const threeCanvas = document.getElementById('globe-canvas');
        const overlayEl = document.querySelector('.globe-overlay');
        if (threeCanvas) threeCanvas.style.display = 'none';
        if (overlayEl) overlayEl.style.display = 'none';
        // Hide WorldWind
        const wwCanvas = document.getElementById('ww-canvas');
        if (wwCanvas) wwCanvas.style.display = 'none';
        

        // Show Leaflet 2D map
        const leafletEl = document.getElementById('leafletContainer');
        if (leafletEl) leafletEl.style.display = 'block';
        // Disable Three controls (Leaflet handles interactions)
        this.controls.enabled = false;

        if (!this.leafletMap) {
            this.initLeaflet();
        } else {
            setTimeout(() => this.leafletMap.invalidateSize(), 0);
        }
    }

    showSatelliteMode() {
        // Switch to satellite view (enhanced globe with night lights)
        if (this.globe) {
            this.globe.visible = true;
            // Add night texture overlay
            this.globe.material.emissiveMap = this.textures.night;
            this.globe.material.emissive = new THREE.Color(0x222222);
        }
        
        // Hide flat map
        if (this.flatMapMesh) {
            this.flatMapMesh.visible = false;
        }

        
        // Show Three.js canvas/overlay
        const canvasEl = document.getElementById('globe-canvas');
        const overlayEl = document.querySelector('.globe-overlay');
        if (canvasEl) canvasEl.style.display = 'block';
        if (overlayEl) overlayEl.style.display = 'block';
        
        // Update camera
        this.camera.position.set(0, 0, 4);
        this.controls.enabled = true;
        this.controls.autoRotate = true;
        this.controls.minDistance = 1.8;
        this.controls.maxDistance = 8;
    }

    

    createFlatMap() {
        // Create a flat map projection
        const geometry = new THREE.PlaneGeometry(4, 2);
        const material = new THREE.MeshPhongMaterial({
            map: this.textures.earth,
            transparent: true,
            opacity: 0.9
        });
        
        this.flatMapMesh = new THREE.Mesh(geometry, material);
        this.flatMapMesh.rotation.x = -Math.PI / 2;
        this.flatMapMesh.position.z = 0;
        this.scene.add(this.flatMapMesh);
        
        // Add flat map ship representation
        this.createFlatMapShip();
    }

    createFlatMapShip() {
        // Create a 2D ship marker for flat map
        const shipGeometry = new THREE.CircleGeometry(0.05, 8);
        const shipMaterial = new THREE.MeshBasicMaterial({
            color: 0xff6b35,
            transparent: true,
            opacity: 0.8
        });
        
        this.flatMapShip = new THREE.Mesh(shipGeometry, shipMaterial);
        this.flatMapShip.position.z = 0.01;
        this.scene.add(this.flatMapShip);
    }

    onWindowResize() {
        const container = document.getElementById('globe-canvas').parentElement;
        
        this.camera.aspect = container.clientWidth / container.clientHeight;
        this.camera.updateProjectionMatrix();
        
        this.renderer.setSize(container.clientWidth, container.clientHeight);

        // Resize WorldWind if visible
        if (this.wwd) {
            try { this.wwd.redraw(); } catch (_) {}
        }
    }
}

// Initialize the application when the page loads
document.addEventListener('DOMContentLoaded', () => {
    new ContainerTracker();
});// Add some additional interactive features
document.addEventListener('DOMContentLoaded', () => {
    // Add smooth scrolling for timeline
    const timeline = document.getElementById('timeline');
    if (timeline) {
        timeline.addEventListener('scroll', () => {
            // Add any timeline scroll effects here
        });
    }

    // Add keyboard controls
    document.addEventListener('keydown', (event) => {
        switch(event.key) {
            case ' ':
                event.preventDefault();
                // Toggle play/pause with spacebar
                const playBtn = document.getElementById('playPauseBtn');
                if (playBtn) playBtn.click();
                break;
            case 'r':
            case 'R':
                // Reset with R key
                const resetBtn = document.getElementById('resetBtn');
                if (resetBtn) resetBtn.click();
                break;
            case 'f':
            case 'F':
                // Fullscreen with F key
                const fullscreenBtn = document.getElementById('fullscreenBtn');
                if (fullscreenBtn) fullscreenBtn.click();
                break;
        }
    });
});