var svg = document.querySelector("#svg"),
    iframe = document.querySelector("iframe#wikiframe"),
    map = new app.Map({
        apiurl: "/mw/api.php",
        symbols: "src/legend.json",
        svg: "#svg",
        categorylabel: "Catégorie",
        categorydiv: "#cats .body",
        zoom: 2.0
    }),
    zoom_in = document.querySelector(".leaflet-control-zoom-in"),
    zoom_out = document.querySelector(".leaflet-control-zoom-out"),
    cats = document.querySelector("#cats");

window.addEventListener("resize", resize);
function resize() {
    var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
    // svg.setAttribute("width", x);
    // svg.setAttribute("height", y);
    //console.log("resize", x, y);

    // Match size of parent
    svg.setAttribute("width", page.clientWidth);
    svg.setAttribute("height", page.clientHeight);
}

async function doload () {
    resize();
    console.log("map.init");
    await map.init();
    console.log("map.init: done");

    map.on("page", function (page) {
        // console.log("map.page", page.title);
        var url = page.url();
        if (iframe.src !== url) {
            // console.log("setting iframe src to", url);
            iframe.src = url;
        }
    })
    zoom_in.addEventListener("click", (e) => {
        map.zoom_in();
    })
    zoom_out.addEventListener("click", (e) => {
        map.zoom_out();
    })
}
window.addEventListener("DOMContentLoaded", doload);
iframe.addEventListener("load", function () {
    map.set_active_url(iframe.contentWindow.location.href);
});

cats.addEventListener("click", e => {
    cats.classList.toggle("expanded");
})