<html>
<head>
  <title>Simple pdf.js page viewer</title>
  <script type="application/javascript;version=1.8"
          src="pdf.js"></script>
  <style type"text/css">
#viewer {
  padding: 5px;
  border: 5px solid black;
  width: 8.5in;
  height: 11in;
}
  </style>

  <script type="application/javascript;version=1.8">
var canvas, numPages, pageDisplay, pageNum;
function load() {
    canvas = document.getElementById("canvas");
    pageDisplay = document.getElementById("pageNumber");
    numPages = tests.length;
    displayPage(pageNum = 0);
}

function displayPage(number) {
    var page = tests[number].objs;
    pageDisplay.value = number;

    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    var gfx = new CanvasGraphics(ctx, 96.0, 96.0, null);
    var interp = new Interpreter(null, null, null, gfx);
    interp.interpretHelper(new MockParser(page));
    ctx.restore();
}

function nextPage() {
    pageNum = (pageNum + 1) % numPages;
    displayPage(pageNum);
}

function prevPage() {
    pageNum = (pageNum - 1 + numPages) % numPages;
    displayPage(pageNum);
}
  </script>
</head>

<body onload="load();">
  <div>
    <button onclick="prevPage();">Previous</button>
    <input type="text" id="pageNumber" value="0"></input>
    <button onclick="nextPage();">Next</button>
  <div id="viewer">
    <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
      -- are always 96 dpi.  These dimensions are 8.5x11in at 96dpi. -->
    <canvas id="canvas" width="816" height="1056"></canvas>
  </div>
</body>

</html>