script.js

let svg;
let backgroundImage = null;
let routes = null;
let routeData = null;
let selectedRoute = null;
let routeEtymology = {};



// Load the external SVG file
Promise.all([
    // d3.xml("images/map_new.svg"),
    d3.xml("images/map-routes.svg"),
    d3.csv("data/routes_03012026.csv"),
    // Wrap fetch in a fail-safe
    fetch("data/etymology.json")
        .then(res => {
            if (!res.ok) throw new Error("Failed to load");
            return res.json();
        })
        .catch(err => {
            console.warn("Etymology JSON failed to load:", err);
            return {}; // return empty object instead of rejecting
        })
]).then(([svgData, csvData, jsonData]) => {

    routeEtymology = jsonData;
    console.log("Route etymology loaded:", routeEtymology.acela);

    // const container = d3.select("#map-container");
    const container = d3.select("#map-overlay");

    // Append the SVG element to the container
    container.node().append(svgData.documentElement);

    // Select the loaded SVG
    // svg = d3.select("#map-container svg")
    //             .attr("id", "amtrak-svg")
    //             .attr("preserveAspectRatio", "xMidYMid meet");

    svg = d3.select("#map-overlay svg")
        .attr("id", "amtrak-svg")
        .attr("preserveAspectRatio", "xMidYMid meet")
        .attr("viewBox", "0 0 4447 3473");


    console.log("SVG loaded:", svg);

    // Slider: Select image and chnage opacity of underlying image
    // backgroundImage = svg.select("image");
    backgroundImage = d3.select("#map-base");

    // ... set initial opacity
    const initialOpacity = d3.select("#opacity-slider").property("value");
    if (backgroundImage) {
        // backgroundImage.attr("opacity", initialOpacity);
        backgroundImage.style("opacity", initialOpacity);

    }
    console.log("Found image:", backgroundImage.node());

    // Toggle: Show/hide routes
    routes = svg.selectAll("g[id^='route']");
    console.log("Routes found:", routes.size());

    let selectedRoute = null;

    

    // Load routes csv for tooltips
    // Convert numeric columns if needed
    csvData.forEach(d => {
        d.n_stations_approx = +d.n_stations_approx;
        d.time = +d.time;
        d.miles_approx = +d.miles_approx;
    });

    // Index by route for fast access
    routeData = {};
    csvData.forEach(d => {
        routeData[d.route] = d;
    });

    console.log("Routes loaded:", routeData);


    setupSlider();
    setupToggle();
    setupRouteClick();
    setupResetClick();

    
    // End
}).catch(err => console.error("Error loading SVG or CSV:", err));





// ----------------- FUNCTIONS ----------------- 


function setupSlider() {
    d3.select("#opacity-slider").on("input", function () {
        const val = this.value;
        if (backgroundImage) {
            // backgroundImage.attr("opacity", val);
            backgroundImage.style("opacity", val);

        }

    });
}

function setupToggle() {
    d3.select("#toggle-routes").on("change", function () {

        const checked = this.checked;
        if (routes) {
            routes.attr("display", checked ? null : "none");
        }

    });
}

function setupRouteClick() {
    
    routes.style("cursor", "pointer");

    routes.on("click", function (event) {
        event.stopPropagation(); // prevent reset click
        const clicked = d3.select(this);
        selectedRoute = this.id;
        // // fade all
        routes.attr("opacity", 0.1);
        // routes.attr("stroke", "#b0b0b0");

        // // highlight clicked
        clicked.attr("opacity", 1);
        // clicked.attr("stroke", null);

        // show tooltip
        selectedRouteName = selectedRoute.replace(/^route_/,""); // remove prefix
        showTooltip(routeData[selectedRouteName], event.pageX, event.pageY);
    })
};


function setupResetClick() {
    svg.on("click", function () {
        selectedRoute = null;
        routes.attr("opacity", 1);
        routes.attr("stroke", null);

        hideTooltip();
    });

}





// Show tooltip at mouse position
function showTooltip(info, x, y) {
    // Remove any existing tooltip
    d3.select(".tooltip").remove();

    // Create tooltip container
    const tooltip = d3.select("body")
        .append("div")
        .attr("class", "tooltip")
        .style("left", `${x + 20}px`)
        .style("top", `${y + 10}px`);

    // =========================
    // HEADER BUTTONS
    // =========================
    const header = tooltip.append("div")
        .attr("class", "tooltip-header")
        .style("margin-bottom", "5px");

    // Radio input: Route Info
    header.append("input")
        .attr("type", "radio")
        .attr("name", "tooltip-panel")
        .attr("id", "panel-info")
        .attr("checked", true)
        .on("change", () => showPanel("info"));

    header.append("label")
        .attr("for", "panel-info")
        .text("Route info")
        .attr("class", "tooltip-radio-label");

    // Radio input: Etymology
    header.append("input")
        .attr("type", "radio")
        .attr("name", "tooltip-panel")
        .attr("id", "panel-etymology")
        .on("change", () => showPanel("etymology"));

    header.append("label")
        .attr("for", "panel-etymology")
        .text("Etymology")
        .attr("class", "tooltip-radio-label");
    // =========================
    // PANELS
    // =========================
    const panelInfo = tooltip.append("div").attr("class", "tooltip-panel info");
    const panelEtym = tooltip.append("div").attr("class", "tooltip-panel etymology");


    // --- Route Info Table ---
    const fields = [
        {key: "route", label: "Route"},   
        {key:"origin", label:"Origin"},
        {key:"destination", label:"Destination"},
        {key:"frequency", label:"Frequency"},
        {key:"miles_approx", label:"# miles", prefix: "~", suffix:" mi"},
        {key:"n_stations_approx", label:"Stations"},
        {key:"stop_summary", label:"Stop summary"},
        {key:"time_label", label:"Time"},
        {key:"link", label:"More info"}   
    ];
    // Build table
    const tbody = panelInfo.append("table").append("tbody");

    // Only the fields we want
    fields.forEach(f => {
        if (info[f.key] !== undefined && info[f.key] !== "") {
            let value = (f.prefix || "") + info[f.key] + (f.suffix || "");
            // Capitalize the route name
            if (f.key === "route" || f.key === "route_name") {
                value = value.replace(/_/g, " ");    
                value = value.toUpperCase(); // all uppercase
                // Or to capitalize just first letters of words:
                // value = value.replace(/\b\w/g, c => c.toUpperCase());
            }
            // If it's a link, wrap in <a>
            // if (f.key === "link") {
            //     value = `<a href="${info[f.key]}" target="_blank">${info[f.key]}</a>`;
            // }
            if (f.key === "link" && info[f.key]) {
                value = `<a href="${info[f.key]}" target="_blank">Link</a>`;
            }
            tbody.append("tr").html(`
                <td>${f.label}</td>
                <td>${value}</td>
            `);
        }
    });

    // --- Etymology ---
    const routeName = info.route;
    const etymText = routeEtymology[routeName] || "No etymology available.";
    panelEtym.append("p").html(etymText);

    // --- Panel Toggle ---
    function showPanel(name) {
        if (name === "info") {
            panelInfo.style("display", "block");
            panelEtym.style("display", "none");
        } else {
            panelInfo.style("display", "none");
            panelEtym.style("display", "block");
        }
    }

    // Default to showing Route Info
    showPanel("info");

    // infoBtn.on("click", () => showPanel("info"));
    // etymBtn.on("click", () => showPanel("etymology"));

    
}

// Hide tooltip
function hideTooltip() {
    d3.select(".tooltip").remove();
}