<!DOCTYPE html>
<html>
    <head>
        <title>Mirador POC</title>
        <script type="text/javascript" src='../../../build/openseadragon/openseadragon.js'></script>
        <script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="js/main.js"></script>
        <script src="js/page.js"></script>
        <!-- <script src="js/harvard-tilesources.js"></script> -->
        <script src="js/openseadragon-svg-overlay.js"></script>
        <style type="text/css">

            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
            }

            body {
                background: #eee;
                overflow: scroll;
            }

            .header {
                height: 30px;
            }

            .nav {
                display: inline-block;
                margin-left: 50px;
            }

            .active {
                background: #ddf;
            }

            .hidden {
                visibility: hidden;
            }

            .openseadragon1 {
                background: white;
            }

            .viewer-position {
                position: absolute;
                left: 0;
                top: 30px;
                right: 0;
                bottom: 0;
            }

            .scroll-cover {
                display: none;
                overflow: scroll;
                z-index: 100;
            }

        </style>
    </head>
    <body>
        <div class="header">
            <button class="thumbs">Thumbnails</button>
            <button class="scroll">Scroll</button>
            <button class="book">Book</button>
            <button class="page">Page</button>
            <label><input class="details" type="checkbox">Show Detail Overlays</label>
            <div class="nav">
                <button class="previous">Previous</button>
                <button class="next">Next</button>
            </div>
        </div>
        <div id="contentDiv" class="openseadragon1 viewer-position"></div>
        <div class="scroll-cover viewer-position">
            <div class="scroll-inner"></div>
        </div>
    </body>
</html>