var IMAGEWIDTH; var IMAGEHEIGHT; var MAX_ZOOM; var TILESIZE = 256; // Zooming to an icon should make it take this fraction of the view area. var AUTOZOOM_FRAC = 0.1; var BODY = document.getElementsByTagName("body")[0]; var VIEWER = document.getElementById("viewer"); var WELL = document.getElementById("well"); var SURFACE = document.getElementById("surface"); var SEARCHINFO = document.getElementById("searchinfo"); var EXPANDERTEXT = document.getElementById("expandertext"); var VIEWWIDTH, VIEWHEIGHT; var TILEWIDTH, TILEHEIGHT; var TILES; var DIMS; // Center of the current view in screen pixel space. var view = { x: 0, y: 0, z: 0 }; // The view and elem coordinates when the mouse button was last clicked. var mousedown_view = null; var mousedown_coords = null; var mousedown_moved = false; // Did the user do something yet, such that we should enable mouse wheel zooming? var interaction_happened = false; var TOOLTIP = document.createElement("div"); TOOLTIP.id = "tooltip"; function parse_query_string(qs) { var strings; var result; result = {}; if (qs) strings = qs.split("&"); else strings = []; for (var i = 0; i MAX_ZOOM) ic.z = MAX_ZOOM; go_to(ic); view.x -= offset.x; view.y -= offset.y; position_tiles(); } function zoom_in_to(vc) { zoom_to(vc, -1); } function zoom_out_to(vc) { zoom_to(vc, +1); } // Zoom in on the center of the view. function zoom_in() { zoom_in_to(view); } // Zoom out on the center of the view. function zoom_out() { zoom_out_to(view); } function zoom_set(z) { zoom_to(view, z - view.z); } function box(n, low, high) { if (n high) return high; else return n; } // Return a good zoom level for an icon of the given size. function zoom_for_size(s, frac) { if (frac === undefined) frac = AUTOZOOM_FRAC; var autozoom_size = Math.sqrt(frac * VIEWWIDTH * VIEWHEIGHT); return box(Math.round(Math.log(s / autozoom_size) / Math.log(2)), 0, MAX_ZOOM); } function build_permalink(target) { var url; url = "?search=" + encodeURIComponent(target); var a = document.createElement("a"); a.href = url; a.textContent = "permalink"; return a; } function handle_search_result(res) { var vc = image_coords_to_view_coords_offset({x: res.l+res.s/2, y: res.t+res.s/2, z: zoom_for_size(res.s)}); go_to(vc); position_tiles(); } function do_search(query) { SEARCHINFO.textContent = "..."; var xhr = new XMLHttpRequest(); xhr.open("GET", "find?q=" + encodeURIComponent(query)); xhr.responseType = "text"; xhr.onreadystatechange = function() { if (xhr.readyState === xhr.DONE) { if (xhr.status === 200) { handle_search_result(JSON.parse(xhr.responseText)); SEARCHINFO.innerHTML = ""; SEARCHINFO.appendChild(build_permalink(query)); } else { if (query.indexOf(".") == -1) SEARCHINFO.textContent = "not found (use a complete domain like "+query+".com)"; else SEARCHINFO.textContent = "not found"; } } }; xhr.send(null); } function search_submit(form) { do_search(document.getElementById("search").value); return false; } function toggle_fullscreen_elem(elem) { if (has_class(elem, "fullscreen")) remove_class(elem, "fullscreen"); else add_class(elem, "fullscreen"); create_tiles(); position_tiles(); } function toggle_fullscreen() { toggle_fullscreen_elem(BODY); if (is_fullscreen()) { EXPANDERTEXT.innerHTML = 'exit fullscreen (esc)'; } else { EXPANDERTEXT.innerHTML = "fullscreen ⎚"; } } function is_fullscreen() { return has_class(BODY, "fullscreen"); } function go_to(ic) { view = image_coords_to_view_coords(ic); for (var i = 0; i = 0 && i = 0 && j = 0 && z 0) zoom_in_to(vc); else if (event.wheelDelta 0) zoom_out_to(vc); event.preventDefault(); } function onkeydown(event) { var key = event.which; if (key === 27) { // escape if (is_fullscreen()) { toggle_fullscreen(); interaction_happened = true; } } } SURFACE.onmousedown = onmousedown; document.onmouseup = onmouseup; // onmousemove is set in onmousedown. SURFACE.onclick = onclick; SURFACE.ondblclick = ondblclick; SURFACE.onmousewheel = onmousewheel; SURFACE.addEventListener("DOMMouseScroll", ondommousescroll, false); document.onkeydown = onkeydown;