script.js

const map = L.map('map', { 
    zoomControl: false,
    boxZoom: false // Disable shift-drag rectangle to allow shift-click
}).setView([59.437, 24.753], 12);

L.control.zoom({ position: 'bottomleft' }).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

const intervals = {};
const eyeSelected = new Set();
const markerMap = {};
const cameraData = {};
let showOnlySelected = false;
let isPresenting = false;
let focusedCamId = null;

const overlay = document.getElementById('presentation-overlay');
const grid = document.getElementById('presentation-grid');
const focusContainer = document.getElementById('focus-container');
const focusMain = document.getElementById('focus-main');
const focusBar = document.getElementById('focus-bar');

// Load from URL hash on startup
function loadFromHash() {
    const hash = window.location.hash.substring(1);
    if (!hash) return;
    const params = new URLSearchParams(hash);
    const ids = params.get('ids');
    if (ids) ids.split(',').forEach(id => { if (id.startsWith('cam')) eyeSelected.add(id); });
    const lat = params.get('lat'), lon = params.get('lon'), zoom = params.get('zoom');
    if (lat && lon && zoom) map.setView([parseFloat(lat), parseFloat(lon)], parseInt(zoom));
    showOnlySelected = params.get('selected') === '1';
    isPresenting = params.get('present') === '1';
    focusedCamId = params.get('focus');
    document.getElementById('toggle-selected-btn').classList.toggle('active', showOnlySelected);
}

function updateHash() {
    const params = new URLSearchParams();
    if (eyeSelected.size > 0) params.set('ids', Array.from(eyeSelected).join(','));
    const center = map.getCenter();
    params.set('lat', center.lat.toFixed(6));
    params.set('lon', center.lng.toFixed(6));
    params.set('zoom', map.getZoom());
    if (showOnlySelected) params.set('selected', '1');
    if (isPresenting) params.set('present', '1');
    if (focusedCamId) params.set('focus', focusedCamId);
    window.history.replaceState(null, null, '#' + params.toString());
}

map.on('moveend zoomend', updateHash);

fetch('final_cameras.json')
    .then(res => res.json())
    .then(cameras => {
        loadFromHash();
        
        // Group cameras by coarser coordinates to handle nearby stacks (approx 10m threshold)
        const coordGroups = {};
        cameras.forEach(cam => {
            const key = `${cam.lat.toFixed(4)},${cam.lon.toFixed(4)}`;
            if (!coordGroups[key]) coordGroups[key] = [];
            coordGroups[key].push(cam);
        });

        cameras.forEach(cam => {
            const key = `${cam.lat.toFixed(4)},${cam.lon.toFixed(4)}`;
            const group = coordGroups[key];
            const stackIndex = group.indexOf(cam);
            cameraData[cam.cam] = { ...cam, stackIndex };

            const marker = L.marker([cam.lat, cam.lon]).addTo(map);
            markerMap[cam.cam] = marker;
            updateMarkerIcon(cam.cam);
            
            const popupContent = document.createElement('div');
            popupContent.className = 'cam-popup';
            const title = document.createElement('div');
            title.className = 'cam-title';
            title.style.fontWeight = 'bold';
            title.style.marginBottom = '2px';
            title.style.fontSize = '13px';
            title.textContent = cam.name;
            popupContent.appendChild(title);
            
            const img = document.createElement('img');
            img.className = 'cam-img';
            img.src = `https://ristmikud.tallinn.ee/last/${cam.cam}.jpg`;
            img.id = `img-${cam.cam}`;
            popupContent.appendChild(img);
            
            const controls = document.createElement('div');
            controls.className = 'cam-controls';
            const eyeBtn = document.createElement('button');
            eyeBtn.className = 'eye-btn' + (eyeSelected.has(cam.cam) ? ' active' : '');
            eyeBtn.innerHTML = '👁';
            eyeBtn.onclick = () => { toggleEye(cam.cam); eyeBtn.className = 'eye-btn' + (eyeSelected.has(cam.cam) ? ' active' : ''); };
            controls.appendChild(eyeBtn);
            popupContent.appendChild(controls);
            
            marker.bindPopup(popupContent, { maxWidth: 410, minWidth: 400, autoClose: true, closeOnClick: true });

            marker.on('click', (e) => {
                if (e.originalEvent.shiftKey) {
                    marker.closePopup();
                    toggleEye(cam.cam);
                }
            });
            
            marker.on('popupopen', () => {
                startPlaying(cam.cam);
                eyeBtn.className = 'eye-btn' + (eyeSelected.has(cam.cam) ? ' active' : '');
            });
            marker.on('popupclose', () => {
                if (!eyeSelected.has(cam.cam)) stopPlaying(cam.cam);
            });
            marker.on('mouseover', () => updateMarkerIcon(cam.cam, true));
            marker.on('mouseout', () => updateMarkerIcon(cam.cam, false));
        });
        
        updateSidebar();
        updateMarkerVisibility();

        if (isPresenting && eyeSelected.size > 0) {
            overlay.style.display = 'block';
            renderPresentation();
            if (focusedCamId && eyeSelected.has(focusedCamId)) enterFocusMode(focusedCamId);
        }
    });

