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

{% block title %}
Display
{% endblock title %}

{% endif %}

{% block head %}

  <!-- Externals -->
  <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.flot.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.min.js"></script>
  <script src="/static/js9/js9plugins.js"></script>

{% endblock head %}

{% set included = True %}

{% block content %}


<div id="display" class="form mt-2 row">

  <div class="col">
    <div class="JS9Menubar"></div>
    {% include "toolbar.html" %}
    <div class="JS9"></div>
  </div>

  <fieldset>

    <div class="row mt-2">
      <div class="input-group col">
        <button data-control="show-fits" class="btn btn-primary w-100" type="button"
                data-parameter="/static/temp.fits">Display latest</button>
      </div>
      <label for="auto-display" class="col-2 col-form-label">Auto</label>
      <div class="input-group col">
            <span class="input-group-text">
              <input id="auto-display" class="form-check-input mt-0" type="checkbox">
            </span>
      </div>
    </div>

    <aside class="row">
      <small class="col text-success">
        name:
        <var data-status="sequencer-filename"></var>
      </small>
    </aside>

  </fieldset>

  <script>

      JS9.globalOpts.mousetouchZoom = true;
      JS9.globalOpts.mouseActions[1] = "pan the image";
      JS9.globalOpts.mouseActions[2] = "change contrast/bias";

      var params = {refresh: true,
          colormap:"heat",
          // fits2fits:"always",
          // scale:"log",
          // xcen:5294,ycen:6662,
          // xdim:2072,
          // ydim:2063,
          // bin:8,
          // onload:function(im){
          //     im.setScale(0,100);
          //     im.setColormap(6.56,0.04);
          // }
      }

      $('[data-control="show-fits"]').click(function(){
          console.log("click");
          const start = new Date().getTime()/1000.0            
          JS9.Load($(this).data('parameter'), params )
          var diff1 = difftime(start)
          console.log(diff1)
      })

  </script>

  </div>

{% endblock content %}

{% block footer %}
{% endblock footer %}
