{% if not included %}
{% extends 'index.html' %}
{% endif %}

{% set included = True %}

{% block content %}

<link href="/static/js9/js9support.css" rel="stylesheet">
<link href="/static/js9/js9.css" rel="stylesheet">

<script src="/static/js9/sprintf.min.js"></script>
<!-- <script src="/static/js9/jquery-ui.min.js"></script> -->
<script src="/static/js9/jquery.contextMenu.min.js"></script>
<script src="/static/js9/fabric.min.js"></script>
<script src="/static/js9/dhtmlwindow.min.js"></script>
<script src="/static/js9/js9prefs.js"></script>
<!-- <script src="/static/js9/js9.js"></script> -->
<script src="/static/js9/js9.min.js"></script>
<script src="/static/js9/js9plugins.js"></script>

  <section class="row">

    <div class="JS9Menubar"></div>
    <div class="JS9"></div>

    <!-- <button class="btn btn-primary" data-filename="/static/test.fits">small</button> -->
    <button class="btn btn-primary" data-filename="/static/temp.fits">8.2MB</button>
    <!-- <button class="btn btn-primary" data-filename="/static/OARPAF.2022-04-29T22:49:43.000.fits">33MB</button> -->
    
    <!-- <button class="btn btn-primary" data-filename="{{data}}">large</button> -->

    <script>
      $("button").click(function(){
          console.log("click");
          JS9.Load($(this).data('filename'))
          // $.get('fits', function(d){
          //      JS9.Load(d)
          //      //     var blob = new Blob([d], { type: 'image/fits' });
          //      //     JS9.Load(blob)
          //  })
      })
    </script>
    
  </section>

{% endblock content %}