<!doctype html>
<meta charset="utf-8">
<title>{{ slide_filename }}</title>

<style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0;
    padding: 0;
}
div#view {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
}
</style>

<div id="view"></div>

<script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='openseadragon.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='openseadragon-scalebar.js') }}"></script>
<script type="text/javascript">
$(function() {
    var viewer = new OpenSeadragon({
        id: "view",
        tileSources: "{{ slide_url }}",
        prefixUrl: "{{ url_for('static', filename='images/') }}",
        showNavigator: true,
        showRotationControl: true,
        animationTime: 0.5,
        blendTime: 0.1,
        constrainDuringPan: true,
        maxZoomPixelRatio: 2,
        minZoomImageRatio: 1,
        visibilityRatio: 1,
        zoomPerScroll: 2,
        timeout: 120000,
    });

    var mpp = parseFloat("{{ slide_mpp }}");
    viewer.scalebar({
        pixelsPerMeter: mpp ? (1e6 / mpp) : 0,
        xOffset: 10,
        yOffset: 10,
        barThickness: 3,
        color: '#555555',
        fontColor: '#333333',
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
    });
});
</script>
