<!doctype html>
<html>
<head>
    <title>{{title}}</title>
    <style>
      body {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
        border: 0;
        overflow: hidden;  /* disable scrollbars */
        display: block; /* no floating content on sides */
      }
      #{{v_id}} {
        margin-left: auto;
        margin-right: auto;
      }
    </style>
    <meta name="viewport" 
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
    <script type="text/javascript" src="/js/application.js"></script>
    <script type="text/javascript">
        var wid = "%(wid)s";
        var url = "%(url)s";
        var ws_url = "ws://" + window.location.host + "/app/socket?wid=%(wid)s";
        var ginga_app = ginga_make_application(ws_url);
    </script>
    <canvas id="{{v_id}}">Your browser does not appear to
support HTML5 canvas.</canvas>
    <script type="text/javascript">
        var canvas_id = "{{v_id}}"
        var canvas = document.getElementById("{{v_id}}")
        var trimBy = 0;
        var fullWidth = document.documentElement.clientWidth - trimBy;
        var fullHeight = document.documentElement.clientHeight - trimBy;
        canvas.width = {{width}};
        canvas.height = {{height}};
        canvas.style.cursor = 'crosshair';
        ginga_initialize_canvas(canvas, canvas_id, ginga_app);
    </script>
</body>
</html>
