<!doctype html>
<meta charset="utf-8">
<title>Slide Viewer</title>
<meta name="viewport" content="user-scalable=no">

<style>
html {
    overflow: hidden;
}
body {
    margin: 5px;
}
h1 {
    font-size: 1.2em;
}
.notice {
    font-style: italic;
}
div#images {
    position: absolute;
    width: 15%;
}
div#images h2 {
    font-size: 1em;
    margin: 0;
}
.associated-images {
    margin-left: 1.5em;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}
div#images li {
    list-style-type: none;
}
.current-slide {
    background-color: #ccf;
}
div#view {
    position: absolute;
    left: 16%;
    width: 58%;
    height: 98%;
    background-color: black;
    border: 1px solid #000;
    color: white;
}
div#view.fullpage {
    left: 0%;
    border: 0;
}
div#properties {
    position: absolute;
    left: 75%;
    width: 24.5%;
    height: 98%;
    overflow: auto;
}
div#properties-inner {
    display: inline-block;
}
div#properties dl {
    font-size: small;
    margin: 0;
}
div#properties dt {
    font-weight: bold;
    border-top: 1px solid #000;
    background-color: #eee;
}
div#properties dd {
    margin-left: 0;
}
</style>

<div id="images">
    <h1>View</h1>
    <div class="current-slide">
        <a class="load-slide" href="#" data-url="{{ slide_url }}"
                data-mpp="{{ slide_mpp }}">Slide</a>
    </div>
    <h2>Associated images</h2>
    {% if associated %}
        <ul class="associated-images">
            {% for name in associated|sort %}
                <li><a class="load-slide" href="#"
                        data-url="{{ associated[name] }}">
                    {{ name }}
                </a>
            {% endfor %}
        </ul>
    {% else %}
        <span class="associated-images notice">None</span>
    {% endif %}
</div>
<div id="view"></div>
<div id="properties">
    <h1>Slide properties</h1>
    {% if properties %}
        <div id="properties-inner">
            <dl>
            {% for name in properties %}
                <dt>{{ name }}
                <dd>{{ properties[name] }}
            {% endfor %}
            </dl>
        </div>
    {% else %}
        <span class="notice">None</span>
    {% endif %}
</div>

<script src="static/jquery.js"></script>
<script src="static/openseadragon.js"></script>
<script src="static/openseadragon-scalebar.js"></script>
<script>
$(function() {
    var dzi_data = {{ dzi_data|default('{}')|safe }};
    var viewer = new OpenSeadragon({
        id: "view",
        prefixUrl: "static/images/",
        timeout: 120000,
        animationTime: 0.5,
        blendTime: 0.1,
        constrainDuringPan: true,
        maxZoomPixelRatio: 2,
        minZoomImageRatio: 1,
        visibilityRatio: 1,
        zoomPerScroll: 2,
    });
    viewer.scalebar({
        xOffset: 10,
        yOffset: 10,
        barThickness: 3,
        color: '#555555',
        fontColor: '#333333',
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
    });

    function open_slide(url, mpp) {
        var tile_source;
        if (dzi_data[url]) {
            // DZI XML provided as template argument (deepzoom_tile.py)
            tile_source = new OpenSeadragon.DziTileSource(
                    OpenSeadragon.DziTileSource.prototype.configure(
                    OpenSeadragon.parseXml(dzi_data[url]), url));
        } else {
            // DZI XML fetched from server (deepzoom_server.py)
            tile_source = url;
        }
        viewer.open(tile_source);
        viewer.scalebar({
            pixelsPerMeter: mpp ? (1e6 / mpp) : 0,
        });
    }

    open_slide("{{ slide_url }}", parseFloat('{{ slide_mpp }}'));
    $(".load-slide").on("click", function(ev) {
        $(".current-slide").removeClass("current-slide");
        $(this).parent().addClass("current-slide");
        open_slide($(this).attr('data-url'),
                parseFloat($(this).attr('data-mpp')));
        ev.preventDefault();
    });
});
</script>
