<!DOCTYPE html>
<html>
<head>
    <title>OpenSeadragon fitBoundsWithConstraints() Demo</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: 500px;
          border:thin black solid;
          margin-right:20px;
      }
      #buttons button{
        width:10em;
        text-align:center;
        margin:5px;
      }
      .layout{
        display:grid;
        grid-template-columns:auto 1fr;
        padding:10px;
      }
      .method{
        border:medium gray solid;
        margin:2px;
        background-color:rgb(240, 240, 240)
      }
      .method.selected{
        border:medium red solid;
        background-color: lightgoldenrodyellow;
      }
    </style>
</head>
<body>
    <div class="layout">
        <div id="contentDiv" class="openseadragon1"></div>
        <div id="controls">
            <div>
                Simple demo page to show viewport.fitBounds() with and without constraints. The viewer
                is set up with visibilityRatio = 1 and constrainDuringPan = true to clearly demonstrate the
                constraints.
            </div>

            <h3>Pick a method to use:</h3>
            <div>
                <div class="method selected" data-value="0">
                    <pre>viewport.fitBounds(bounds); //Ignores constraints</pre>
                </div>
                <div class="method" data-value="1">
                    <pre>viewport.fitBoundsWithConstraints(bounds);</pre>
                </div>
                <div class="method" data-value="4">
                    <pre>viewport.fitBoundsWithConstraints(bounds, true); //immediate</pre>
                </div>
                <div class="method" data-value="2">
                    <pre>//Initially ignore constraints
viewport.fitBounds(bounds);

//Apply constraints after 1 second delay
setTimeout(() => viewport.applyConstraints(), 1000);</pre>
                </div>
            </div>
            <button id="rotate">Rotate the viewer</button>
            <h3>Click to fit overlay bounds:</h3>
            <div id="buttons"></div>
            <h4>overlay.getBounds(viewer.viewport):</h4>
            <pre class="bounds">Pick an overlay above to show the bounds</pre>
        </div>
    </div>


    <script type="text/javascript">

        var viewer;
        var _fittingMethod = 0;
        viewer = window.viewer = OpenSeadragon({
            id: "contentDiv",
            prefixUrl: "../../build/openseadragon/images/",
            tileSources: "../data/testpattern.dzi",
            minZoomImageRatio: 0,
            maxZoomPixelRatio: 10,
            visibilityRatio:1,
            constrainDuringPan:true,
        });

        viewer.addHandler("open", function(event) {
            var elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "green";
            elt.style.outline = "3px solid red";
            elt.style.opacity = "0.7";
            elt.textContent = "Within the image";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Rect(0.21, 0.21, 0.099, 0.299),
                rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
            });

            elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "white";
            elt.style.opacity = "0.5";
            elt.style.outline = "5px solid pink";
            elt.textContent = "Left edge rectangle";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Rect(-0.4, 0.7, 0.7, 0.15)
            });

            var elt = document.createElement("div");
            elt.className = "runtime-overlay";
            elt.style.background = "lightblue";
            elt.style.outline = "3px solid purple";
            elt.style.opacity = "0.7";
            elt.textContent = "Top right square";
            viewer.addOverlay({
                element: elt,
                location: new OpenSeadragon.Rect(0.9, -0.1, 0.2, 0.2),
                rotationMode: OpenSeadragon.OverlayRotationMode.BOUNDING_BOX
            });

            viewer.currentOverlays.forEach(overlay=>{
                var text = $(overlay.element).text();
                var div=$('<div>').appendTo('#buttons');
                var buttons=$('<button>').text(text).appendTo(div).on('click',()=>{

                    var bounds = overlay.getBounds(viewer.viewport);
                    $('.bounds').text(JSON.stringify(bounds,null,2));

                    var _fittingMethod = parseInt($('.method.selected').data('value'));

                    if (_fittingMethod === 0) {
                        viewer.viewport.fitBounds(bounds, false);
                    }
                    else if (_fittingMethod === 1) {
                        viewer.viewport.fitBoundsWithConstraints(bounds, false);
                    }
                    else if (_fittingMethod === 4) {
                        viewer.viewport.fitBoundsWithConstraints(bounds, true);
                    }
                    else if (_fittingMethod === 2) {
                        viewer.viewport.fitBounds(bounds, false);
                        setTimeout(()=>viewer.viewport.applyConstraints(), 1000);
                    }
                });
            })

            viewer.viewport.zoomTo(0.5, null, true);


        });
        $('.method').on('click',function(){
            $('.method').removeClass('selected');
            $(this).addClass('selected');
        })
        $("#rotate").click(function() {
            viewer.viewport.setRotation(viewer.viewport.getRotation() - 22.5);
            $("#degrees").text(viewer.viewport.getRotation() + "deg");
        });

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