{% block geojs %}
<script src="https://d3js.org/d3-color.v2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojs/1.4.3/geo.min.js"></script>

  <div id="imageViewer" style="width: 100%; height: 100%;"></div>

  <div class="slidecontainer" id="opacityTool">
    <label for="rasterOpacityRange">Raster Layer Opacity: </label>
    <input type="range" min="1" max="100" value="100" class="overlay" id="rasterOpacityRange" onChange="updateTilesOpacity(event, value)" onInput="updateTilesOpacity(event, value)" style="top: 5px; left: 5px;">
    <br />
    {% include 'django_large_image/_include/colors.html' %}
  </div>

<script>
  var containerRef = document.getElementById('imageViewer')
  var imageLayer;
  var viewer;

  fetch(`${host}/${baseEndpoint}/${imageId}/metadata`)
    .then(response => response.json())
    .then(tileinfo => {
      const params = geo.util.pixelCoordinateParams(
        '#imageViewer', tileinfo.sizeX, tileinfo.sizeY, tileinfo.tileWidth, tileinfo.tileHeight);
      params.layer.url = tileUrl;

      viewer = geo.map(params.map);

      viewer.zoomRange({
        // do not set a min limit so that bounds clamping determines min
        min: -Infinity,
        max: 12,
      });

      imageLayer = viewer.createLayer('osm', params.layer);

      var ui = viewer.createLayer('ui');
      // Create a zoom slider widget
      ui.createWidget('slider', {
        position: {
          left: 40,
          top: 40
        }
      });
      bandChange();
    });


  function updateTileLayer() {
    imageLayer.url(tileUrl);
  }

  function updateTilesOpacity(e, value) {
    value = Number(value) / 100.0;
    imageLayer.opacity(value);
  }
</script>
{% endblock geojs %}
