diff --git a/img/downarrows.png b/img/downarrows.png
new file mode 100644
index 0000000..84729cb
Binary files /dev/null and b/img/downarrows.png differ
diff --git a/img/hamburger.png b/img/hamburger.png
new file mode 100644
index 0000000..03a3811
Binary files /dev/null and b/img/hamburger.png differ
diff --git a/img/search.png b/img/search.png
new file mode 100644
index 0000000..d956673
Binary files /dev/null and b/img/search.png differ
diff --git a/img/uparrows.png b/img/uparrows.png
new file mode 100644
index 0000000..6dd8182
Binary files /dev/null and b/img/uparrows.png differ
diff --git a/index.frame.html b/index.frame.html
new file mode 100644
index 0000000..f9cb8cb
--- /dev/null
+++ b/index.frame.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #page {
+            position: absolute;
+            left: 0; right: 0; top: 0;
+            height: 160vh;
+            text-align: center;
+            background: gray;
+        }
+        #page.touched {
+            background: #444;
+        }
+        #bottompane {
+            position: absolute;
+            top: 60vh;
+            left: 0; right: 0;
+            height: 100vh;
+            z-index: 2;
+        }
+        #bottompane iframe {
+            border: none;
+            width: 100%;
+            max-width: 800px;
+            height: 100%;
+            background: white;
+        }
+        #debug {
+            font-size: 10px;
+            height: 8em;
+            overflow: auto;
+        }
+        #cats {
+            display: none;
+        }
+        iframe#svg {
+        }
+    </style>
+</head>
+<body>
+    <div id="page">
+        <iframe id="svg" src="map.html"></iframe>
+        <div id="bottompane">
+            <iframe id="wikiframe" src="/mw"></iframe>
+        </div>
+    </div>
+    <div id="cats" class="expanded">
+        <div class="ocontents">
+        <div class="contents">
+            <div class="head">Liste des catégories</div>
+            <div class="body"></div>
+            <div class="foot"><input id="allcats" type="checkbox"><label for="allcats">Afficher tous</label></div>
+            <hr>
+            <div class="history"><input id="history" type="checkbox"><label for="history">Histoire</div>
+        </div>
+        </div>
+        <div class="botright"><div class="thumb"></div></div>
+    </div>
+</body>
+<script src="custom_scroller_iframe.js"></script>
+<script>
+custom_scroller_iframe(document.scrollingElement, document.getElementById("wikiframe"));
+</script>
+</html>
diff --git a/map.html b/map.html
new file mode 100644
index 0000000..41225fd
--- /dev/null
+++ b/map.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <style>
+        svg {
+            position: absolute;
+            left: 0; top: 0;
+            border: 1px solid aqua;
+        }
+    </style>
+</head>
+<body>
+    <div id="page">
+        <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>
+    </div>
+</body>
+<script type="text/javascript" src="dist/wikimaptotal.js"></script>
+<script>
+    var svg = document.querySelector("#svg"),
+        //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;
+
+
+    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);
+    }
+    resize();
+
+    // console.log("mediawikiapi", mediawikiapi);
+    var symbols = {
+        "Orientations": "symbols.svg#Orientations",
+        "Ateliers pluridisciplinaires": "symbols.svg#Ateliers_pluridisciplinaires",
+        "Cours de soutien à l'orientation": "symbols.svg#Cours_de_soutien_a_l'orientation",
+        "Cours de soutien spécifique": "symbols.svg#Cours_de_soutien_specifique",
+        "Cours techniques": "symbols.svg#Cours_techniques",
+        "Cours théoriques": "symbols.svg#Cours_theoriques",
+        "Enseignants": "symbols.svg#Enseignants",
+        "default": "symbols.svg#Main"
+    };
+    var map = new wikimap.SimpleMap(symbols);
+
+    map.init_svg("#svg");
+    async function doload () {
+        console.log("loading map");
+        await map.load_json("sitemap.json");
+        return;
+        console.log("loading categories");
+        await map.load_cats("cats.json", cats_contents);
+        console.log("LOADED!");
+        loaded = true;
+        if (current_title) {
+            map.set_active_title(current_title);
+        }
+    }
+
+    map.on("page", function (title) {
+        console.log("map.page", title);
+        var url = wiki_title_to_url(title);
+        // iframe.src = url;
+    })
+    // async function doload() {
+    //     map.set_active_node(startpage.value);
+    // }
+    var URLPAT = new RegExp("http://wiki.erg.be/mw/index.php/(.+)");
+    function strip_fragment (href) {
+        var spos = href.indexOf("#");
+        if (spos >= 0) {
+            return href.substr(0, href.indexOf("#"))
+        }
+        return href;
+    }
+    function url_to_wiki_title (href) {
+        href = strip_fragment(href);
+        var m = URLPAT.exec(href);
+        if (m !== null) {
+            return decodeURI(m[1]).replace(/_/g, " ");
+        }
+        console.log("m", m);
+    }
+    function wiki_title_to_url (title) {
+        return "http://wiki.erg.be/mw/index.php/"+encodeURI(title.replace(/ /g, "_"));
+    }
+    window.addEventListener("DOMContentLoaded", doload);
+</script>
+<noscript>
+    iframe.addEventListener("load", function () {
+        var href = strip_fragment(iframe.contentWindow.location.href);
+        console.log("iframe loaded", href);
+        var title = url_to_wiki_title(href);
+        console.log("title", title);
+        if (title) {
+            current_title = title;
+            if (loaded) {
+                map.set_active_title(title);
+            }
+        }
+        // attempt to map url to wiki page title and update the map if it is one
+
+    });
+
+    cats_thumb.addEventListener("click", function () {
+        cats.classList.toggle("expanded");
+    });
+    // allcats checkbox
+    // match current state & respond to change events
+    // console.log("setting checked to", cats.classList.contains("showall"))
+    allcatscb.checked = cats.classList.contains("showall");
+    allcatscb.addEventListener("change", function () {
+        // console.log("allcats", allcatscb);
+        if (allcatscb.checked) {
+            cats.classList.add("showall")
+        } else {
+            cats.classList.remove("showall")            
+        }
+    })
+    historycb.addEventListener("change", function () {
+        // console.log("history", historycb.checked);
+        map.set_show_history(historycb.checked);
+    })
+</noscript>
+</html>
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..10ea0eb
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test 3</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: hidden;
+            background: pink;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 40vh; right: 0;
+            z-index: 0;
+            background: black;
+        }
+        #map #radio {
+            position: absolute;
+            left: 10px;
+            bottom: 10px;
+            width: 360px;
+            height: 60px;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+        #pagediv {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+            overflow: auto;            
+        }
+        #page {
+            position: absolute;
+            left: 0; right: 0;
+            top: 60vh;
+            height: 100vh;
+        }
+        #page iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+    <div id="pagediv">
+        <div id="map"><a href="#">map</a>
+
+            <div id="radio"><iframe width="100%" height="60" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&mini=1&feed=%2FErgote_Radio%2Fmagma-reclaim-the-climax-publication-exposition-documentation%2F" frameborder="0" ></iframe></div>
+        </div>
+        <div id="page">
+            <iframe src="/mw"></iframe>
+        </div>
+    </div>
+</body>
+<script>
+(function () {
+
+var pagediv = document.querySelector("#pagediv"),
+    page = document.querySelector("#page"),
+    iframe = document.querySelector("iframe"),
+    scroll_elt = pagediv;
+
+pagediv.scrollTop = 0;
+
+pagediv.addEventListener("scroll", function () {
+    var sh = pagediv.scrollHeight,
+        sp = pagediv.scrollTop;
+    console.log("scroll", sp, sh);
+    if (pagediv.scrollHeight - pagediv.scrollTop === pagediv.clientHeight) {
+        console.log("END OF SCROLL");
+        set_scroll_elt(iframe);
+    }
+});
+
+function set_scroll_elt (elt) {
+    if (scroll_elt === elt) { return; }
+    scroll_elt = elt;
+    if (scroll_elt === pagediv) {
+        pagediv.scrollTop = pagediv.scrollHeight - pagediv.clientHeight - 10;
+        pagediv.style.overflow = "auto";
+        iframe.contentWindow.document.body.style.overflow = "hidden";        
+    } else {
+        pagediv.style.overflow = "hidden";
+        iframe.contentWindow.document.body.style.overflow = "auto";        
+    }
+}
+
+iframe.addEventListener("load", function () {
+    // var ifh = iframe.contentWindow.document.body.scrollHeight;
+    var ifbody = iframe.contentWindow.document.body;
+    var sd = iframe.contentDocument.scrollingElement
+    console.log("scrolling element", sd);
+    ifbody.style.overflow = "hidden";
+    iframe.contentWindow.addEventListener("scroll", function () {
+        var stm = sd.scrollHeight - sd.clientHeight;
+        console.log("pagescroll", sd.scrollTop, stm);
+        if (sd.scrollTop == 0) {
+            set_scroll_elt(pagediv);
+        }
+    })
+    // console.log("load", ifh);
+    // page.style.height = ifh+"px";
+});
+
+})
+
+</script>
+</html>
\ No newline at end of file
diff --git a/test/index2.html b/test/index2.html
new file mode 100644
index 0000000..c2aea27
--- /dev/null
+++ b/test/index2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>mobile map test</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+       #content {
+        position: absolute; 
+        left: 0;top: 0;
+        bottom: 0; right: 0;
+        box-sizing: border-box;
+        border: 5px solid gray;
+       }
+       #page {
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        background: gray;
+
+       }
+       #page .expand {
+        position: absolute;
+        right: 5%;
+        top: 5%;
+        font-size: 32px;
+        color: white;
+        font-weight: bold;
+       }
+    </style>
+</head>
+<body>
+    <div id="content">
+        <div id="search">header/search bar</div>
+        <div id="map">map</div>
+        <div id="page">
+            <h2>This is a compact page</h2>
+            <p>Swipe up to read more. Using <a href="https://css-tricks.com/simple-swipe-with-vanilla-javascript/">this site</a> for simple swipe inspiration. Also <a href="https://css-tricks.com/snippets/html/responsive-meta-tag/">meta tags</a>.</p>
+            <div class="expand">&uarr;</div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/index3.html b/test/index3.html
new file mode 100644
index 0000000..4bc0092
--- /dev/null
+++ b/test/index3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: hidden;
+            background: pink;
+        }
+        #content {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 1;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+    #content iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+
+    </style>
+</head>
+<body>
+    <div id="map"><a href="#">map</a></div>
+    <div id="content">
+        <iframe src="/mw"></iframe>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/index4.html b/test/index4.html
new file mode 100644
index 0000000..b96754c
--- /dev/null
+++ b/test/index4.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test 3</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: auto;
+            background: pink;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+        #page {
+            position: absolute;
+            left: 0; right: 0;
+            top: 60vh;
+            height: 40vh;
+        }
+        #page iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"><a href="#">map</a></div>
+    <div id="page">
+        <iframe src="/mw"></iframe>
+    </div>
+</body>
+<script>
+var page = document.querySelector("#page"),
+    iframe = document.querySelector("iframe");
+
+iframe.addEventListener("load", function () {
+    var ifh = iframe.contentWindow.document.body.scrollHeight;
+    console.log("load", ifh);
+    page.style.height = ifh+"px";
+});
+window.addEventListener("resize", function () {
+    var ifh = iframe.contentWindow.document.body.scrollHeight;
+    console.log("load", ifh);
+    page.style.height = ifh+"px";    
+})
+</script>
+</html>
\ No newline at end of file
diff --git a/test/index5.html b/test/index5.html
new file mode 100644
index 0000000..5685e02
--- /dev/null
+++ b/test/index5.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>wikiframe test 3</title>
+    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8">
+    <style type="text/css">
+        body {
+            overflow: auto;
+            background: pink;
+        }
+        #map {
+            position: absolute;
+            left: 0; top: 0;
+            bottom: 0; right: 0;
+            z-index: 0;
+        }
+        #map a {
+            position: relative;
+            left: 200px;
+            top: 200px;
+        }
+        #page {
+            position: absolute;
+            left: 0; right: 0;
+            top: 60vh;
+            height: 100vh;
+        }
+        #page iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"><a href="#">map</a></div>
+    <div id="page">
+        <iframe src="/mw"></iframe>
+    </div>
+</body>
+<script>
+</script>
+</html>
\ No newline at end of file
