<!DOCTYPE html>
<html>
<head>
    <title>OpenSeadragon Demo - Legacy image pyramid</title>
    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
    <script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
    <style type="text/css">

        .openseadragon1 {
            width: 800px;
            height: 600px;
        }

    </style>
</head>
<body>
<div>
    Use an array of full images at different sizes.
</div>
<div id="contentDiv" class="openseadragon1"></div>
<script type="text/javascript">

    var viewer = OpenSeadragon({
        // debugMode: true,
        id: "contentDiv",
        prefixUrl: "../../build/openseadragon/images/",
        tileSources: {
            type: 'legacy-image-pyramid',
            levels:[{
                url: '/test/data/iiif_2_0_sizes/full/400,/0/default.jpg',
                height: 291,
                width:  400
            },{
                url: '/test/data/iiif_2_0_sizes/full/800,/0/default.jpg',
                height: 582,
                width:  800
            },{
                url: '/test/data/iiif_2_0_sizes/full/1600,/0/default.jpg',
                height: 1164,
                width:  1600
            },{
                url: '/test/data/iiif_2_0_sizes/full/3200,/0/default.jpg',
                height: 2328,
                width:  3200
            },{
                url: '/test/data/iiif_2_0_sizes/full/6976,/0/default.jpg',
                height: 5074,
                width:  6976
            }]
        },
        showNavigator:true
    });

</script>
</body>
</html>