function toggleEye(camId) {
    if (eyeSelected.has(camId)) {
        eyeSelected.delete(camId);
        if (focusedCamId === camId) {
            focusedCamId = null;
            if (isPresenting) renderPresentation();
        }
    } else {
        eyeSelected.add(camId);
    }
    updateSidebar();
    updateMarkerIcon(camId);
    updateMarkerVisibility();
    updateHash();
}

function updateMarkerVisibility() {
    Object.keys(markerMap).forEach(camId => {
        const marker = markerMap[camId];
        if (showOnlySelected) {
            if (eyeSelected.has(camId)) { if (!map.hasLayer(marker)) marker.addTo(map); }
            else { if (map.hasLayer(marker)) map.removeLayer(marker); }
        } else { if (!map.hasLayer(marker)) marker.addTo(map); }
    });
}

function updateMarkerIcon(camId, isHovered = false) {
    const cam = cameraData[camId];
    if (!cam || !markerMap[camId]) return;

    let borderColor = 'white', borderWidth = isHovered ? 4 : 2, sizeMultiplier = isHovered ? 1.2 : 1.0;
    if (eyeSelected.has(camId)) borderColor = '#ff0000';

    const width = 50 * sizeMultiplier, height = 28 * sizeMultiplier;
    // Stack with a pronounced vertical offset
    const anchorY = (height / 2) + (cam.stackIndex * 32);

    const iconHtml = `<img src="https://ristmikud.tallinn.ee/last/${camId}.jpg" class="cam-thumb" id="thumb-${camId}" style="width: ${width}px; height: ${height}px; border: ${borderWidth}px solid ${borderColor}; border-radius: 4px; box-shadow: 0 0 5px rgba(0,0,0,0.5); transition: all 0.2s;">`;
    
    markerMap[camId].setIcon(L.divIcon({
        className: 'cam-marker',
        html: iconHtml,
        iconSize: [width, height],
        iconAnchor: [width/2, anchorY]
    }));
    markerMap[camId].setZIndexOffset(isHovered ? 5000 : 100 + (cam.stackIndex * 10));
}

function updateSidebar() {
    const content = document.getElementById('sidebar-content');
    content.innerHTML = '';
    eyeSelected.forEach(camId => {
        const cam = cameraData[camId];
        if (!cam) return;
        const item = document.createElement('div');
        item.className = 'sidebar-item';
        item.innerHTML = `<img src="https://ristmikud.tallinn.ee/last/${camId}.jpg" id="sidebar-img-${camId}"><div class="sidebar-item-title">${cam.name}</div><button class="remove-btn">🗑️</button>`;
        item.querySelector('.remove-btn').onclick = (e) => { e.stopPropagation(); toggleEye(camId); };
        item.onmouseenter = () => updateMarkerIcon(camId, true);
        item.onmouseleave = () => updateMarkerIcon(camId, false);
        content.appendChild(item);
        startPlaying(camId);
    });
}

document.getElementById('remove-all-eye-btn').onclick = () => {
    const current = [...eyeSelected];
    eyeSelected.clear();
    focusedCamId = null;
    updateSidebar();
    current.forEach(id => { updateMarkerIcon(id); stopPlaying(id); });
    updateMarkerVisibility();
    updateHash();
};

document.getElementById('toggle-selected-btn').onclick = () => {
    showOnlySelected = !showOnlySelected;
    document.getElementById('toggle-selected-btn').classList.toggle('active', showOnlySelected);
    updateMarkerVisibility();
    updateHash();
};

document.getElementById('focus-visible-btn').onclick = () => {
    const visibleMarkers = [];
    Object.values(markerMap).forEach(marker => { if (map.hasLayer(marker)) visibleMarkers.push(marker.getLatLng()); });
    if (visibleMarkers.length > 0) map.fitBounds(L.latLngBounds(visibleMarkers), { padding: [50, 50] });
};

