<html>
  <title>OpenSeadragon Overlay 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: 600px;
    }
    
  </style>
</head>
<body>
  <div id="contentDiv" class="openseadragon1"></div>
  <div id="annotation-div">
    <input type="button" value="Hide Overlay" id="hideOverlay">
    
    <script type="text/javascript">
      
      var viewer = OpenSeadragon({
      id: "contentDiv",
      prefixUrl: "../../build/openseadragon/images/",
      tileSources: "../data/testpattern.dzi",
      });
      
      viewer.addHandler("open", function(event) {
      var elt = document.createElement("div");
      elt.style.background = "green";
      elt.id = "runtime-overlay";
      elt.style.border = "1px solid red";
      viewer.addOverlay( elt, new OpenSeadragon.Rect(0.2, 0.2, 0.75, 0.75)  );
      });
      
      $("#hideOverlay").click(function(){
      $("#runtime-overlay").toggle();
      });
      
    </script>
</body>
</html>