var svg = document.querySelector("#svg"),
    page = document.querySelector("#page"),
    iframe = document.querySelector("iframe#wikiframe"),
    cats = document.querySelector("#cats"),
    cats_contents = document.querySelector("#cats .body"),
    // cats_thumb = document.querySelector("#cats .thumb"),
    allcatscb = document.querySelector("input#allcats"),
    historycb = document.querySelector("input#history"),
    // current_title = null,
    // loaded = false,
    wikibaseurl,
    wikibasepat;


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);

}
resize();

var map = new app.Map({
    apiurl: "/mw/api.php",
    symbols: "src/legend.json",
    svg: "#svg",
    categorylabel: "Catégorie",
    categorydiv: "#cats .body"
});

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

    // await map.load_json("data/sitemap.json");
    // console.log("loading categories");
    // await map.load_cats("data/cats.json", cats_contents);
    // await map.load_legend("src/legend.json", cats_contents);
    // loaded = true;

    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;
        }
    })
}
window.addEventListener("DOMContentLoaded", doload);
iframe.addEventListener("load", function () {
    map.set_active_url(iframe.contentWindow.location.href);
});