document.getElementById('presentation-mode-btn').onclick = () => {
    if (eyeSelected.size === 0) return alert('Select some cameras first!');
    isPresenting = true;
    map.closePopup();
    overlay.style.display = 'block';
    renderPresentation();
    updateHash();
};

function renderPresentation() {
    focusContainer.style.display = 'none';
    grid.style.display = 'grid';
    grid.innerHTML = '';
    if (eyeSelected.size === 0) { closePresentation(); return; }

    const winW = window.innerWidth - 40; // padding
    const winH = window.innerHeight - 80; 
    const camAspect = 16 / 9;
    const minHeight = 200; // Minimum readable height
    
    let bestCols = 1, maxScale = 0;

    // Try to fit everything in the viewport first
    for (let cols = 1; cols <= eyeSelected.size; cols++) {
        const rows = Math.ceil(eyeSelected.size / cols);
        const scale = Math.min((winW / cols) / camAspect, winH / rows);
        if (scale > maxScale) { maxScale = scale; bestCols = cols; }
    }

    // If fitting everything makes items too small, switch to a scrolling grid
    if (maxScale < minHeight) {
        // Calculate columns based on minHeight but limit to something reasonable like 4
        bestCols = Math.min(4, Math.max(1, Math.floor(winW / (minHeight * camAspect))));
    }

    grid.style.gridTemplateColumns = `repeat(${bestCols}, 1fr)`;
    // Remove explicit rows to allow natural growth/scrolling
    grid.style.gridTemplateRows = 'none';

    eyeSelected.forEach(camId => {
        const cam = cameraData[camId];
        const item = document.createElement('div');
        item.className = 'presentation-item';
        // Enforce aspect ratio for the items
        item.style.aspectRatio = '16 / 9'; // 16:9 for cam
        item.innerHTML = `<img src="https://ristmikud.tallinn.ee/last/${camId}.jpg" id="pres-img-${camId}" style="width:100%; aspect-ratio:16/9; object-fit:contain; background:#111;">`;
        item.onclick = () => enterFocusMode(camId);
        grid.appendChild(item);
        startPlaying(camId);
    });
}

function enterFocusMode(camId) {
    focusedCamId = camId;
    grid.style.display = 'none';
    focusContainer.style.display = 'flex';
    renderFocusMain(camId);
    renderFocusBar(camId);
    updateHash();
}

function renderFocusMain(camId) {
    const cam = cameraData[camId];
    focusMain.innerHTML = `<img src="https://ristmikud.tallinn.ee/last/${camId}.jpg" id="focus-main-img-${camId}"><div id="focus-main-title">${cam.name}</div>`;
    focusMain.onclick = () => { focusedCamId = null; focusContainer.style.display = 'none'; grid.style.display = 'grid'; updateHash(); };
    startPlaying(camId);
}

function renderFocusBar(focusedId) {
    focusBar.innerHTML = '';
    eyeSelected.forEach(camId => {
        const item = document.createElement('div');
        item.className = 'focus-bar-item' + (camId === focusedId ? ' active' : '');
        item.innerHTML = `<img src="https://ristmikud.tallinn.ee/last/${camId}.jpg" id="focus-bar-img-${camId}">`;
        item.onclick = (e) => { e.stopPropagation(); enterFocusMode(camId); };
        focusBar.appendChild(item);
        startPlaying(camId);
    });
}

document.getElementById('close-presentation').onclick = closePresentation;
window.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && isPresenting) {
        closePresentation();
    }
});
function closePresentation() { isPresenting = false; focusedCamId = null; overlay.style.display = 'none'; updateHash(); }

function startPlaying(camId) {
    if (intervals[camId]) return;
    intervals[camId] = setInterval(() => {
        const v = Math.floor(new Date().getTime() / 1000);
        [`img-${camId}`, `thumb-${camId}`, `sidebar-img-${camId}`, `pres-img-${camId}`, `focus-main-img-${camId}`, `focus-bar-img-${camId}`].forEach(id => {
            const el = document.getElementById(id);
            if (el) el.src = `https://ristmikud.tallinn.ee/last/${camId}.jpg?v=${v}`;
        });
    }, 1500); 
}

function stopPlaying(camId) { if (intervals[camId]) { clearInterval(intervals[camId]); delete intervals[camId]; } }