{% extends "tileserver/base.html" %}

{% block content %}

{% include 'tileserver/_include/cesium.html' %}

<div class="slidecontainer" id="opacityTool">
  <label for="rasterOpacityRange">Raster Layers 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;">
</div>

<style>
  #slider {
    position: absolute;
    left: 50%;
    top: 0px;
    background-color: #d3d3d3;
    width: 5px;
    height: 100%;
    z-index: 99999;
  }

  #slider:hover {
    cursor: ew-resize;
  }
</style>

<script>
  // Set up Cesium split view
  // https://sandcastle.cesium.com/?src=Imagery%20Layers%20Split.html
  var cesiumContainer = document.getElementById('cesiumContainer');
  var slider = document.createElement('div');
  slider.className = 'slider';
  slider.id = 'slider';
  cesiumContainer.appendChild(slider)

  viewer.scene.imagerySplitPosition =
    slider.offsetLeft / slider.parentElement.offsetWidth;
  var handler = new Cesium.ScreenSpaceEventHandler(slider);
  var moveActive = false;

  function move(movement) {
    if (!moveActive) {
      return;
    }

    var relativeOffset = movement.endPosition.x;
    var splitPosition =
      (slider.offsetLeft + relativeOffset) /
      slider.parentElement.offsetWidth;
    slider.style.left = 100.0 * splitPosition + "%";
    viewer.scene.imagerySplitPosition = splitPosition;
  }

  handler.setInputAction(function() {
    moveActive = true;
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  handler.setInputAction(function() {
    moveActive = true;
  }, Cesium.ScreenSpaceEventType.PINCH_START);

  handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

  handler.setInputAction(function() {
    moveActive = false;
  }, Cesium.ScreenSpaceEventType.LEFT_UP);
  handler.setInputAction(function() {
    moveActive = false;
  }, Cesium.ScreenSpaceEventType.PINCH_END);

  // Add tile layers to scene
  var params = new URLSearchParams(window.location.search);
  var filenameA = params.get('filenameA');
  var filenameB = params.get('filenameB');

  var tileProvider;
  var tileLayerA;
  var tileLayerB;
  var layers = viewer.scene.imageryLayers;

  var tileUrlA = `${host}/api/tiles/{z}/{x}/{y}.png?projection=EPSG:3857&filename=${filenameA}`;
  var tileUrlB = `${host}/api/tiles/{z}/{x}/{y}.png?projection=EPSG:3857&filename=${filenameB}`;

  fetch(`${host}/api/metadata?filename=${filenameA}`)
    .then(response => response.json())
    .then(data => {
      var extents = data["bounds"];
      var rectangle = Cesium.Rectangle.fromDegrees(extents.xmin, extents.ymin, extents.xmax, extents.ymax)

      var tileProvider = new Cesium.UrlTemplateImageryProvider({
        url: tileUrlA,
        subdomains: null,
        rectangle: rectangle,
      });
      tileLayerA = layers.addImageryProvider(tileProvider);
      tileLayerA.splitDirection = Cesium.ImagerySplitDirection.LEFT;

      viewer.camera.flyTo({
        destination: rectangle,
      });
    });

  fetch(`${host}/api/metadata?filename=${filenameB}`)
    .then(response => response.json())
    .then(data => {
      var extents = data["bounds"];
      var rectangle = Cesium.Rectangle.fromDegrees(extents.xmin, extents.ymin, extents.xmax, extents.ymax)

      var tileProvider = new Cesium.UrlTemplateImageryProvider({
        url: tileUrlB,
        subdomains: null,
        rectangle: rectangle,
      });
      tileLayerB = layers.addImageryProvider(tileProvider);
      tileLayerB.splitDirection = Cesium.ImagerySplitDirection.RIGHT;

      viewer.camera.flyTo({
        destination: rectangle,
      });
    });

  function updateTilesOpacity(e, value) {
    value = Number(value) / 100.0;
    tileLayerA.alpha = value;
    tileLayerB.alpha = value;
  }
</script>

{% endblock %}
