(function () {
  const DEFAULT_MODEL = "gfs-025";
  const PUBLISHED_REGION = String(window.IWIND_FORECAST_DEFAULT_REGION || "europe");
  const WORLD_REGION = "world";
  const WORLD_TILE_MIN_ZOOM = 0;
  const WORLD_TILE_MAX_ZOOM = 8;
  const WORLD_TILE_DISPLAY_MAX_ZOOM = 12;
  const FORECAST_REGIONS = Array.isArray(window.IWIND_FORECAST_REGIONS) ? window.IWIND_FORECAST_REGIONS : [];
  const FORECAST_MODEL_LABELS = {
    "gfs-025": "GFS0.25°",
    "icon-d2": "ICON-D2",
    "icon-eu": "ICON-EU",
    "ecmwf": "ECMWF",
  };

  const qs = new URLSearchParams(window.location.search);
  const REQUESTED_REGION = String(qs.get("region") || window.IWIND_FORECAST_DEMO_DEFAULT_REGION || "").trim();
  const apiOrigin =
    window.location.hostname === "www.iwind.at" || window.location.hostname === "iwind.at"
      ? "https://weather.iwind.at"
      : "";

  const dom = {
    modelSelect: document.getElementById("modelSelect"),
    basemapSelect: document.getElementById("basemapSelect"),
    opacityRange: document.getElementById("opacityRange"),
    opacityValue: document.getElementById("opacityValue"),
    threadsToggle: document.getElementById("threadsToggle"),
    threadsDensityRange: document.getElementById("threadsDensityRange"),
    threadsDensityValue: document.getElementById("threadsDensityValue"),
    threadsLengthRange: document.getElementById("threadsLengthRange"),
    threadsLengthValue: document.getElementById("threadsLengthValue"),
    threadsSpeedRange: document.getElementById("threadsSpeedRange"),
    threadsSpeedValue: document.getElementById("threadsSpeedValue"),
    threadsWidthRange: document.getElementById("threadsWidthRange"),
    threadsWidthValue: document.getElementById("threadsWidthValue"),
    threadsFadeRange: document.getElementById("threadsFadeRange"),
    threadsFadeValue: document.getElementById("threadsFadeValue"),
    reloadButton: document.getElementById("reloadButton"),
    followPointButton: document.getElementById("followPointButton"),
    runValue: document.getElementById("runValue"),
    validValue: document.getElementById("validValue"),
    timelineLabel: document.getElementById("timelineLabel"),
    timelineMeta: document.getElementById("timelineMeta"),
    prevButton: document.getElementById("prevButton"),
    playButton: document.getElementById("playButton"),
    nextButton: document.getElementById("nextButton"),
    timeRange: document.getElementById("timeRange"),
    timelineTicks: document.getElementById("timelineTicks"),
    pointPanel: document.getElementById("pointPanel"),
    pointTitle: document.getElementById("pointTitle"),
    pointSubtitle: document.getElementById("pointSubtitle"),
    pointCurrent: document.getElementById("pointCurrent"),
    pointSeries: document.getElementById("pointSeries"),
    resetViewButton: document.getElementById("resetViewButton"),
    openMainMapButton: document.getElementById("openMainMapButton"),
    viewStateValue: document.getElementById("viewStateValue"),
  };

  const DEMO_VIEW_STORAGE_KEY = "iwind:forecast-demo:view:v1";
  const jawgToken = "jgKifz7zUmdACbcf8eWvpk4jwVNtCykl7prTVhb7NKPMOmqitsVSEVp1Oc1mhGk6";
  const jawgAttribution = '<a href="https://jawg.io?utm_medium=map&utm_source=attribution" target="_blank" rel="noopener">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">&copy; OpenStreetMap</a>';
  const jawgBaseOptions = {
    attribution: jawgAttribution,
    maxZoom: 22,
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
    crossOrigin: true,
  };

  const state = {
    model: qs.get("model") || DEFAULT_MODEL,
    manifest: null,
    entries: [],
    activeIndex: 0,
    region: REQUESTED_REGION || PUBLISHED_REGION,
    basemapKey: "carto-light",
    hasFocusedDataBounds: false,
    hasPinnedInitialView: false,
    latestGridBounds: null,
    latestParticleBounds: null,
    activeSurfaceKey: "",
    surfaceAbortController: null,
    surfaceRequestId: 0,
  };
  let timelineController = null;
  let panelShell = null;
  let pointInteraction = null;
  let forecastData = null;

  function parseFinite(value, fallback) {
    const num = Number(value);
    return Number.isFinite(num) ? num : fallback;
  }

  function setPointPanelOpen(open) {
    if (panelShell) {
      panelShell.setPointPanelOpen(open);
    }
  }

  function readStoredViewState() {
    try {
      const raw = window.localStorage.getItem(DEMO_VIEW_STORAGE_KEY);
      if (!raw) return null;
      const parsed = JSON.parse(raw);
      return parsed && typeof parsed === "object" ? parsed : null;
    } catch (_) {
      return null;
    }
  }

  const storedView = readStoredViewState();
  const initialLat = parseFinite(qs.get("lat"), parseFinite(storedView && storedView.lat, 47.5));
  const initialLng = parseFinite(qs.get("lng"), parseFinite(storedView && storedView.lng, 14.0));
  const initialZoom = parseFinite(qs.get("z"), parseFinite(storedView && storedView.z, 6));
  const requestedBaseKey = String(qs.get("base") || (storedView && storedView.base) || "carto-light").trim();
  state.basemapKey = requestedBaseKey || "carto-light";
  state.hasPinnedInitialView = qs.has("lat") || qs.has("lng") || qs.has("z") || !!storedView;

  dom.modelSelect.value = state.model;

  const standard = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
    attribution: '&copy; <a href="https://carto.com/">CartoDB</a>',
    subdomains: "abcd",
    maxZoom: 19,
    updateWhenIdle: true,
    updateWhenZooming: false,
    keepBuffer: 2,
    crossOrigin: true,
  });
  const satellite = L.tileLayer("https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
    subdomains: ["mt0", "mt1", "mt2", "mt3"],
    attribution: "&copy; Google Maps",
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const openTopoMap = L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
    maxZoom: 17,
    attribution: "© OpenTopoMap (CC-BY-SA), © OpenStreetMap contributors",
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const esriTopo = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", {
    attribution: "Tiles &copy; Esri",
    maxZoom: 17,
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const openMapTiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; OpenStreetMap contributors",
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const jawgTerrain = L.tileLayer(`https://tile.jawg.io/jawg-terrain/{z}/{x}/{y}{r}.png?access-token=${jawgToken}`, jawgBaseOptions);
  const esriWorldImagery = L.layerGroup([
    L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
      attribution: "&copy; Esri World Imagery",
      maxZoom: 18,
    }),
    L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}", {
      attribution: "&copy; Esri Labels",
      maxZoom: 18,
    }),
  ]);

  const baseLayersByKey = {
    "carto-light": standard,
    satellite: satellite,
    "open-topo": openTopoMap,
    "esri-topo": esriTopo,
    openmaptiles: openMapTiles,
    "jawg-terrain": jawgTerrain,
    "esri-3d": esriWorldImagery,
  };

  const initialBaseLayer = baseLayersByKey[state.basemapKey] || standard;

  const map = L.map("map", {
    zoomControl: true,
    preferCanvas: true,
    zoomSnap: 1,
    zoomDelta: 1,
    worldCopyJump: false,
    layers: [initialBaseLayer],
  }).setView([initialLat, initialLng], initialZoom);

  if (dom.basemapSelect) {
    dom.basemapSelect.value = baseLayersByKey[state.basemapKey] ? state.basemapKey : "carto-light";
  }

  L.control.scale({ imperial: false }).addTo(map);

  const windColorPane = map.createPane("windColor");
  windColorPane.style.zIndex = "450";
  windColorPane.style.pointerEvents = "none";
  windColorPane.style.mixBlendMode = "normal";
  windColorPane.style.opacity = "1";

  let forecastLayer = L.tileLayer("", {
    opacity: parseInt(dom.opacityRange.value, 10) / 100,
    className: "forecast-tiles",
    pane: "windColor",
    crossOrigin: true,
    updateWhenIdle: true,
    keepBuffer: 2,
    maxZoom: 19,
  });

  let gridFallbackLayer = null;
  const particles = L.windParticlesLayer ? L.windParticlesLayer(null, {
    active: true,
    particleCount: Number(dom.threadsDensityRange.value),
    speedScale: Number(dom.threadsLengthRange.value) / 100,
    velocityScale: Number(dom.threadsSpeedRange.value) / 100,
    fadeAlpha: Number(dom.threadsFadeRange.value) / 100,
    lineWidth: Number(dom.threadsWidthRange.value),
    minSpeed: 0.2,
    useColors: true,
    color: "rgba(22, 87, 128, 0.3)",
  }) : null;
  if (particles) {
    particles.addTo(map);
  }

  function parseForecastDate(value) {
    if (!value) return null;
    if (/^\d{8}T\d{6}Z$/.test(value)) {
      const iso = value.slice(0, 4) + "-" + value.slice(4, 6) + "-" + value.slice(6, 8) +
        "T" + value.slice(9, 11) + ":" + value.slice(11, 13) + ":" + value.slice(13, 15) + "Z";
      return new Date(iso);
    }
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? null : date;
  }

  function formatDateLabel(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    return date.toLocaleString(undefined, {
      weekday: "short",
      day: "2-digit",
      month: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    });
  }

  function formatTimelineHour(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    return date.toLocaleTimeString(undefined, {
      hour: "2-digit",
      minute: "2-digit",
    });
  }

  function timelineDayKey(value) {
    const date = parseForecastDate(value);
    if (!date) return "unknown";
    return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0");
  }

  function formatTimelineDayCompact(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    const weekday = date.toLocaleDateString(undefined, { weekday: "long" });
    const day = String(date.getDate()).padStart(2, "0");
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const year = String(date.getFullYear()).slice(-2);
    return weekday + ", " + day + "." + month + "." + year;
  }

  function formatTimelineLabelCompact(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    const weekday = date.toLocaleDateString(undefined, { weekday: "short" }).replace(/\.$/, "").toUpperCase();
    return weekday + " " + date.getDate() + "." + (date.getMonth() + 1) + ". " + formatTimelineHour(value);
  }

  function formatForecastModelLabel(modelKey) {
    const key = String(modelKey || "").trim().toLowerCase();
    if (FORECAST_MODEL_LABELS[key]) return FORECAST_MODEL_LABELS[key];

    return key
      ? key.replace(/-/g, " ").replace(/\b\w/g, function (char) { return char.toUpperCase(); })
      : "Forecast";
  }

  function activeBasemapKey() {
    return baseLayersByKey[state.basemapKey] ? state.basemapKey : "carto-light";
  }

  function buildDemoUrl() {
    const url = new URL(window.location.pathname, window.location.origin);
    const center = map.getCenter();
    url.searchParams.set("model", state.model);
    url.searchParams.set("lat", center.lat.toFixed(6));
    url.searchParams.set("lng", center.lng.toFixed(6));
    url.searchParams.set("z", String(Math.round(map.getZoom())));
    url.searchParams.set("base", activeBasemapKey());
    if (REQUESTED_REGION || (state.region && state.region !== PUBLISHED_REGION)) {
      url.searchParams.set("region", REQUESTED_REGION || state.region);
    }
    return url;
  }

  function buildMainMapUrl() {
    const url = new URL("/map", window.location.origin);
    const center = map.getCenter();
    url.searchParams.set("lat", center.lat.toFixed(6));
    url.searchParams.set("lng", center.lng.toFixed(6));
    url.searchParams.set("z", String(Math.round(map.getZoom())));
    url.searchParams.set("base", activeBasemapKey());
    return url.toString();
  }

  function updateViewStateUi() {
    if (!dom.viewStateValue) return;
    const center = map.getCenter();
    dom.viewStateValue.textContent =
      activeBasemapKey() + " | z" + Math.round(map.getZoom()) + " | " +
      center.lat.toFixed(2) + ", " + center.lng.toFixed(2);
  }

  function persistDemoView() {
    const center = map.getCenter();
    const payload = {
      lat: Number(center.lat.toFixed(6)),
      lng: Number(center.lng.toFixed(6)),
      z: Math.round(map.getZoom()),
      base: activeBasemapKey(),
    };
    try {
      window.localStorage.setItem(DEMO_VIEW_STORAGE_KEY, JSON.stringify(payload));
    } catch (_) {}
    try {
      window.history.replaceState({}, "", buildDemoUrl().toString());
    } catch (_) {}
    if (dom.openMainMapButton) {
      dom.openMainMapButton.dataset.targetUrl = buildMainMapUrl();
    }
    updateViewStateUi();
  }

  function setBasemap(key, persist) {
    const nextKey = baseLayersByKey[key] ? key : "carto-light";
    state.basemapKey = nextKey;

    Object.keys(baseLayersByKey).forEach(function (layerKey) {
      const layer = baseLayersByKey[layerKey];
      if (layerKey === nextKey) {
        if (!map.hasLayer(layer)) map.addLayer(layer);
      } else if (map.hasLayer(layer)) {
        map.removeLayer(layer);
      }
    });

    if (dom.basemapSelect) {
      dom.basemapSelect.value = nextKey;
    }

    if (persist !== false) {
      persistDemoView();
    } else {
      updateViewStateUi();
    }
  }

  function createAbortError() {
    try {
      return new DOMException("Surface request superseded", "AbortError");
    } catch (_) {
      const error = new Error("Surface request superseded");
      error.name = "AbortError";
      return error;
    }
  }

  function entrySurfaceKey(entry) {
    if (!entry) return "";
    if (entry.source === "published-bin") {
      return String(entry.binary || entry.valid || "");
    }
    return String(entry.tiles || entry.vector || entry.valid || "");
  }

  function ensureLatestSurfaceRequest(requestId, signal) {
    if ((signal && signal.aborted) || requestId !== state.surfaceRequestId) {
      throw createAbortError();
    }
  }

  function setActiveIndex(nextIndex, options) {
    if (!state.entries.length) return;
    const opts = options || {};
    const size = state.entries.length;
    const normalized = ((nextIndex % size) + size) % size;
    const changed = normalized !== state.activeIndex;
    state.activeIndex = normalized;

    const entry = state.entries[normalized];
    if (timelineController) {
      timelineController.refreshActive(entry, opts);
    }

    if (!changed && opts.fromScroll) return;
    if (!changed && state.activeSurfaceKey === entrySurfaceKey(entry)) return;

    preloadNextTile();
    requestSurfaceSync(entry).catch(function (error) {
      if (error && error.name === "AbortError") {
        return;
      }

      if (entry && entry.source === "published-bin") {
        findFirstUsableEntryIndex(normalized + 1).then(function (fallbackIndex) {
          if (fallbackIndex >= 0 && fallbackIndex !== normalized) {
            setActiveIndex(fallbackIndex, { center: true, recovered: true });
            return;
          }

          dom.timelineLabel.textContent = "Forecast konnte nicht geladen werden";
          dom.timelineMeta.textContent = "Keine gueltige Forecast-Datei fuer diesen Zeitpunkt gefunden.";
        });
        return;
      }

      if (entry && entry.tiles && surfaceZoomAllowed(entry)) {
        forecastLayer.setUrl(forecastData.toAbsolute(entry.tiles));
      } else {
        clearSurfaceLayer();
      }
    });

    if (pointInteraction) {
      pointInteraction.handleActiveEntryChange();
    }
  }

  async function requestSurfaceSync(entry) {
    if (state.surfaceAbortController) {
      state.surfaceAbortController.abort();
    }

    const controller = new AbortController();
    const requestId = state.surfaceRequestId + 1;
    state.surfaceAbortController = controller;
    state.surfaceRequestId = requestId;

    try {
      await syncSurface(entry, {
        signal: controller.signal,
        requestId: requestId,
      });
      ensureLatestSurfaceRequest(requestId, controller.signal);
      state.activeSurfaceKey = entrySurfaceKey(entry);
    } finally {
      if (state.surfaceAbortController === controller) {
        state.surfaceAbortController = null;
      }
    }
  }

  function preloadNextTile() {
    if (state.entries.length < 2) return;
    const nextEntry = state.entries[(state.activeIndex + 1) % state.entries.length];
    if (!nextEntry || nextEntry.source === "published-bin" || !nextEntry.tiles) return;
    if (!surfaceZoomAllowed(nextEntry)) return;
    const center = map.getCenter();
    const zoom = surfaceRequestZoom(nextEntry);
    const tilePoint = map.project(center, zoom).divideBy(256).floor();
    const url = forecastData.toAbsolute(nextEntry.tiles)
      .replace("{z}", String(zoom))
      .replace("{x}", String(tilePoint.x))
      .replace("{y}", String(tilePoint.y));
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.src = url;
  }

  function updateOpacity() {
    const value = parseInt(dom.opacityRange.value, 10);
    dom.opacityValue.textContent = value + "%";
    forecastLayer.setOpacity(value / 100);
    if (gridFallbackLayer) {
      if (typeof gridFallbackLayer.setOpacity === "function") {
        gridFallbackLayer.setOpacity(value / 100);
      } else {
        gridFallbackLayer.options.fillOpacity = value / 100;
        if (typeof gridFallbackLayer._draw === "function") {
          gridFallbackLayer._draw();
        }
      }
    }
  }

  function updateParticlesUi() {
    dom.threadsDensityValue.textContent = dom.threadsDensityRange.value;
    dom.threadsLengthValue.textContent = dom.threadsLengthRange.value;
    dom.threadsSpeedValue.textContent = dom.threadsSpeedRange.value + "%";
    dom.threadsWidthValue.textContent = Number(dom.threadsWidthRange.value).toFixed(1) + " px";
    dom.threadsFadeValue.textContent = dom.threadsFadeRange.value + "%";
  }

  function updateParticleOptions() {
    updateParticlesUi();
    if (!particles) return;
    particles.setOptions({
      active: !!dom.threadsToggle.checked,
      particleCount: Number(dom.threadsDensityRange.value),
      speedScale: Number(dom.threadsLengthRange.value) / 100,
      velocityScale: Number(dom.threadsSpeedRange.value) / 100,
      fadeAlpha: Number(dom.threadsFadeRange.value) / 100,
      lineWidth: Number(dom.threadsWidthRange.value),
    });
  }

  function escapeHtml(value) {
    return String(value)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  function regionArea(region) {
    if (!region) return Number.POSITIVE_INFINITY;
    return Math.max(0, Number(region.east) - Number(region.west)) * Math.max(0, Number(region.north) - Number(region.south));
  }

  function normalizeLongitude(value) {
    let lng = Number(value);
    if (!Number.isFinite(lng)) return lng;
    while (lng > 180) lng -= 360;
    while (lng < -180) lng += 360;
    return lng;
  }

  function regionContainsLatLng(region, latlng) {
    if (!region || !latlng) return false;
    const lat = Number(latlng.lat);
    const lng = normalizeLongitude(latlng.lng);
    if (region.key === "mediterranean" && lat > 45.5) {
      return false;
    }
    return lat >= Number(region.south) && lat <= Number(region.north) && lng >= Number(region.west) && lng <= Number(region.east);
  }

  function resolvePreferredRegion(latlng) {
    if (REQUESTED_REGION) {
      return REQUESTED_REGION;
    }

    const matches = FORECAST_REGIONS
      .filter(function (region) { return regionContainsLatLng(region, latlng); })
      .sort(function (a, b) { return regionArea(a) - regionArea(b); });

    if (matches.length) {
      return matches[0].key || PUBLISHED_REGION;
    }

    return PUBLISHED_REGION;
  }

  function regionQuery(regionKey) {
    const key = String(regionKey || "").trim();
    return key ? "?region=" + encodeURIComponent(key) : "";
  }

  function buildRegionFallbackChain(preferredRegion, defaultRegion) {
    if (String(preferredRegion || "").trim() === WORLD_REGION) {
      return [WORLD_REGION];
    }

    return [preferredRegion, WORLD_REGION, defaultRegion].filter(function (regionKey, index, list) {
      const key = String(regionKey || "").trim();
      return key && list.findIndex(function (candidate) {
        return String(candidate || "").trim() === key;
      }) === index;
    });
  }

  function isWorldMode() {
    return REQUESTED_REGION === WORLD_REGION || state.region === WORLD_REGION;
  }

  function isWorldTileEntry(entry) {
    if (!entry || !entry.tiles) return false;
    const region = String(entry.region || "").trim();
    const tiles = String(entry.tiles || "");
    return region === WORLD_REGION || tiles.indexOf("/world/") !== -1;
  }

  function configureForecastLayerZoom(entry) {
    if (isWorldTileEntry(entry)) {
      forecastLayer.options.maxNativeZoom = WORLD_TILE_MAX_ZOOM;
      forecastLayer.options.maxZoom = WORLD_TILE_DISPLAY_MAX_ZOOM;
      return;
    }

    delete forecastLayer.options.maxNativeZoom;
    forecastLayer.options.maxZoom = 19;
  }

  function surfaceRequestZoom(entry) {
    const currentZoom = Math.round(map.getZoom());
    if (isWorldTileEntry(entry)) {
      return Math.min(currentZoom, WORLD_TILE_MAX_ZOOM);
    }

    const entryMaxZoom = Number(entry && entry.maxZoom);
    return Number.isFinite(entryMaxZoom)
      ? Math.min(currentZoom, entryMaxZoom)
      : currentZoom;
  }

  function entriesForRegion(entries, regionKey) {
    const list = Array.isArray(entries) ? entries : [];
    if (String(regionKey || "").trim() !== WORLD_REGION) {
      return list;
    }

    return list.filter(isWorldTileEntry);
  }

  async function findFirstUsableEntryIndex(startIndex) {
    if (!state.entries.length) return -1;

    for (let offset = 0; offset < state.entries.length; offset += 1) {
      const index = (startIndex + offset) % state.entries.length;
      const entry = state.entries[index];
      if (!entry) continue;

      if (isWorldMode()) {
        if (isWorldTileEntry(entry)) {
          return index;
        }
        continue;
      }

      if (entry.source !== "published-bin" || !entry.binary) {
        return index;
      }

      if (await forecastData.publishedBinaryExists(entry.binary)) {
        return index;
      }
    }

    return -1;
  }

  async function loadForecast() {
    if (timelineController) {
      timelineController.stop();
    }

    let manifest;
    let entries;
    const preferredRegion = resolvePreferredRegion(map.getCenter());
    const preferApiTimesOnly = preferredRegion === WORLD_REGION;
    state.region = preferredRegion;
    const defaultRegion = PUBLISHED_REGION;
    const fallbackRegions = buildRegionFallbackChain(preferredRegion, defaultRegion);

    try {
      if (preferApiTimesOnly) {
        throw new Error("world region uses api times");
      }

      let publishedError = null;

      for (const regionKey of fallbackRegions) {
        try {
          const latest = await forecastData.fetchJson(
            forecastData.publishedLatestUrlForRegion(state.model, regionKey),
            { cache: "no-store" }
          );
          const publishedManifest = await forecastData.fetchJson(latest.manifest, { cache: "no-store" });
          const publishedEntries = entriesForRegion(
            forecastData.buildEntriesFromPublishedManifest(publishedManifest),
            regionKey
          );
          if (!publishedEntries.length) {
            throw new Error("published manifest has no files");
          }

          manifest = publishedManifest;
          entries = publishedEntries;
          manifest.run = manifest.run_at || manifest.run || latest.run;
          manifest.region = manifest.region || latest.region || regionKey || PUBLISHED_REGION;
          state.region = manifest.region;
          publishedError = null;
          break;
        } catch (error) {
          publishedError = error;
        }
      }

      if (publishedError) {
        throw publishedError;
      }
    } catch (publishedError) {
      let fallbackError = publishedError;
      entries = [];

      for (const regionKey of fallbackRegions) {
        try {
          manifest = await forecastData.fetchJson(
            "/api/forecast/" + encodeURIComponent(state.model) + "/manifest" + regionQuery(regionKey)
          );

          try {
            const resolvedRegion = manifest.region || regionKey || defaultRegion;
            if (resolvedRegion !== WORLD_REGION) {
              const publishedManifestUrl = forecastData.publishedRunManifestUrl(
                state.model,
                manifest.run_key || manifest.run || manifest.run_at || "",
                resolvedRegion
              );
              if (publishedManifestUrl) {
                const publishedManifest = await forecastData.fetchJson(publishedManifestUrl, { cache: "no-store" });
                const publishedEntries = entriesForRegion(
                  forecastData.buildEntriesFromPublishedManifest(publishedManifest),
                  resolvedRegion
                );
                if (publishedEntries.length) {
                  manifest = publishedManifest;
                  manifest.run = manifest.run_key || manifest.run || manifest.run_at;
                  manifest.region = manifest.region || resolvedRegion || PUBLISHED_REGION;
                  entries = publishedEntries;
                  break;
                }
              }
            }
          } catch (_) {
          }

          const times = await forecastData.fetchJson(
            "/api/forecast/" + encodeURIComponent(state.model) + "/times" + regionQuery(regionKey)
          );
          entries = entriesForRegion(Array.isArray(times.valid) ? times.valid : [], regionKey);
          if (entries.length) {
            manifest.region = manifest.region || regionKey || defaultRegion;
            break;
          }
        } catch (error) {
          fallbackError = error;
          entries = [];
        }
      }

      if (!entries.length) {
        throw fallbackError;
      }
    }

    state.manifest = manifest;
    state.region = manifest.region || preferredRegion || PUBLISHED_REGION;
    state.entries = entries;
    state.activeIndex = 0;

    dom.runValue.textContent = formatDateLabel(manifest.run_at || manifest.run || entries[0].valid);
    dom.timeRange.max = String(entries.length - 1);
    dom.timeRange.value = "0";

    if (timelineController) {
      timelineController.renderTicks();
    }
    const firstUsableIndex = await findFirstUsableEntryIndex(0);
    setActiveIndex(firstUsableIndex >= 0 ? firstUsableIndex : 0, { center: true });
  }

  function gridBounds(grid) {
    const south = Math.min(grid.lat0, grid.lat0 + grid.dlat * (grid.nlat - 1));
    const north = Math.max(grid.lat0, grid.lat0 + grid.dlat * (grid.nlat - 1));
    const west = Math.min(grid.lon0, grid.lon0 + grid.dlon * (grid.nlon - 1));
    const east = Math.max(grid.lon0, grid.lon0 + grid.dlon * (grid.nlon - 1));
    return L.latLngBounds([south, west], [north, east]);
  }

  function applyGridFocus(grid) {
    const bounds = gridBounds(grid);
    state.latestGridBounds = bounds;
    state.latestParticleBounds = bounds;
    if (particles && typeof particles.setBounds === "function") {
      particles.setBounds(bounds);
    }
    if (state.hasFocusedDataBounds || state.hasPinnedInitialView) return;
    state.hasFocusedDataBounds = true;
    map.fitBounds(bounds.pad(0.08), {
      animate: false,
      padding: [24, 24],
    });
    persistDemoView();
  }

  function centerTileUrl(tileTemplate, entry) {
    const center = map.getCenter();
    const zoom = surfaceRequestZoom(entry);
    const tilePoint = map.project(center, zoom).divideBy(256).floor();
    return forecastData.toAbsolute(tileTemplate)
      .replace("{z}", String(zoom))
      .replace("{x}", String(tilePoint.x))
      .replace("{y}", String(tilePoint.y));
  }

  function entryRegion(entry) {
    return String((entry && entry.region) || state.region || "").trim();
  }

  function surfaceZoomAllowed(entry) {
    if (!entry || !entry.tiles) return true;
    const minZoom = Number.isFinite(Number(entry.minZoom)) ? Number(entry.minZoom) : null;
    const configuredMaxZoom = Number.isFinite(Number(entry.maxZoom)) ? Number(entry.maxZoom) : null;
    const maxZoom = isWorldTileEntry(entry)
      ? WORLD_TILE_DISPLAY_MAX_ZOOM
      : configuredMaxZoom;
    const zoom = map.getZoom();

    if (minZoom !== null && zoom < minZoom) return false;
    if (maxZoom !== null && zoom > maxZoom) return false;

    return true;
  }

  function clearSurfaceLayer() {
    if (map.hasLayer(forecastLayer)) {
      map.removeLayer(forecastLayer);
    }
    if (gridFallbackLayer && map.hasLayer(gridFallbackLayer)) {
      map.removeLayer(gridFallbackLayer);
    }
  }

  async function tileAvailable(entry, signal) {
    if (!entry || !entry.tiles) return false;
    if (isWorldMode() && !isWorldTileEntry(entry)) return false;
    if (!surfaceZoomAllowed(entry)) return false;
    try {
      const response = await fetch(centerTileUrl(entry.tiles, entry), {
        method: "HEAD",
        cache: "no-store",
        credentials: "same-origin",
        signal: signal,
      });
      return response.ok;
    } catch (_) {
      return false;
    }
  }

  async function syncSurface(entry, runtimeOptions) {
    const opts = runtimeOptions || {};

    if (isWorldMode() && entry && !isWorldTileEntry(entry)) {
      clearSurfaceLayer();
      throw new Error("World forecast entry is not tile-backed");
    }

    if (entry && entry.tiles && !surfaceZoomAllowed(entry)) {
      clearSurfaceLayer();
      if (entryRegion(entry) === WORLD_REGION) {
        dom.timelineMeta.textContent = "World-Windlayer nativ ab Zoom " + WORLD_TILE_MIN_ZOOM + " bis " + WORLD_TILE_MAX_ZOOM + ", sichtbar bis Zoom " + WORLD_TILE_DISPLAY_MAX_ZOOM + ".";
      }
      return;
    }

    if (entry && entry.source === "published-bin" && entry.binary) {
      const binaryExists = await forecastData.publishedBinaryExists(entry.binary, { signal: opts.signal });
      ensureLatestSurfaceRequest(opts.requestId, opts.signal);
      if (!binaryExists) {
        throw new Error("Published binary missing for " + entry.valid);
      }

      const grid = await forecastData.loadPublishedGrid(entry, { signal: opts.signal });
      ensureLatestSurfaceRequest(opts.requestId, opts.signal);
      applyGridFocus(grid);
      if (particles && typeof particles.setField === "function") {
        particles.setField(grid);
        if (state.latestParticleBounds && typeof particles.setBounds === "function") {
          particles.setBounds(state.latestParticleBounds);
        }
        updateParticleOptions();
      }
      if (!gridFallbackLayer) {
        gridFallbackLayer = L.windGridLayer(grid, {
          pane: "windColor",
          fillOpacity: parseInt(dom.opacityRange.value, 10) / 100,
          blurPx: 0.8,
          featherPx: 10,
        }).addTo(map);
      } else {
        gridFallbackLayer.setData(grid);
        if (!map.hasLayer(gridFallbackLayer)) {
          gridFallbackLayer.addTo(map);
        }
      }

      if (map.hasLayer(forecastLayer)) {
        map.removeLayer(forecastLayer);
      }
      return;
    }

    const hasTile = await tileAvailable(entry, opts.signal);
    ensureLatestSurfaceRequest(opts.requestId, opts.signal);
    if (hasTile) {
      configureForecastLayerZoom(entry);
      if (!map.hasLayer(forecastLayer)) {
        forecastLayer.addTo(map);
      }
      forecastLayer.setUrl(forecastData.toAbsolute(entry.tiles));
      if (gridFallbackLayer && map.hasLayer(gridFallbackLayer)) {
        map.removeLayer(gridFallbackLayer);
      }
      return;
    }

    if (!entry.vector || typeof L.windGridLayer !== "function") {
      if (isWorldMode()) {
        clearSurfaceLayer();
        dom.timelineMeta.textContent = "World-Windlayer fuer diesen Zeitpunkt nicht verfuegbar.";
        return;
      }
      configureForecastLayerZoom(entry);
      if (!map.hasLayer(forecastLayer)) {
        forecastLayer.addTo(map);
      }
      forecastLayer.setUrl(forecastData.toAbsolute(entry.tiles));
      return;
    }

    const grid = forecastData.normalizeGrid(await forecastData.fetchJson(entry.vector, { signal: opts.signal }));
    ensureLatestSurfaceRequest(opts.requestId, opts.signal);
    applyGridFocus(grid);
    if (particles && typeof particles.setField === "function") {
      particles.setField(grid);
      if (state.latestParticleBounds && typeof particles.setBounds === "function") {
        particles.setBounds(state.latestParticleBounds);
      }
      updateParticleOptions();
    }
    if (!gridFallbackLayer) {
      gridFallbackLayer = L.windGridLayer(grid, {
        pane: "windColor",
        fillOpacity: parseInt(dom.opacityRange.value, 10) / 100,
        blurPx: 0.8,
        featherPx: 10,
      }).addTo(map);
    } else {
      gridFallbackLayer.setData(grid);
      if (!map.hasLayer(gridFallbackLayer)) {
        gridFallbackLayer.addTo(map);
      }
    }

    if (map.hasLayer(forecastLayer)) {
      map.removeLayer(forecastLayer);
    }
  }

  dom.modelSelect.addEventListener("change", function () {
    const url = buildDemoUrl();
    url.searchParams.set("model", dom.modelSelect.value);
    window.location.href = url.toString();
  });

  dom.opacityRange.addEventListener("input", updateOpacity);
  dom.threadsToggle.addEventListener("change", updateParticleOptions);
  dom.threadsDensityRange.addEventListener("input", updateParticleOptions);
  dom.threadsLengthRange.addEventListener("input", updateParticleOptions);
  dom.threadsSpeedRange.addEventListener("input", updateParticleOptions);
  dom.threadsWidthRange.addEventListener("input", updateParticleOptions);
  dom.threadsFadeRange.addEventListener("input", updateParticleOptions);
  dom.reloadButton.addEventListener("click", function () {
    loadForecast().catch(function () {
      dom.timelineLabel.textContent = "Forecast konnte nicht geladen werden";
      dom.timelineMeta.textContent = "Bitte API und Run-Daten pruefen.";
    });
  });

  if (dom.basemapSelect) {
    dom.basemapSelect.addEventListener("change", function () {
      setBasemap(dom.basemapSelect.value);
    });
  }

  if (dom.resetViewButton) {
    dom.resetViewButton.addEventListener("click", function () {
      if (!state.latestGridBounds) return;
      state.hasPinnedInitialView = false;
      state.hasFocusedDataBounds = false;
      map.fitBounds(state.latestGridBounds.pad(0.08), {
        animate: true,
        padding: [24, 24],
      });
    });
  }

  if (dom.openMainMapButton) {
    dom.openMainMapButton.addEventListener("click", function () {
      window.open(buildMainMapUrl(), "_blank", "noopener");
    });
  }

  map.on("click", function (event) {
    if (pointInteraction) {
      pointInteraction.showPreview(event.latlng);
    }
  });

  map.on("moveend zoomend", function (event) {
    persistDemoView();
    const activeEntry = state.entries[state.activeIndex];
    if (event && event.type === "zoomend" && activeEntry && activeEntry.tiles && entryRegion(activeEntry) === WORLD_REGION) {
      state.activeSurfaceKey = "";
      requestSurfaceSync(activeEntry).catch(function (error) {
        if (!error || error.name !== "AbortError") {
          console.warn("[forecast-demo] world surface refresh failed", error);
        }
      });
    }
  });

  forecastData = window.iwindForecastDataSource.create({
    apiOrigin: apiOrigin,
    publishedRegion: PUBLISHED_REGION,
    defaultRegion: PUBLISHED_REGION,
    lookbackHours: 3,
    getModel: function () { return state.model; },
    getManifest: function () { return state.manifest; },
    parseForecastDate: parseForecastDate,
  });

  panelShell = window.iwindForecastPanelShell.create({
    dom: dom,
    closePointDetailsPanel: function () {
      if (pointInteraction) {
        pointInteraction.closeDetailsPanel();
      }
    },
    clearPointMarker: function () {
      if (pointInteraction) {
        pointInteraction.clearMarker();
      }
    },
  });
  panelShell.setup();

  pointInteraction = window.iwindForecastPointInteraction.create({
    leaflet: L,
    map: map,
    dom: dom,
    getEntries: function () { return state.entries; },
    getActiveIndex: function () { return state.activeIndex; },
    getModel: function () { return state.model; },
    getRegion: function () { return state.region || PUBLISHED_REGION; },
    getRun: function () { return state.manifest && state.manifest.run ? state.manifest.run : ""; },
    setPointPanelOpen: setPointPanelOpen,
    fetchJson: forecastData.fetchJson,
    loadPublishedGrid: forecastData.loadPublishedGrid,
    parseForecastDate: parseForecastDate,
    timelineDayKey: timelineDayKey,
    formatTimelineLabelCompact: formatTimelineLabelCompact,
    formatForecastModelLabel: formatForecastModelLabel,
  });

  timelineController = window.iwindForecastTimeline.create({
    dom: dom,
    getEntries: function () { return state.entries; },
    getActiveIndex: function () { return state.activeIndex; },
    getModel: function () { return state.model; },
    getRegion: function () { return (state.manifest && state.manifest.region) || PUBLISHED_REGION; },
    setActiveIndex: setActiveIndex,
    parseForecastDate: parseForecastDate,
    formatDateLabel: formatDateLabel,
    formatTimelineLabelCompact: formatTimelineLabelCompact,
    timelineDayKey: timelineDayKey,
    formatTimelineDayCompact: formatTimelineDayCompact,
    escapeHtml: escapeHtml,
  });
  timelineController.setupPanel(panelShell.getTimelinePanel());
  updateOpacity();
  updateParticlesUi();
  updateParticleOptions();
  setBasemap(state.basemapKey, false);
  persistDemoView();

  loadForecast().catch(function () {
    dom.timelineLabel.textContent = "Forecast konnte nicht geladen werden";
    dom.timelineMeta.textContent = "Bitte Manifest, Times und Tile-Auslieferung pruefen.";
  });
})();
(function () {
  const DEFAULT_MODEL = "gfs-025";
  const PUBLISHED_REGION = String(window.IWIND_FORECAST_DEFAULT_REGION || "europe");
  const WORLD_REGION = "world";
  const WORLD_TILE_MIN_ZOOM = 0;
  const WORLD_TILE_MAX_ZOOM = 8;
  const WORLD_TILE_DISPLAY_MAX_ZOOM = 12;
  const FORECAST_REGIONS = Array.isArray(window.IWIND_FORECAST_REGIONS) ? window.IWIND_FORECAST_REGIONS : [];
  const FORECAST_MODEL_LABELS = {
    "gfs-025": "GFS0.25°",
    "icon-d2": "ICON-D2",
    "icon-eu": "ICON-EU",
    "ecmwf": "ECMWF",
  };

  const qs = new URLSearchParams(window.location.search);
  const REQUESTED_REGION = String(qs.get("region") || window.IWIND_FORECAST_DEMO_DEFAULT_REGION || "").trim();
  const apiOrigin =
    window.location.hostname === "www.iwind.at" || window.location.hostname === "iwind.at"
      ? "https://weather.iwind.at"
      : "";

  const dom = {
    modelSelect: document.getElementById("modelSelect"),
    basemapSelect: document.getElementById("basemapSelect"),
    opacityRange: document.getElementById("opacityRange"),
    opacityValue: document.getElementById("opacityValue"),
    threadsToggle: document.getElementById("threadsToggle"),
    threadsDensityRange: document.getElementById("threadsDensityRange"),
    threadsDensityValue: document.getElementById("threadsDensityValue"),
    threadsLengthRange: document.getElementById("threadsLengthRange"),
    threadsLengthValue: document.getElementById("threadsLengthValue"),
    threadsSpeedRange: document.getElementById("threadsSpeedRange"),
    threadsSpeedValue: document.getElementById("threadsSpeedValue"),
    threadsWidthRange: document.getElementById("threadsWidthRange"),
    threadsWidthValue: document.getElementById("threadsWidthValue"),
    threadsFadeRange: document.getElementById("threadsFadeRange"),
    threadsFadeValue: document.getElementById("threadsFadeValue"),
    reloadButton: document.getElementById("reloadButton"),
    followPointButton: document.getElementById("followPointButton"),
    runValue: document.getElementById("runValue"),
    validValue: document.getElementById("validValue"),
    timelineLabel: document.getElementById("timelineLabel"),
    timelineMeta: document.getElementById("timelineMeta"),
    prevButton: document.getElementById("prevButton"),
    playButton: document.getElementById("playButton"),
    nextButton: document.getElementById("nextButton"),
    timeRange: document.getElementById("timeRange"),
    timelineTicks: document.getElementById("timelineTicks"),
    pointPanel: document.getElementById("pointPanel"),
    pointTitle: document.getElementById("pointTitle"),
    pointSubtitle: document.getElementById("pointSubtitle"),
    pointCurrent: document.getElementById("pointCurrent"),
    pointSeries: document.getElementById("pointSeries"),
    resetViewButton: document.getElementById("resetViewButton"),
    openMainMapButton: document.getElementById("openMainMapButton"),
    viewStateValue: document.getElementById("viewStateValue"),
  };

  const DEMO_VIEW_STORAGE_KEY = "iwind:forecast-demo:view:v1";
  const jawgToken = "jgKifz7zUmdACbcf8eWvpk4jwVNtCykl7prTVhb7NKPMOmqitsVSEVp1Oc1mhGk6";
  const jawgAttribution = '<a href="https://jawg.io?utm_medium=map&utm_source=attribution" target="_blank" rel="noopener">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">&copy; OpenStreetMap</a>';
  const jawgBaseOptions = {
    attribution: jawgAttribution,
    maxZoom: 22,
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
    crossOrigin: true,
  };

  const state = {
    model: qs.get("model") || DEFAULT_MODEL,
    manifest: null,
    entries: [],
    activeIndex: 0,
    region: REQUESTED_REGION || PUBLISHED_REGION,
    basemapKey: "carto-light",
    hasFocusedDataBounds: false,
    hasPinnedInitialView: false,
    latestGridBounds: null,
    latestParticleBounds: null,
    activeSurfaceKey: "",
    surfaceAbortController: null,
    surfaceRequestId: 0,
  };
  let timelineController = null;
  let panelShell = null;
  let pointInteraction = null;
  let forecastData = null;

  function parseFinite(value, fallback) {
    const num = Number(value);
    return Number.isFinite(num) ? num : fallback;
  }

  function setPointPanelOpen(open) {
    if (panelShell) {
      panelShell.setPointPanelOpen(open);
    }
  }

  function readStoredViewState() {
    try {
      const raw = window.localStorage.getItem(DEMO_VIEW_STORAGE_KEY);
      if (!raw) return null;
      const parsed = JSON.parse(raw);
      return parsed && typeof parsed === "object" ? parsed : null;
    } catch (_) {
      return null;
    }
  }

  const storedView = readStoredViewState();
  const initialLat = parseFinite(qs.get("lat"), parseFinite(storedView && storedView.lat, 47.5));
  const initialLng = parseFinite(qs.get("lng"), parseFinite(storedView && storedView.lng, 14.0));
  const initialZoom = parseFinite(qs.get("z"), parseFinite(storedView && storedView.z, 6));
  const requestedBaseKey = String(qs.get("base") || (storedView && storedView.base) || "carto-light").trim();
  state.basemapKey = requestedBaseKey || "carto-light";
  state.hasPinnedInitialView = qs.has("lat") || qs.has("lng") || qs.has("z") || !!storedView;

  dom.modelSelect.value = state.model;

  const standard = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png", {
    attribution: '&copy; <a href="https://carto.com/">CartoDB</a>',
    subdomains: "abcd",
    maxZoom: 19,
    updateWhenIdle: true,
    updateWhenZooming: false,
    keepBuffer: 2,
    crossOrigin: true,
  });
  const satellite = L.tileLayer("https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}", {
    subdomains: ["mt0", "mt1", "mt2", "mt3"],
    attribution: "&copy; Google Maps",
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const openTopoMap = L.tileLayer("https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png", {
    maxZoom: 17,
    attribution: "© OpenTopoMap (CC-BY-SA), © OpenStreetMap contributors",
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const esriTopo = L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", {
    attribution: "Tiles &copy; Esri",
    maxZoom: 17,
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const openMapTiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; OpenStreetMap contributors",
    updateWhenZooming: false,
    updateWhenIdle: true,
    keepBuffer: 1,
  });
  const jawgTerrain = L.tileLayer(`https://tile.jawg.io/jawg-terrain/{z}/{x}/{y}{r}.png?access-token=${jawgToken}`, jawgBaseOptions);
  const esriWorldImagery = L.layerGroup([
    L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", {
      attribution: "&copy; Esri World Imagery",
      maxZoom: 18,
    }),
    L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}", {
      attribution: "&copy; Esri Labels",
      maxZoom: 18,
    }),
  ]);

  const baseLayersByKey = {
    "carto-light": standard,
    satellite: satellite,
    "open-topo": openTopoMap,
    "esri-topo": esriTopo,
    openmaptiles: openMapTiles,
    "jawg-terrain": jawgTerrain,
    "esri-3d": esriWorldImagery,
  };

  const initialBaseLayer = baseLayersByKey[state.basemapKey] || standard;

  const map = L.map("map", {
    zoomControl: true,
    preferCanvas: true,
    zoomSnap: 1,
    zoomDelta: 1,
    worldCopyJump: false,
    layers: [initialBaseLayer],
  }).setView([initialLat, initialLng], initialZoom);

  if (dom.basemapSelect) {
    dom.basemapSelect.value = baseLayersByKey[state.basemapKey] ? state.basemapKey : "carto-light";
  }

  L.control.scale({ imperial: false }).addTo(map);

  const windColorPane = map.createPane("windColor");
  windColorPane.style.zIndex = "450";
  windColorPane.style.pointerEvents = "none";
  windColorPane.style.mixBlendMode = "normal";
  windColorPane.style.opacity = "1";

  let forecastLayer = L.tileLayer("", {
    opacity: parseInt(dom.opacityRange.value, 10) / 100,
    className: "forecast-tiles",
    pane: "windColor",
    crossOrigin: true,
    updateWhenIdle: true,
    keepBuffer: 2,
    maxZoom: 19,
  });

  let gridFallbackLayer = null;
  const particles = L.windParticlesLayer ? L.windParticlesLayer(null, {
    active: true,
    particleCount: Number(dom.threadsDensityRange.value),
    speedScale: Number(dom.threadsLengthRange.value) / 100,
    velocityScale: Number(dom.threadsSpeedRange.value) / 100,
    fadeAlpha: Number(dom.threadsFadeRange.value) / 100,
    lineWidth: Number(dom.threadsWidthRange.value),
    minSpeed: 0.2,
    useColors: true,
    color: "rgba(22, 87, 128, 0.3)",
  }) : null;
  if (particles) {
    particles.addTo(map);
  }

  function parseForecastDate(value) {
    if (!value) return null;
    if (/^\d{8}T\d{6}Z$/.test(value)) {
      const iso = value.slice(0, 4) + "-" + value.slice(4, 6) + "-" + value.slice(6, 8) +
        "T" + value.slice(9, 11) + ":" + value.slice(11, 13) + ":" + value.slice(13, 15) + "Z";
      return new Date(iso);
    }
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? null : date;
  }

  function formatDateLabel(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    return date.toLocaleString(undefined, {
      weekday: "short",
      day: "2-digit",
      month: "2-digit",
      hour: "2-digit",
      minute: "2-digit",
    });
  }

  function formatTimelineHour(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    return date.toLocaleTimeString(undefined, {
      hour: "2-digit",
      minute: "2-digit",
    });
  }

  function timelineDayKey(value) {
    const date = parseForecastDate(value);
    if (!date) return "unknown";
    return date.getFullYear() + "-" + String(date.getMonth() + 1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0");
  }

  function formatTimelineDayCompact(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    const weekday = date.toLocaleDateString(undefined, { weekday: "long" });
    const day = String(date.getDate()).padStart(2, "0");
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const year = String(date.getFullYear()).slice(-2);
    return weekday + ", " + day + "." + month + "." + year;
  }

  function formatTimelineLabelCompact(value) {
    const date = parseForecastDate(value);
    if (!date) return "-";
    const weekday = date.toLocaleDateString(undefined, { weekday: "short" }).replace(/\.$/, "").toUpperCase();
    return weekday + " " + date.getDate() + "." + (date.getMonth() + 1) + ". " + formatTimelineHour(value);
  }

  function formatForecastModelLabel(modelKey) {
    const key = String(modelKey || "").trim().toLowerCase();
    if (FORECAST_MODEL_LABELS[key]) return FORECAST_MODEL_LABELS[key];

    return key
      ? key.replace(/-/g, " ").replace(/\b\w/g, function (char) { return char.toUpperCase(); })
      : "Forecast";
  }

  function activeBasemapKey() {
    return baseLayersByKey[state.basemapKey] ? state.basemapKey : "carto-light";
  }

  function buildDemoUrl() {
    const url = new URL(window.location.pathname, window.location.origin);
    const center = map.getCenter();
    url.searchParams.set("model", state.model);
    url.searchParams.set("lat", center.lat.toFixed(6));
    url.searchParams.set("lng", center.lng.toFixed(6));
    url.searchParams.set("z", String(Math.round(map.getZoom())));
    url.searchParams.set("base", activeBasemapKey());
    if (REQUESTED_REGION || (state.region && state.region !== PUBLISHED_REGION)) {
      url.searchParams.set("region", REQUESTED_REGION || state.region);
    }
    return url;
  }

  function buildMainMapUrl() {
    const url = new URL("/map", window.location.origin);
    const center = map.getCenter();
    url.searchParams.set("lat", center.lat.toFixed(6));
    url.searchParams.set("lng", center.lng.toFixed(6));
    url.searchParams.set("z", String(Math.round(map.getZoom())));
    url.searchParams.set("base", activeBasemapKey());
    return url.toString();
  }

  function updateViewStateUi() {
    if (!dom.viewStateValue) return;
    const center = map.getCenter();
    dom.viewStateValue.textContent =
      activeBasemapKey() + " | z" + Math.round(map.getZoom()) + " | " +
      center.lat.toFixed(2) + ", " + center.lng.toFixed(2);
  }

  function persistDemoView() {
    const center = map.getCenter();
    const payload = {
      lat: Number(center.lat.toFixed(6)),
      lng: Number(center.lng.toFixed(6)),
      z: Math.round(map.getZoom()),
      base: activeBasemapKey(),
    };
    try {
      window.localStorage.setItem(DEMO_VIEW_STORAGE_KEY, JSON.stringify(payload));
    } catch (_) {}
    try {
      window.history.replaceState({}, "", buildDemoUrl().toString());
    } catch (_) {}
    if (dom.openMainMapButton) {
      dom.openMainMapButton.dataset.targetUrl = buildMainMapUrl();
    }
    updateViewStateUi();
  }

  function setBasemap(key, persist) {
    const nextKey = baseLayersByKey[key] ? key : "carto-light";
    state.basemapKey = nextKey;

    Object.keys(baseLayersByKey).forEach(function (layerKey) {
      const layer = baseLayersByKey[layerKey];
      if (layerKey === nextKey) {
        if (!map.hasLayer(layer)) map.addLayer(layer);
      } else if (map.hasLayer(layer)) {
        map.removeLayer(layer);
      }
    });

    if (dom.basemapSelect) {
      dom.basemapSelect.value = nextKey;
    }

    if (persist !== false) {
      persistDemoView();
    } else {
      updateViewStateUi();
    }
  }

  function createAbortError() {
    try {
      return new DOMException("Surface request superseded", "AbortError");
    } catch (_) {
      const error = new Error("Surface request superseded");
      error.name = "AbortError";
      return error;
    }
  }

  function entrySurfaceKey(entry) {
    if (!entry) return "";
    if (entry.source === "published-bin") {
      return String(entry.binary || entry.valid || "");
    }
    return String(entry.tiles || entry.vector || entry.valid || "");
  }

  function ensureLatestSurfaceRequest(requestId, signal) {
    if ((signal && signal.aborted) || requestId !== state.surfaceRequestId) {
      throw createAbortError();
    }
  }

  function setActiveIndex(nextIndex, options) {
    if (!state.entries.length) return;
    const opts = options || {};
    const size = state.entries.length;
    const normalized = ((nextIndex % size) + size) % size;
    const changed = normalized !== state.activeIndex;
    state.activeIndex = normalized;

    const entry = state.entries[normalized];
    if (timelineController) {
      timelineController.refreshActive(entry, opts);
    }

    if (!changed && opts.fromScroll) return;
    if (!changed && state.activeSurfaceKey === entrySurfaceKey(entry)) return;

    preloadNextTile();
    requestSurfaceSync(entry).catch(function (error) {
      if (error && error.name === "AbortError") {
        return;
      }

      if (entry && entry.source === "published-bin") {
        findFirstUsableEntryIndex(normalized + 1).then(function (fallbackIndex) {
          if (fallbackIndex >= 0 && fallbackIndex !== normalized) {
            setActiveIndex(fallbackIndex, { center: true, recovered: true });
            return;
          }

          dom.timelineLabel.textContent = "Forecast konnte nicht geladen werden";
          dom.timelineMeta.textContent = "Keine gueltige Forecast-Datei fuer diesen Zeitpunkt gefunden.";
        });
        return;
      }

      if (entry && entry.tiles && surfaceZoomAllowed(entry)) {
        forecastLayer.setUrl(forecastData.toAbsolute(entry.tiles));
      } else {
        clearSurfaceLayer();
      }
    });

    if (pointInteraction) {
      pointInteraction.handleActiveEntryChange();
    }
  }

  async function requestSurfaceSync(entry) {
    if (state.surfaceAbortController) {
      state.surfaceAbortController.abort();
    }

    const controller = new AbortController();
    const requestId = state.surfaceRequestId + 1;
    state.surfaceAbortController = controller;
    state.surfaceRequestId = requestId;

    try {
      await syncSurface(entry, {
        signal: controller.signal,
        requestId: requestId,
      });
      ensureLatestSurfaceRequest(requestId, controller.signal);
      state.activeSurfaceKey = entrySurfaceKey(entry);
    } finally {
      if (state.surfaceAbortController === controller) {
        state.surfaceAbortController = null;
      }
    }
  }

  function preloadNextTile() {
    if (state.entries.length < 2) return;
    const nextEntry = state.entries[(state.activeIndex + 1) % state.entries.length];
    if (!nextEntry || nextEntry.source === "published-bin" || !nextEntry.tiles) return;
    if (!surfaceZoomAllowed(nextEntry)) return;
    const center = map.getCenter();
    const zoom = surfaceRequestZoom(nextEntry);
    const tilePoint = map.project(center, zoom).divideBy(256).floor();
    const url = forecastData.toAbsolute(nextEntry.tiles)
      .replace("{z}", String(zoom))
      .replace("{x}", String(tilePoint.x))
      .replace("{y}", String(tilePoint.y));
    const image = new Image();
    image.crossOrigin = "anonymous";
    image.src = url;
  }

  function updateOpacity() {
    const value = parseInt(dom.opacityRange.value, 10);
    dom.opacityValue.textContent = value + "%";
    forecastLayer.setOpacity(value / 100);
    if (gridFallbackLayer) {
      if (typeof gridFallbackLayer.setOpacity === "function") {
        gridFallbackLayer.setOpacity(value / 100);
      } else {
        gridFallbackLayer.options.fillOpacity = value / 100;
        if (typeof gridFallbackLayer._draw === "function") {
          gridFallbackLayer._draw();
        }
      }
    }
  }

  function updateParticlesUi() {
    dom.threadsDensityValue.textContent = dom.threadsDensityRange.value;
    dom.threadsLengthValue.textContent = dom.threadsLengthRange.value;
    dom.threadsSpeedValue.textContent = dom.threadsSpeedRange.value + "%";
    dom.threadsWidthValue.textContent = Number(dom.threadsWidthRange.value).toFixed(1) + " px";
    dom.threadsFadeValue.textContent = dom.threadsFadeRange.value + "%";
  }

  function updateParticleOptions() {
    updateParticlesUi();
    if (!particles) return;
    particles.setOptions({
      active: !!dom.threadsToggle.checked,
      particleCount: Number(dom.threadsDensityRange.value),
      speedScale: Number(dom.threadsLengthRange.value) / 100,
      velocityScale: Number(dom.threadsSpeedRange.value) / 100,
      fadeAlpha: Number(dom.threadsFadeRange.value) / 100,
      lineWidth: Number(dom.threadsWidthRange.value),
    });
  }

  function escapeHtml(value) {
    return String(value)
      .replace(/&/g, "&amp;")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  function regionArea(region) {
    if (!region) return Number.POSITIVE_INFINITY;
    return Math.max(0, Number(region.east) - Number(region.west)) * Math.max(0, Number(region.north) - Number(region.south));
  }

  function normalizeLongitude(value) {
    let lng = Number(value);
    if (!Number.isFinite(lng)) return lng;
    while (lng > 180) lng -= 360;
    while (lng < -180) lng += 360;
    return lng;
  }

  function regionContainsLatLng(region, latlng) {
    if (!region || !latlng) return false;
    const lat = Number(latlng.lat);
    const lng = normalizeLongitude(latlng.lng);
    if (region.key === "mediterranean" && lat > 45.5) {
      return false;
    }
    return lat >= Number(region.south) && lat <= Number(region.north) && lng >= Number(region.west) && lng <= Number(region.east);
  }

  function resolvePreferredRegion(latlng) {
    if (REQUESTED_REGION) {
      return REQUESTED_REGION;
    }

    const matches = FORECAST_REGIONS
      .filter(function (region) { return regionContainsLatLng(region, latlng); })
      .sort(function (a, b) { return regionArea(a) - regionArea(b); });

    if (matches.length) {
      return matches[0].key || PUBLISHED_REGION;
    }

    return PUBLISHED_REGION;
  }

  function regionQuery(regionKey) {
    const key = String(regionKey || "").trim();
    return key ? "?region=" + encodeURIComponent(key) : "";
  }

  function buildRegionFallbackChain(preferredRegion, defaultRegion) {
    if (String(preferredRegion || "").trim() === WORLD_REGION) {
      return [WORLD_REGION];
    }

    return [preferredRegion, WORLD_REGION, defaultRegion].filter(function (regionKey, index, list) {
      const key = String(regionKey || "").trim();
      return key && list.findIndex(function (candidate) {
        return String(candidate || "").trim() === key;
      }) === index;
    });
  }

  function isWorldMode() {
    return REQUESTED_REGION === WORLD_REGION || state.region === WORLD_REGION;
  }

  function isWorldTileEntry(entry) {
    if (!entry || !entry.tiles) return false;
    const region = String(entry.region || "").trim();
    const tiles = String(entry.tiles || "");
    return region === WORLD_REGION || tiles.indexOf("/world/") !== -1;
  }

  function configureForecastLayerZoom(entry) {
    if (isWorldTileEntry(entry)) {
      forecastLayer.options.maxNativeZoom = WORLD_TILE_MAX_ZOOM;
      forecastLayer.options.maxZoom = WORLD_TILE_DISPLAY_MAX_ZOOM;
      return;
    }

    delete forecastLayer.options.maxNativeZoom;
    forecastLayer.options.maxZoom = 19;
  }

  function surfaceRequestZoom(entry) {
    const currentZoom = Math.round(map.getZoom());
    if (isWorldTileEntry(entry)) {
      return Math.min(currentZoom, WORLD_TILE_MAX_ZOOM);
    }

    const entryMaxZoom = Number(entry && entry.maxZoom);
    return Number.isFinite(entryMaxZoom)
      ? Math.min(currentZoom, entryMaxZoom)
      : currentZoom;
  }

  function entriesForRegion(entries, regionKey) {
    const list = Array.isArray(entries) ? entries : [];
    if (String(regionKey || "").trim() !== WORLD_REGION) {
      return list;
    }

    return list.filter(isWorldTileEntry);
  }

  async function findFirstUsableEntryIndex(startIndex) {
    if (!state.entries.length) return -1;

    for (let offset = 0; offset < state.entries.length; offset += 1) {
      const index = (startIndex + offset) % state.entries.length;
      const entry = state.entries[index];
      if (!entry) continue;

      if (isWorldMode()) {
        if (isWorldTileEntry(entry)) {
          return index;
        }
        continue;
      }

      if (entry.source !== "published-bin" || !entry.binary) {
        return index;
      }

      if (await forecastData.publishedBinaryExists(entry.binary)) {
        return index;
      }
    }

    return -1;
  }

  async function loadForecast() {
    if (timelineController) {
      timelineController.stop();
    }

    let manifest;
    let entries;
    const preferredRegion = resolvePreferredRegion(map.getCenter());
    const preferApiTimesOnly = preferredRegion === WORLD_REGION;
    state.region = preferredRegion;
    const defaultRegion = PUBLISHED_REGION;
    const fallbackRegions = buildRegionFallbackChain(preferredRegion, defaultRegion);

    try {
      if (preferApiTimesOnly) {
        throw new Error("world region uses api times");
      }

      let publishedError = null;

      for (const regionKey of fallbackRegions) {
        try {
          const latest = await forecastData.fetchJson(
            forecastData.publishedLatestUrlForRegion(state.model, regionKey),
            { cache: "no-store" }
          );
          const publishedManifest = await forecastData.fetchJson(latest.manifest, { cache: "no-store" });
          const publishedEntries = entriesForRegion(
            forecastData.buildEntriesFromPublishedManifest(publishedManifest),
            regionKey
          );
          if (!publishedEntries.length) {
            throw new Error("published manifest has no files");
          }

          manifest = publishedManifest;
          entries = publishedEntries;
          manifest.run = manifest.run_at || manifest.run || latest.run;
          manifest.region = manifest.region || latest.region || regionKey || PUBLISHED_REGION;
          state.region = manifest.region;
          publishedError = null;
          break;
        } catch (error) {
          publishedError = error;
        }
      }

      if (publishedError) {
        throw publishedError;
      }
    } catch (publishedError) {
      let fallbackError = publishedError;
      entries = [];

      for (const regionKey of fallbackRegions) {
        try {
          manifest = await forecastData.fetchJson(
            "/api/forecast/" + encodeURIComponent(state.model) + "/manifest" + regionQuery(regionKey)
          );

          try {
            const resolvedRegion = manifest.region || regionKey || defaultRegion;
            if (resolvedRegion !== WORLD_REGION) {
              const publishedManifestUrl = forecastData.publishedRunManifestUrl(
                state.model,
                manifest.run_key || manifest.run || manifest.run_at || "",
                resolvedRegion
              );
              if (publishedManifestUrl) {
                const publishedManifest = await forecastData.fetchJson(publishedManifestUrl, { cache: "no-store" });
                const publishedEntries = entriesForRegion(
                  forecastData.buildEntriesFromPublishedManifest(publishedManifest),
                  resolvedRegion
                );
                if (publishedEntries.length) {
                  manifest = publishedManifest;
                  manifest.run = manifest.run_key || manifest.run || manifest.run_at;
                  manifest.region = manifest.region || resolvedRegion || PUBLISHED_REGION;
                  entries = publishedEntries;
                  break;
                }
              }
            }
          } catch (_) {
          }

          const times = await forecastData.fetchJson(
            "/api/forecast/" + encodeURIComponent(state.model) + "/times" + regionQuery(regionKey)
          );
          entries = entriesForRegion(Array.isArray(times.valid) ? times.valid : [], regionKey);
          if (entries.length) {
            manifest.region = manifest.region || regionKey || defaultRegion;
            break;
          }
        } catch (error) {
          fallbackError = error;
          entries = [];
        }
      }

      if (!entries.length) {
        throw fallbackError;
      }
    }

    state.manifest = manifest;
    state.region = manifest.region || preferredRegion || PUBLISHED_REGION;
    state.entries = entries;
    state.activeIndex = 0;

    dom.runValue.textContent = formatDateLabel(manifest.run_at || manifest.run || entries[0].valid);
    dom.timeRange.max = String(entries.length - 1);
    dom.timeRange.value = "0";

    if (timelineController) {
      timelineController.renderTicks();
    }
    const firstUsableIndex = await findFirstUsableEntryIndex(0);
    setActiveIndex(firstUsableIndex >= 0 ? firstUsableIndex : 0, { center: true });
  }

  function gridBounds(grid) {
    const south = Math.min(grid.lat0, grid.lat0 + grid.dlat * (grid.nlat - 1));
    const north = Math.max(grid.lat0, grid.lat0 + grid.dlat * (grid.nlat - 1));
    const west = Math.min(grid.lon0, grid.lon0 + grid.dlon * (grid.nlon - 1));
    const east = Math.max(grid.lon0, grid.lon0 + grid.dlon * (grid.nlon - 1));
    return L.latLngBounds([south, west], [north, east]);
  }

  function applyGridFocus(grid) {
    const bounds = gridBounds(grid);
    state.latestGridBounds = bounds;
    state.latestParticleBounds = bounds;
    if (particles && typeof particles.setBounds === "function") {
      particles.setBounds(bounds);
    }
    if (state.hasFocusedDataBounds || state.hasPinnedInitialView) return;
    state.hasFocusedDataBounds = true;
    map.fitBounds(bounds.pad(0.08), {
      animate: false,
      padding: [24, 24],
    });
    persistDemoView();
  }

  function centerTileUrl(tileTemplate, entry) {
    const center = map.getCenter();
    const zoom = surfaceRequestZoom(entry);
    const tilePoint = map.project(center, zoom).divideBy(256).floor();
    return forecastData.toAbsolute(tileTemplate)
      .replace("{z}", String(zoom))
      .replace("{x}", String(tilePoint.x))
      .replace("{y}", String(tilePoint.y));
  }

  function entryRegion(entry) {
    return String((entry && entry.region) || state.region || "").trim();
  }

  function surfaceZoomAllowed(entry) {
    if (!entry || !entry.tiles) return true;
    const minZoom = Number.isFinite(Number(entry.minZoom)) ? Number(entry.minZoom) : null;
    const configuredMaxZoom = Number.isFinite(Number(entry.maxZoom)) ? Number(entry.maxZoom) : null;
    const maxZoom = isWorldTileEntry(entry)
      ? WORLD_TILE_DISPLAY_MAX_ZOOM
      : configuredMaxZoom;
    const zoom = map.getZoom();

    if (minZoom !== null && zoom < minZoom) return false;
    if (maxZoom !== null && zoom > maxZoom) return false;

    return true;
  }

  function clearSurfaceLayer() {
    if (map.hasLayer(forecastLayer)) {
      map.removeLayer(forecastLayer);
    }
    if (gridFallbackLayer && map.hasLayer(gridFallbackLayer)) {
      map.removeLayer(gridFallbackLayer);
    }
  }

  async function tileAvailable(entry, signal) {
    if (!entry || !entry.tiles) return false;
    if (isWorldMode() && !isWorldTileEntry(entry)) return false;
    if (!surfaceZoomAllowed(entry)) return false;
    try {
      const response = await fetch(centerTileUrl(entry.tiles, entry), {
        method: "HEAD",
        cache: "no-store",
        credentials: "same-origin",
        signal: signal,
      });
      return response.ok;
    } catch (_) {
      return false;
    }
  }

  async function syncSurface(entry, runtimeOptions) {
    const opts = runtimeOptions || {};

    if (isWorldMode() && entry && !isWorldTileEntry(entry)) {
      clearSurfaceLayer();
      throw new Error("World forecast entry is not tile-backed");
    }

    if (entry && entry.tiles && !surfaceZoomAllowed(entry)) {
      clearSurfaceLayer();
      if (entryRegion(entry) === WORLD_REGION) {
        dom.timelineMeta.textContent = "World-Windlayer nativ ab Zoom " + WORLD_TILE_MIN_ZOOM + " bis " + WORLD_TILE_MAX_ZOOM + ", sichtbar bis Zoom " + WORLD_TILE_DISPLAY_MAX_ZOOM + ".";
      }
      return;
    }

    if (entry && entry.source === "published-bin" && entry.binary) {
      const binaryExists = await forecastData.publishedBinaryExists(entry.binary, { signal: opts.signal });
      ensureLatestSurfaceRequest(opts.requestId, opts.signal);
      if (!binaryExists) {
        throw new Error("Published binary missing for " + entry.valid);
      }

      const grid = await forecastData.loadPublishedGrid(entry, { signal: opts.signal });
      ensureLatestSurfaceRequest(opts.requestId, opts.signal);
      applyGridFocus(grid);
      if (particles && typeof particles.setField === "function") {
        particles.setField(grid);
        if (state.latestParticleBounds && typeof particles.setBounds === "function") {
          particles.setBounds(state.latestParticleBounds);
        }
        updateParticleOptions();
      }
      if (!gridFallbackLayer) {
        gridFallbackLayer = L.windGridLayer(grid, {
          pane: "windColor",
          fillOpacity: parseInt(dom.opacityRange.value, 10) / 100,
          blurPx: 0.8,
          featherPx: 10,
        }).addTo(map);
      } else {
        gridFallbackLayer.setData(grid);
        if (!map.hasLayer(gridFallbackLayer)) {
          gridFallbackLayer.addTo(map);
        }
      }

      if (map.hasLayer(forecastLayer)) {
        map.removeLayer(forecastLayer);
      }
      return;
    }

    const hasTile = await tileAvailable(entry, opts.signal);
    ensureLatestSurfaceRequest(opts.requestId, opts.signal);
    if (hasTile) {
      configureForecastLayerZoom(entry);
      if (!map.hasLayer(forecastLayer)) {
        forecastLayer.addTo(map);
      }
      forecastLayer.setUrl(forecastData.toAbsolute(entry.tiles));
      if (gridFallbackLayer && map.hasLayer(gridFallbackLayer)) {
        map.removeLayer(gridFallbackLayer);
      }
      return;
    }

    if (!entry.vector || typeof L.windGridLayer !== "function") {
      if (isWorldMode()) {
        clearSurfaceLayer();
        dom.timelineMeta.textContent = "World-Windlayer fuer diesen Zeitpunkt nicht verfuegbar.";
        return;
      }
      configureForecastLayerZoom(entry);
      if (!map.hasLayer(forecastLayer)) {
        forecastLayer.addTo(map);
      }
      forecastLayer.setUrl(forecastData.toAbsolute(entry.tiles));
      return;
    }

    const grid = forecastData.normalizeGrid(await forecastData.fetchJson(entry.vector, { signal: opts.signal }));
    ensureLatestSurfaceRequest(opts.requestId, opts.signal);
    applyGridFocus(grid);
    if (particles && typeof particles.setField === "function") {
      particles.setField(grid);
      if (state.latestParticleBounds && typeof particles.setBounds === "function") {
        particles.setBounds(state.latestParticleBounds);
      }
      updateParticleOptions();
    }
    if (!gridFallbackLayer) {
      gridFallbackLayer = L.windGridLayer(grid, {
        pane: "windColor",
        fillOpacity: parseInt(dom.opacityRange.value, 10) / 100,
        blurPx: 0.8,
        featherPx: 10,
      }).addTo(map);
    } else {
      gridFallbackLayer.setData(grid);
      if (!map.hasLayer(gridFallbackLayer)) {
        gridFallbackLayer.addTo(map);
      }
    }

    if (map.hasLayer(forecastLayer)) {
      map.removeLayer(forecastLayer);
    }
  }

  dom.modelSelect.addEventListener("change", function () {
    const url = buildDemoUrl();
    url.searchParams.set("model", dom.modelSelect.value);
    window.location.href = url.toString();
  });

  dom.opacityRange.addEventListener("input", updateOpacity);
  dom.threadsToggle.addEventListener("change", updateParticleOptions);
  dom.threadsDensityRange.addEventListener("input", updateParticleOptions);
  dom.threadsLengthRange.addEventListener("input", updateParticleOptions);
  dom.threadsSpeedRange.addEventListener("input", updateParticleOptions);
  dom.threadsWidthRange.addEventListener("input", updateParticleOptions);
  dom.threadsFadeRange.addEventListener("input", updateParticleOptions);
  dom.reloadButton.addEventListener("click", function () {
    loadForecast().catch(function () {
      dom.timelineLabel.textContent = "Forecast konnte nicht geladen werden";
      dom.timelineMeta.textContent = "Bitte API und Run-Daten pruefen.";
    });
  });

  if (dom.basemapSelect) {
    dom.basemapSelect.addEventListener("change", function () {
      setBasemap(dom.basemapSelect.value);
    });
  }

  if (dom.resetViewButton) {
    dom.resetViewButton.addEventListener("click", function () {
      if (!state.latestGridBounds) return;
      state.hasPinnedInitialView = false;
      state.hasFocusedDataBounds = false;
      map.fitBounds(state.latestGridBounds.pad(0.08), {
        animate: true,
        padding: [24, 24],
      });
    });
  }

  if (dom.openMainMapButton) {
    dom.openMainMapButton.addEventListener("click", function () {
      window.open(buildMainMapUrl(), "_blank", "noopener");
    });
  }

  map.on("click", function (event) {
    if (pointInteraction) {
      pointInteraction.showPreview(event.latlng);
    }
  });

  map.on("moveend zoomend", function (event) {
    persistDemoView();
    const activeEntry = state.entries[state.activeIndex];
    if (event && event.type === "zoomend" && activeEntry && activeEntry.tiles && entryRegion(activeEntry) === WORLD_REGION) {
      state.activeSurfaceKey = "";
      requestSurfaceSync(activeEntry).catch(function (error) {
        if (!error || error.name !== "AbortError") {
          console.warn("[forecast-demo] world surface refresh failed", error);
        }
      });
    }
  });

  forecastData = window.iwindForecastDataSource.create({
    apiOrigin: apiOrigin,
    publishedRegion: PUBLISHED_REGION,
    defaultRegion: PUBLISHED_REGION,
    lookbackHours: 3,
    getModel: function () { return state.model; },
    getManifest: function () { return state.manifest; },
    parseForecastDate: parseForecastDate,
  });

  panelShell = window.iwindForecastPanelShell.create({
    dom: dom,
    closePointDetailsPanel: function () {
      if (pointInteraction) {
        pointInteraction.closeDetailsPanel();
      }
    },
    clearPointMarker: function () {
      if (pointInteraction) {
        pointInteraction.clearMarker();
      }
    },
  });
  panelShell.setup();

  pointInteraction = window.iwindForecastPointInteraction.create({
    leaflet: L,
    map: map,
    dom: dom,
    getEntries: function () { return state.entries; },
    getActiveIndex: function () { return state.activeIndex; },
    getModel: function () { return state.model; },
    getRegion: function () { return state.region || PUBLISHED_REGION; },
    getRun: function () { return state.manifest && state.manifest.run ? state.manifest.run : ""; },
    setPointPanelOpen: setPointPanelOpen,
    fetchJson: forecastData.fetchJson,
    loadPublishedGrid: forecastData.loadPublishedGrid,
    parseForecastDate: parseForecastDate,
    timelineDayKey: timelineDayKey,
    formatTimelineLabelCompact: formatTimelineLabelCompact,
    formatForecastModelLabel: formatForecastModelLabel,
  });

  timelineController = window.iwindForecastTimeline.create({
    dom: dom,
    getEntries: function () { return state.entries; },
    getActiveIndex: function () { return state.activeIndex; },
    getModel: function () { return state.model; },
    getRegion: function () { return (state.manifest && state.manifest.region) || PUBLISHED_REGION; },
    setActiveIndex: setActiveIndex,
    parseForecastDate: parseForecastDate,
    formatDateLabel: formatDateLabel,
    formatTimelineLabelCompact: formatTimelineLabelCompact,
    timelineDayKey: timelineDayKey,
    formatTimelineDayCompact: formatTimelineDayCompact,
    escapeHtml: escapeHtml,
  });
  timelineController.setupPanel(panelShell.getTimelinePanel());
  updateOpacity();
  updateParticlesUi();
  updateParticleOptions();
  setBasemap(state.basemapKey, false);
  persistDemoView();

  loadForecast().catch(function () {
    dom.timelineLabel.textContent = "Forecast konnte nicht geladen werden";
    dom.timelineMeta.textContent = "Bitte Manifest, Times und Tile-Auslieferung pruefen.";
  });
})();
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Windverlauf: Gothenburg</title>
    <!-- SEO: Nur parameterisierte History-Varianten wie ?range=... oder ?day=... ausschliessen -->
  <meta name="robots" content="noindex, follow, noarchive, nosnippet">
  <meta name="googlebot" content="noindex, follow, noarchive, nosnippet">
  
  <!-- Canonical ohne Query-String (Google soll keine ?range=... Varianten sammeln) -->
  <link rel="canonical" href="https://weather.iwind.at/spot/14009/history">
  
  <!-- D3.js einbinden -->
  <script src="https://d3js.org/d3.v7.min.js"></script>
  
  <!-- Style-Anpassungen -->
  <style>
    body {
      margin: 20px;
      font-family: sans-serif;
      background: #000;
      color: #fff;
    }
    h1 {
      margin-top: 0; /* Kein zusätzlicher Abstand nach oben */
      margin-bottom: 10px; /* Einheitlicher Abstand */
    }
    .date-display {
      color: #aaa;
      margin-bottom: 10px; /* Gleicher Abstand wie bei den Buttons */
      font-size: 16px;
    }

    .time-display {
      color: #aaa;
      margin-bottom: 10px;
      font-size: 15px; /* 1 Stufe kleiner als Datum */
    }
    /* Navigation-Buttons */
    .nav-buttons {
      display: flex; 
      gap: 0px; 
      margin-bottom: 0px; /* Abstand zwischen Buttons und Titel reduziert */
      flex-wrap: wrap;
      align-items: center; /* Logo zentrieren */
    }
    .nav-button {
      border-radius: 6px;
      padding: 7.2px 16.8px; /* vorher: 6px 14px → +20% */
      font-weight: 600;
      font-size: 16.8px; /* vorher: 14px → 14 * 1.2 = 16.8 */
      text-decoration: none;
      display: inline-block;
      margin: 4px 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid;
      color: #fff;
    }
    .nav-button:hover {
      background-color: #fff;
    }
    /* Primärfarbe */
    .btn-1 {
      background-color: #064072;
      border-color: #064072;
    }
    .btn-1:hover {
      color: #064072;
    }

    /* Empfehlung 1 */
    .btn-2 {
      background-color: #606080;
      border-color: #606080;
    }
    .btn-2:hover {
      color: #606080;
    }

    /* Empfehlung 2 */
    .btn-3 {
      background-color: #30488A;
      border-color: #30488A;
    }
    .btn-3:hover {
      color: #30488A;
    }

    /* Empfehlung 3 */
    .btn-4 {
      background-color: #064073;
      border-color: #064073;
    }
    .btn-4:hover {
      color: #064073;
    }

    /* Empfehlung 4 */
    .btn-5 {
      background-color: #15728A;
      border-color: #15728A;
    }
    .btn-5:hover {
      color: #15728A;
    }

    /* Empfehlung 5 */
    .btn-6 {
      background-color: #008077;
      border-color: #008077;
    }
    .btn-6:hover {
      color: #008077;
    }

    /* Beispiel-Farben */
    .today    { background-color: #00BFFF; }
    .yesterday{ background-color: #FF8C00; }
    .week     { background-color: #FF00FF; }
    .nav-prev { background-color: #444;    }
    .nav-next { background-color: #444;    }
    .back     { background-color: #DC143C; }
    .date-btn { background-color: #00CC00; } /* Grün */

    #chart {
      width: 1000px;
      height: 500px;
      border: 1px solid #444; 
      position: relative;
    }
    .axis path, .axis line {
      stroke: #999; 
      fill: none;
    }
    .axis text {
      fill: #ccc;
      font-size: 12px;
    }
    /* Linien abgerundet mit Filter */
    .chart-line {
      stroke-linejoin: round;
      stroke-linecap: round;
      filter: url(#blurFilter);
    }
    .chart-line-sharp {
      stroke-linejoin: round;
      stroke-linecap: round;
    }
    .value-label {
      font-size: 13px;
      fill: #fff;
      text-anchor: middle;
    }
    .wind-arrow {
      fill: #fff;
    }
    .wind-deg-label {
      fill: #fff;
      font-size: 6.5px; /* ~50% of .value-label (13px) */
      font-weight: 600;
    }
    .day-separator {
      stroke: #444;
      stroke-dasharray: 4,4;
    }
    .day-label {
      fill: #aaa;
      font-size: 12px;
      text-anchor: middle;
    }
    
    /* Angepasster Doppel-Slider-Stil - 50% Breite, zentriert */
    .double-range-slider {
      width: 500px; /* Hälfte von 1000px */
      margin: 0px 0 20px 200px; /* 20px oben, 0 rechts, 20px unten, 200px links */
      position: relative;
      height: 40px;
    }
    
    .slider-track {
      position: absolute;
      top: 10px;
      width: 100%;
      height: 6px;
      background: #444;
      border-radius: 3px;
    }
    
    .slider-range {
      position: absolute;
      top: 10px;
      height: 6px;
      background: #064072; /* ersetzt #00BFFF durch Button-Blau */
      border-radius: 3px;
    }
    
    .slider-thumb {
      position: absolute;
      top: 5px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #064072; /* ersetzt #00BFFF durch Button-Blau */
      cursor: pointer;
      z-index: 2;
    }
    
    .slider-value {
      position: absolute;
      top: 25px;
      font-size: 12px;
      color: #ccc;
      transform: translateX(-50%);
      white-space: nowrap;
    }
    
    .slider-labels {
      position: relative;
      width: 100%;
      margin-top: 25px;
      display: flex;
      justify-content: space-between;
      color: #666;
      font-size: 12px;
    }
    
    /* Datumswähler */
    .date-picker-container {
      display: none;
      margin: 15px 0;
      padding: 10px;
      border: 1px solid #444;
      border-radius: 4px;
      flex-wrap: wrap;
      gap: 15px;
    }
    
    .date-input-group {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .date-input {
      background: #333;
      color: #fff;
      border: 1px solid #666;
      border-radius: 3px;
      padding: 5px 10px;
      font-size: 14px;
    }
    
    .date-submit {
      background: #00BFFF;
      color: #fff;
      border: none;
      border-radius: 3px;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 13px;
    }
    
    .date-submit:hover {
      opacity: 0.9;
    }
    
    .range-toggle {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-left: 10px;
    }
    
    .range-toggle input {
      margin: 0;
    }

    
  </style>
</head>
<body>
  <!-- Navigationsleiste mit korrigierten Links -->
  <div class="nav-buttons">
    <a href="https://weather.iwind.at/spot/14009/history?day=0&amp;range=day" class="nav-button btn-1">Heute</a>
    <a href="https://weather.iwind.at/spot/14009/history?day=1&amp;range=day" class="nav-button btn-2">Gestern</a>
    <a href="https://weather.iwind.at/spot/14009/history?range=week" class="nav-button btn-3">7 Tage</a>
    
        <a href="https://weather.iwind.at/spot/14009/history?day=263&amp;range=week" class="nav-button btn-4">« Tag zurück</a>
        
        <a href="https://weather.iwind.at/spot/14009/history?day=261&amp;range=week" class="nav-button btn-5">Tag vor »</a>
        
    <a href="#" id="datePickerToggle" class="nav-button btn-6">Datum</a>
    <a href="/map" id="backLink" class="nav-button btn-1">Zurück</a>
  </div>

  <!-- Neuer Datumswähler -->
  <div class="date-picker-container">
    <form id="date-picker-form" method="get" action="https://weather.iwind.at/spot/14009/history">
      <input type="hidden" name="range" value="day">
      <div class="date-input-group">
        <span>Datum:</span>
        <input type="date" name="date" id="date-input" class="date-input" 
               value="2026-06-11">
        
        <div class="range-toggle">
          <input type="checkbox" id="range-toggle" name="use_range" onChange="this.form.range.value = this.checked ? 'custom' : 'day'">
          <label for="range-toggle">Zeitraum</label>
        </div>
        
        <div id="end-date-container" style="display: none;">
          <span>bis:</span>
          <input type="date" name="end_date" id="end-date-input" class="date-input"
                 value="2026-06-17">
        </div>
        
        <button type="submit" class="date-submit">Anzeigen</button>
      </div>
    </form>
  </div>

  <!-- Neuer Datumswähler - nur relevant für "Einzeltag" -->
  <div class="date-picker-container">
    <div class="date-input-group">
      <span>Datum:</span>
      <input type="date" id="customDate" class="date-input" 
             value="2026-06-17">
      
      <button type="button" id="dateSubmit" class="date-submit">Anzeigen</button>
    </div>
  </div>

  <div id="logo-container" style="position: relative; width: 100%; height: 100px; background: #000; display: flex; align-items: center;">
    <!-- Neues iWind-Logo -->
    <a href="/map" style="display:inline-block;">
      <img id="iwind-logo" src="/images/logo-iwind-white.png" alt="iWind" style="position: absolute; left: 900px; top: 710px; height: 35px;">
    </a>
  </div>

  <h1>Windverlauf: Gothenburg</h1>
  
  <!-- Datumsanzeige je nach Range -->
  <div class="date-display">
          11. June - 17. June 2026
      </div>
  <div class="time-display">
    Spot local time (Europe/Stockholm)
  </div>
  
  <div id="chart"></div>
  
  <!-- Doppel-Schieberegler - wird dynamisch angepasst je nach Ansicht -->
  <div class="double-range-slider" id="timeRangeSlider">
    <div class="slider-track"></div>
    <div class="slider-range"></div>
    <div class="slider-thumb" id="startThumb"></div>
    <div class="slider-thumb" id="endThumb"></div>
    <div class="slider-value" id="startValue">00:00</div>
    <div class="slider-value" id="endValue">24:00</div>
    
    <div class="slider-labels" id="sliderLabels">
      <span>00:00</span>
      <span>06:00</span>
      <span>12:00</span>
      <span>18:00</span>
      <span>24:00</span>
    </div>
  </div>
  
  <script>
  // Die exakte Mapping-Tabelle für Wind→Farbe
  const windColorStops = [
      { value: 0,  color: "#FFFFFF" },   // Weiß
      { value: 3,  color: "#A0A0A0" },   // Mittelgrau
      { value: 4,  color: "#C0E0FF" },   // Sehr helles Blau
      { value: 6,  color: "#80C0FF" },   // Hellblau
      { value: 8,  color: "#00BFFF" },   // DeepSkyBlue
      { value: 12, color: "#00CC00" },   // Kräftiges Grün
      { value: 18, color: "#FFCC00" },   // Goldern
      { value: 25, color: "#FF0000" },   // Rot
      { value: 32, color: "#FF00FF" },   // Magenta
      { value: 40, color: "#9400D3" }    // Violett
  ];

  // Berechnet die Farbe basierend auf Windknoten
  function getWindColor(knots) {
    if (knots <= 0) return windColorStops[0].color;
    if (knots >= 40) return windColorStops[windColorStops.length - 1].color;

    let lower = null, upper = null;
    for (let i = 0; i < windColorStops.length - 1; i++) {
      if (knots >= windColorStops[i].value && knots < windColorStops[i + 1].value) {
        lower = windColorStops[i];
        upper = windColorStops[i + 1];
        break;
      }
    }
    if (!lower || !upper) return "#FFFFFF";

    // Lineare Interpolation zwischen den Farbwerten
    const t = (knots - lower.value) / (upper.value - lower.value);
    return d3.interpolateRgb(lower.color, upper.color)(t);
  }

  // Kritische Funktion: Berechnet die Farbe basierend auf Y-Position
  function getColorFromY(y, yScale) {
    // Wandle y-Position zurück in Knoten um
    const knots = yScale.invert(y);
    return getWindColor(knots);
  }

  const spotTimeZoneRaw = "Europe\/Stockholm";
  const spotTimeZone = (() => {
    if (!spotTimeZoneRaw) return 'UTC';
    try {
      Intl.DateTimeFormat('en-US', { timeZone: spotTimeZoneRaw }).format(new Date());
      return spotTimeZoneRaw;
    } catch (_) {
      return 'UTC';
    }
  })();

  const tzPartsFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: spotTimeZone,
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
  const tzHourFormatter = new Intl.DateTimeFormat('de-DE', {
    timeZone: spotTimeZone,
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  });
  const tzDayFormatter = new Intl.DateTimeFormat('de-DE', {
    timeZone: spotTimeZone,
    weekday: 'short',
    day: '2-digit',
    month: '2-digit'
  });

  function getSpotTzParts(date) {
    const parts = tzPartsFormatter.formatToParts(date);
    const out = {};
    parts.forEach(p => {
      if (p.type !== 'literal') out[p.type] = p.value;
    });
    return out;
  }

  function getSpotDayKey(date) {
    const p = getSpotTzParts(date);
    return `${p.year}-${p.month}-${p.day}`;
  }
  
  // Formatiert einen Stundenwert in HH:MM Format
  function formatHour(hour) {
    const h = Math.floor(hour);
    const m = Math.round((hour - h) * 60);
    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
  }
  
  // Datumsformatierung für die Wochenansicht
  function formatDay(day) {
    const date = (day instanceof Date) ? day : new Date(day);
    return tzDayFormatter.format(date);
  }

  function normalizeDegrees(deg) {
    return ((deg % 360) + 360) % 360;
  }

  function degreesToCompass(deg) {
    const dirs = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'];
    const idx = Math.round(normalizeDegrees(deg) / 22.5) % 16;
    return dirs[idx];
  }

  function normalizeDirectionText(value) {
    return String(value || '')
      .trim()
      .toUpperCase()
      .normalize('NFD')
      .replace(/[\u0300-\u036f]/g, '')
      .replace(/[^A-Z]/g, '');
  }

  function parseDirectionDegrees(raw) {
    if (raw == null) return null;
    const str = String(raw).trim();
    if (!str) return null;

    const numeric = Number(str.replace(',', '.'));
    if (Number.isFinite(numeric)) return normalizeDegrees(numeric);

    const key = normalizeDirectionText(str);
    const map = {
      N: 0, NNE: 22.5, NNO: 22.5, NE: 45, NO: 45, ENE: 67.5, ONO: 67.5,
      E: 90, O: 90, ESE: 112.5, OSO: 112.5, SE: 135, SO: 135, SSE: 157.5, SSO: 157.5,
      S: 180, SSW: 202.5, SW: 225, WSW: 247.5, W: 270, WNW: 292.5, NW: 315, NNW: 337.5,
      NORD: 0, NORDNORDOST: 22.5, NORDOST: 45, OSTNORDOST: 67.5,
      OST: 90, OSTSUEDOST: 112.5, SUEDOST: 135, SUEDSUEDOST: 157.5,
      SUED: 180, SUEDSUEDWEST: 202.5, SUEDWEST: 225, WESTSUEDWEST: 247.5,
      WEST: 270, WESTNORDWEST: 292.5, NORDWEST: 315, NORDNORDWEST: 337.5,
      NORTH: 0, NORTHNORTHEAST: 22.5, NORTHEAST: 45, EASTNORTHEAST: 67.5,
      EAST: 90, EASTSOUTHEAST: 112.5, SOUTHEAST: 135, SOUTHSOUTHEAST: 157.5,
      SOUTH: 180, SOUTHSOUTHWEST: 202.5, SOUTHWEST: 225, WESTSOUTHWEST: 247.5,
      WESTNORTHWEST: 292.5, NORTHWEST: 315, NORTHNORTHWEST: 337.5
    };
    return map[key] ?? null;
  }
 
  // Neuer, schmalerer Pfeilpfad
  const arrowPath = "M0,-10 L8,10 L0,5 L-6,10 Z"; // schmälere Pfeilbasis, gleiche Spitze

  function parseMeasuredAtUtcMs(item) {
    if (!item) return null;
    const msDirect = Number(item.measured_at_utc_ms);
    if (Number.isFinite(msDirect) && msDirect > 0) return msDirect;
    const iso = item.measured_at_utc_iso ? String(item.measured_at_utc_iso).trim() : '';
    if (!iso) return null;
    const ms = Date.parse(iso);
    return Number.isFinite(ms) ? ms : null;
  }

  // Funktion: Windpfeile (dynamisch ausgedünnt, um Überlappung zu vermeiden)
  function drawWindArrows(svg, markers, xScale, arrowY, timeDomain) {
    const visible = (markers || []).filter(m =>
      m.date && m.date >= timeDomain[0] && m.date <= timeDomain[1]
    );

    if (!visible.length) return;

    // --- Step B: Dynamic thinning so arrows never overlap on multi-day ranges ---
    // The arrow path spans ~20px (from -10 to +10). When rotated horizontally, its footprint is ~20px.
    // Requirement: at least 2x arrow size spacing in pixels.
    const ARROW_SIZE_PX = 20;
    const BASE_MIN_GAP_PX = ARROW_SIZE_PX * 2; // >= 40px

    const range = xScale.range();
    const chartWidth = Math.abs((range?.[1] ?? 0) - (range?.[0] ?? 0));

    // Keep the minimum spacing stable across screen sizes; never below BASE_MIN_GAP_PX.
    // On very wide charts this can relax a bit but still stays readable.
    const minGapPx = Math.max(BASE_MIN_GAP_PX, Math.round(chartWidth / 30));

    // Greedy keep: draw only if far enough from the last drawn arrow on the x-axis.
    let lastX = -Infinity;

    visible.forEach(m => {
      const deg = parseDirectionDegrees(m.direction);
      if (deg === null) return;

      const px = xScale(m.date);
      if (!Number.isFinite(px)) return;

      if (px - lastX < minGapPx) return;
      lastX = px;

      const displayDeg = normalizeDegrees(deg);
      // Meteorological wind direction is "from". Our arrow shape points "to".
      // Flip by 180° so the wide base indicates where the wind comes from.
      const arrowDeg = normalizeDegrees(displayDeg + 180);

      // Arrow
      svg.append('path')
        .attr('d', arrowPath)
        .attr('class', 'wind-arrow')
        .attr('fill', '#ffffff')
        .attr('transform', `translate(${px}, ${arrowY}) rotate(${arrowDeg})`);

      // Degree label as superscript for better readability
      const degInt = Math.round(displayDeg);
      const degTextNum = (degInt < 100) ? String(degInt).padStart(2, '0') : String(degInt);
      const label = `(${degTextNum}°)`;

      const degText = svg.append('text')
        .attr('class', 'wind-deg-label')
        .attr('x', px + 12)      // offset to the right of the arrow
        .attr('y', arrowY)       // base line at arrow Y
        .attr('text-anchor', 'start');

      // Render as superscript for better readability
      degText.append('tspan')
        .attr('baseline-shift', 'super')
        .text(label);
    });
  }

  document.addEventListener('DOMContentLoaded', function() {
    const windOpacity = 1.0;   
    const gustOpacity = 0.40;  
    const smoothness = 1.0;    
    const curveType = d3.curveCatmullRom.alpha(0.1); 
    const currentRange = 'week'; // Aktuelle Ansicht (day/week)

    // Back link: go to the page we came from (Map etc.), but do NOT hop between history pages.
    (function initHistoryBackLink() {
      const backLink = document.getElementById('backLink');
      if (!backLink) return;

      const spotId = 14009;
      const key = `iwind:historyBackUrl:${spotId}`;
      const globalMapKey = 'iwind:lastMapUrl';

      try {
        const url = new URL(window.location.href);

        // 1) If a back URL is explicitly provided, always use it.
        const backParam = url.searchParams.get('back');
        if (backParam) {
          const decoded = decodeURIComponent(backParam);
          backLink.href = decoded;
          sessionStorage.setItem(key, decoded);
          // also keep a global last-map url if it is a /map link
          try {
            const p = new URL(decoded).pathname || '';
            if (p.startsWith('/map')) sessionStorage.setItem(globalMapKey, decoded);
          } catch (_) {}
          return;
        }

        // 2) Prefer a global last-map URL if present (will be set by the map page).
        const lastMap = sessionStorage.getItem(globalMapKey);
        if (lastMap) backLink.href = lastMap;

        // 3) Update stored back URL from referrer, but ONLY if it is not another history page.
        const ref = document.referrer || '';
        if (ref && ref.startsWith(window.location.origin)) {
          const refUrl = new URL(ref);
          const refPath = refUrl.pathname || '';
          const isHistoryRef = /^\/spot\/\d+\/history(?:\/|$)/.test(refPath);
          if (!isHistoryRef) {
            // If coming from the map, store it as "last map" too.
            if (refPath.startsWith('/map')) {
              sessionStorage.setItem(globalMapKey, ref);
              backLink.href = ref;
            }
            sessionStorage.setItem(key, ref);
          }
        }

        // 4) Finally apply the spot-specific stored value (if any)
        const saved = sessionStorage.getItem(key);
        if (saved) backLink.href = saved;
      } catch (_) {
        // keep default /map
      }
    })();
    
    // Datumswähler-Einstellungen
    const rangeToggle = document.getElementById('range-toggle');
    const endDateContainer = document.getElementById('end-date-container');
    
    rangeToggle.addEventListener('change', function() {
      endDateContainer.style.display = this.checked ? 'block' : 'none';
    });

    // Daten:
    const dataFromBlade = [{"time":"2026-06-11 00:25:02","measured_at_utc_iso":"2026-06-11T00:25:02Z","measured_at_utc_ms":1781137502000,"wind_speed":0,"gusts":0,"direction":"340"},{"time":"2026-06-11 01:25:14","measured_at_utc_iso":"2026-06-11T01:25:14Z","measured_at_utc_ms":1781141114000,"wind_speed":0,"gusts":0,"direction":"341"},{"time":"2026-06-11 02:25:27","measured_at_utc_iso":"2026-06-11T02:25:27Z","measured_at_utc_ms":1781144727000,"wind_speed":0,"gusts":0,"direction":"353"},{"time":"2026-06-11 03:20:38","measured_at_utc_iso":"2026-06-11T03:20:38Z","measured_at_utc_ms":1781148038000,"wind_speed":0,"gusts":0,"direction":"312"},{"time":"2026-06-11 04:20:50","measured_at_utc_iso":"2026-06-11T04:20:50Z","measured_at_utc_ms":1781151650000,"wind_speed":0,"gusts":0,"direction":"348"},{"time":"2026-06-11 05:21:02","measured_at_utc_iso":"2026-06-11T05:21:02Z","measured_at_utc_ms":1781155262000,"wind_speed":0,"gusts":0,"direction":"262"},{"time":"2026-06-11 06:21:14","measured_at_utc_iso":"2026-06-11T06:21:14Z","measured_at_utc_ms":1781158874000,"wind_speed":0,"gusts":0,"direction":"316"},{"time":"2026-06-11 07:16:25","measured_at_utc_iso":"2026-06-11T07:16:25Z","measured_at_utc_ms":1781162185000,"wind_speed":0,"gusts":0,"direction":"323"},{"time":"2026-06-11 08:21:38","measured_at_utc_iso":"2026-06-11T08:21:38Z","measured_at_utc_ms":1781166098000,"wind_speed":0,"gusts":0,"direction":"260"},{"time":"2026-06-11 09:21:50","measured_at_utc_iso":"2026-06-11T09:21:50Z","measured_at_utc_ms":1781169710000,"wind_speed":0,"gusts":0,"direction":"340"},{"time":"2026-06-11 10:22:03","measured_at_utc_iso":"2026-06-11T10:22:03Z","measured_at_utc_ms":1781173323000,"wind_speed":0,"gusts":0,"direction":"319"},{"time":"2026-06-11 11:22:16","measured_at_utc_iso":"2026-06-11T11:22:16Z","measured_at_utc_ms":1781176936000,"wind_speed":0,"gusts":0,"direction":"209"},{"time":"2026-06-11 12:22:28","measured_at_utc_iso":"2026-06-11T12:22:28Z","measured_at_utc_ms":1781180548000,"wind_speed":1.1317327386401,"gusts":1.13173,"direction":"237"},{"time":"2026-06-11 13:22:40","measured_at_utc_iso":"2026-06-11T13:22:40Z","measured_at_utc_ms":1781184160000,"wind_speed":0,"gusts":0,"direction":"304"},{"time":"2026-06-11 14:22:52","measured_at_utc_iso":"2026-06-11T14:22:52Z","measured_at_utc_ms":1781187772000,"wind_speed":0,"gusts":0,"direction":"288"},{"time":"2026-06-11 15:23:04","measured_at_utc_iso":"2026-06-11T15:23:04Z","measured_at_utc_ms":1781191384000,"wind_speed":0,"gusts":0,"direction":"345"},{"time":"2026-06-11 16:23:16","measured_at_utc_iso":"2026-06-11T16:23:16Z","measured_at_utc_ms":1781194996000,"wind_speed":0,"gusts":0,"direction":"257"},{"time":"2026-06-11 17:23:28","measured_at_utc_iso":"2026-06-11T17:23:28Z","measured_at_utc_ms":1781198608000,"wind_speed":0,"gusts":0,"direction":"307"},{"time":"2026-06-11 18:23:40","measured_at_utc_iso":"2026-06-11T18:23:40Z","measured_at_utc_ms":1781202220000,"wind_speed":0,"gusts":0,"direction":"313"},{"time":"2026-06-11 19:23:52","measured_at_utc_iso":"2026-06-11T19:23:52Z","measured_at_utc_ms":1781205832000,"wind_speed":0,"gusts":0,"direction":"333"},{"time":"2026-06-11 20:24:06","measured_at_utc_iso":"2026-06-11T20:24:06Z","measured_at_utc_ms":1781209446000,"wind_speed":0,"gusts":0,"direction":"334"},{"time":"2026-06-11 21:24:18","measured_at_utc_iso":"2026-06-11T21:24:18Z","measured_at_utc_ms":1781213058000,"wind_speed":0,"gusts":0,"direction":"343"},{"time":"2026-06-11 22:24:30","measured_at_utc_iso":"2026-06-11T22:24:30Z","measured_at_utc_ms":1781216670000,"wind_speed":0,"gusts":0,"direction":"345"},{"time":"2026-06-11 23:24:42","measured_at_utc_iso":"2026-06-11T23:24:42Z","measured_at_utc_ms":1781220282000,"wind_speed":0,"gusts":0,"direction":"343"},{"time":"2026-06-12 00:24:54","measured_at_utc_iso":"2026-06-12T00:24:54Z","measured_at_utc_ms":1781223894000,"wind_speed":0,"gusts":0,"direction":"344"},{"time":"2026-06-12 01:25:06","measured_at_utc_iso":"2026-06-12T01:25:06Z","measured_at_utc_ms":1781227506000,"wind_speed":0,"gusts":0,"direction":"346"},{"time":"2026-06-12 02:25:18","measured_at_utc_iso":"2026-06-12T02:25:18Z","measured_at_utc_ms":1781231118000,"wind_speed":0,"gusts":0,"direction":"344"},{"time":"2026-06-12 03:20:29","measured_at_utc_iso":"2026-06-12T03:20:29Z","measured_at_utc_ms":1781234429000,"wind_speed":0,"gusts":0,"direction":"342"},{"time":"2026-06-12 04:20:42","measured_at_utc_iso":"2026-06-12T04:20:42Z","measured_at_utc_ms":1781238042000,"wind_speed":0,"gusts":0,"direction":"344"},{"time":"2026-06-12 05:20:54","measured_at_utc_iso":"2026-06-12T05:20:54Z","measured_at_utc_ms":1781241654000,"wind_speed":0,"gusts":0,"direction":"344"},{"time":"2026-06-12 06:21:06","measured_at_utc_iso":"2026-06-12T06:21:06Z","measured_at_utc_ms":1781245266000,"wind_speed":0,"gusts":0,"direction":"338"},{"time":"2026-06-12 07:21:18","measured_at_utc_iso":"2026-06-12T07:21:18Z","measured_at_utc_ms":1781248878000,"wind_speed":0,"gusts":0,"direction":"309"},{"time":"2026-06-12 08:21:30","measured_at_utc_iso":"2026-06-12T08:21:30Z","measured_at_utc_ms":1781252490000,"wind_speed":0.37161373507586,"gusts":0.371614,"direction":"192"},{"time":"2026-06-12 09:21:43","measured_at_utc_iso":"2026-06-12T09:21:43Z","measured_at_utc_ms":1781256103000,"wind_speed":0,"gusts":0,"direction":"103"},{"time":"2026-06-12 10:21:55","measured_at_utc_iso":"2026-06-12T10:21:55Z","measured_at_utc_ms":1781259715000,"wind_speed":0,"gusts":0,"direction":"71"},{"time":"2026-06-12 11:22:08","measured_at_utc_iso":"2026-06-12T11:22:08Z","measured_at_utc_ms":1781263328000,"wind_speed":0,"gusts":0,"direction":"266"},{"time":"2026-06-12 12:22:34","measured_at_utc_iso":"2026-06-12T12:22:34Z","measured_at_utc_ms":1781266954000,"wind_speed":0.37161373507586,"gusts":0.371614,"direction":"200"},{"time":"2026-06-12 13:22:46","measured_at_utc_iso":"2026-06-12T13:22:46Z","measured_at_utc_ms":1781270566000,"wind_speed":6.8072879652532,"gusts":6.80729,"direction":"119"},{"time":"2026-06-12 14:22:58","measured_at_utc_iso":"2026-06-12T14:22:58Z","measured_at_utc_ms":1781274178000,"wind_speed":3.7837034844087,"gusts":3.7837,"direction":"330"},{"time":"2026-06-12 15:23:10","measured_at_utc_iso":"2026-06-12T15:23:10Z","measured_at_utc_ms":1781277790000,"wind_speed":0,"gusts":0,"direction":"111"},{"time":"2026-06-12 16:23:22","measured_at_utc_iso":"2026-06-12T16:23:22Z","measured_at_utc_ms":1781281402000,"wind_speed":4.5269309545604,"gusts":4.52693,"direction":"71"},{"time":"2026-06-12 17:23:35","measured_at_utc_iso":"2026-06-12T17:23:35Z","measured_at_utc_ms":1781285015000,"wind_speed":0,"gusts":0,"direction":"7"},{"time":"2026-06-12 18:23:47","measured_at_utc_iso":"2026-06-12T18:23:47Z","measured_at_utc_ms":1781288627000,"wind_speed":0,"gusts":0,"direction":"355"},{"time":"2026-06-12 19:23:58","measured_at_utc_iso":"2026-06-12T19:23:58Z","measured_at_utc_ms":1781292238000,"wind_speed":0,"gusts":0,"direction":"62"},{"time":"2026-06-12 20:24:11","measured_at_utc_iso":"2026-06-12T20:24:11Z","measured_at_utc_ms":1781295851000,"wind_speed":0,"gusts":0,"direction":"357"},{"time":"2026-06-12 21:24:23","measured_at_utc_iso":"2026-06-12T21:24:23Z","measured_at_utc_ms":1781299463000,"wind_speed":0,"gusts":0,"direction":"339"},{"time":"2026-06-12 22:24:36","measured_at_utc_iso":"2026-06-12T22:24:36Z","measured_at_utc_ms":1781303076000,"wind_speed":0,"gusts":0,"direction":"286"},{"time":"2026-06-13 00:19:59","measured_at_utc_iso":"2026-06-13T00:19:59Z","measured_at_utc_ms":1781309999000,"wind_speed":0,"gusts":0,"direction":"254"},{"time":"2026-06-13 01:20:12","measured_at_utc_iso":"2026-06-13T01:20:12Z","measured_at_utc_ms":1781313612000,"wind_speed":0,"gusts":0,"direction":"292"},{"time":"2026-06-13 02:20:24","measured_at_utc_iso":"2026-06-13T02:20:24Z","measured_at_utc_ms":1781317224000,"wind_speed":3.3951982159203,"gusts":3.3952,"direction":"346"},{"time":"2026-06-13 03:15:35","measured_at_utc_iso":"2026-06-13T03:15:35Z","measured_at_utc_ms":1781320535000,"wind_speed":0,"gusts":0,"direction":"22"},{"time":"2026-06-13 04:15:47","measured_at_utc_iso":"2026-06-13T04:15:47Z","measured_at_utc_ms":1781324147000,"wind_speed":0.76011900356425,"gusts":0.760119,"direction":"306"},{"time":"2026-06-13 05:15:59","measured_at_utc_iso":"2026-06-13T05:15:59Z","measured_at_utc_ms":1781327759000,"wind_speed":1.1317327386401,"gusts":1.13173,"direction":"338"},{"time":"2026-06-13 06:16:11","measured_at_utc_iso":"2026-06-13T06:16:11Z","measured_at_utc_ms":1781331371000,"wind_speed":0,"gusts":0,"direction":"331"},{"time":"2026-06-13 07:16:23","measured_at_utc_iso":"2026-06-13T07:16:23Z","measured_at_utc_ms":1781334983000,"wind_speed":5.6755552266131,"gusts":5.67556,"direction":"215"},{"time":"2026-06-13 08:16:35","measured_at_utc_iso":"2026-06-13T08:16:35Z","measured_at_utc_ms":1781338595000,"wind_speed":8.682248174045,"gusts":8.68225,"direction":"240"},{"time":"2026-06-13 09:16:48","measured_at_utc_iso":"2026-06-13T09:16:48Z","measured_at_utc_ms":1781342208000,"wind_speed":0,"gusts":0,"direction":"332"},{"time":"2026-06-13 10:17:00","measured_at_utc_iso":"2026-06-13T10:17:00Z","measured_at_utc_ms":1781345820000,"wind_speed":0,"gusts":0,"direction":"348"},{"time":"2026-06-13 11:17:14","measured_at_utc_iso":"2026-06-13T11:17:14Z","measured_at_utc_ms":1781349434000,"wind_speed":0,"gusts":0,"direction":"327"},{"time":"2026-06-13 12:17:25","measured_at_utc_iso":"2026-06-13T12:17:25Z","measured_at_utc_ms":1781353045000,"wind_speed":0,"gusts":0,"direction":"148"},{"time":"2026-06-13 13:17:37","measured_at_utc_iso":"2026-06-13T13:17:37Z","measured_at_utc_ms":1781356657000,"wind_speed":0,"gusts":0,"direction":"38"},{"time":"2026-06-13 14:17:49","measured_at_utc_iso":"2026-06-13T14:17:49Z","measured_at_utc_ms":1781360269000,"wind_speed":0,"gusts":0,"direction":"3"},{"time":"2026-06-13 15:18:01","measured_at_utc_iso":"2026-06-13T15:18:01Z","measured_at_utc_ms":1781363881000,"wind_speed":0,"gusts":0,"direction":"3"},{"time":"2026-06-13 16:18:13","measured_at_utc_iso":"2026-06-13T16:18:13Z","measured_at_utc_ms":1781367493000,"wind_speed":0,"gusts":0,"direction":"344"},{"time":"2026-06-13 17:18:26","measured_at_utc_iso":"2026-06-13T17:18:26Z","measured_at_utc_ms":1781371106000,"wind_speed":0,"gusts":0,"direction":"334"},{"time":"2026-06-13 18:18:38","measured_at_utc_iso":"2026-06-13T18:18:38Z","measured_at_utc_ms":1781374718000,"wind_speed":0,"gusts":0,"direction":"319"},{"time":"2026-06-13 19:18:50","measured_at_utc_iso":"2026-06-13T19:18:50Z","measured_at_utc_ms":1781378330000,"wind_speed":0,"gusts":0,"direction":"340"},{"time":"2026-06-13 20:19:03","measured_at_utc_iso":"2026-06-13T20:19:03Z","measured_at_utc_ms":1781381943000,"wind_speed":0,"gusts":0,"direction":"343"},{"time":"2026-06-13 21:19:15","measured_at_utc_iso":"2026-06-13T21:19:15Z","measured_at_utc_ms":1781385555000,"wind_speed":0,"gusts":0,"direction":"346"},{"time":"2026-06-13 22:19:27","measured_at_utc_iso":"2026-06-13T22:19:27Z","measured_at_utc_ms":1781389167000,"wind_speed":0,"gusts":0,"direction":"346"},{"time":"2026-06-13 23:19:39","measured_at_utc_iso":"2026-06-13T23:19:39Z","measured_at_utc_ms":1781392779000,"wind_speed":0,"gusts":0,"direction":"345"},{"time":"2026-06-14 00:19:51","measured_at_utc_iso":"2026-06-14T00:19:51Z","measured_at_utc_ms":1781396391000,"wind_speed":0,"gusts":0,"direction":"345"},{"time":"2026-06-14 01:20:03","measured_at_utc_iso":"2026-06-14T01:20:03Z","measured_at_utc_ms":1781400003000,"wind_speed":0,"gusts":0,"direction":"348"},{"time":"2026-06-14 02:20:15","measured_at_utc_iso":"2026-06-14T02:20:15Z","measured_at_utc_ms":1781403615000,"wind_speed":0,"gusts":0,"direction":"346"},{"time":"2026-06-14 03:15:26","measured_at_utc_iso":"2026-06-14T03:15:26Z","measured_at_utc_ms":1781406926000,"wind_speed":0,"gusts":0,"direction":"345"},{"time":"2026-06-14 04:15:38","measured_at_utc_iso":"2026-06-14T04:15:38Z","measured_at_utc_ms":1781410538000,"wind_speed":0,"gusts":0,"direction":"357"},{"time":"2026-06-14 05:15:51","measured_at_utc_iso":"2026-06-14T05:15:51Z","measured_at_utc_ms":1781414151000,"wind_speed":0,"gusts":0,"direction":"292"},{"time":"2026-06-14 06:16:04","measured_at_utc_iso":"2026-06-14T06:16:04Z","measured_at_utc_ms":1781417764000,"wind_speed":0,"gusts":0,"direction":"352"},{"time":"2026-06-14 07:16:16","measured_at_utc_iso":"2026-06-14T07:16:16Z","measured_at_utc_ms":1781421376000,"wind_speed":2.6519707457686,"gusts":2.65197,"direction":"33"},{"time":"2026-06-14 08:16:28","measured_at_utc_iso":"2026-06-14T08:16:28Z","measured_at_utc_ms":1781424988000,"wind_speed":12.094337923378,"gusts":12.0943,"direction":"336"},{"time":"2026-06-14 09:16:40","measured_at_utc_iso":"2026-06-14T09:16:40Z","measured_at_utc_ms":1781428600000,"wind_speed":6.8072879652532,"gusts":6.80729,"direction":"9"},{"time":"2026-06-14 10:16:52","measured_at_utc_iso":"2026-06-14T10:16:52Z","measured_at_utc_ms":1781432212000,"wind_speed":0,"gusts":0,"direction":"21"},{"time":"2026-06-14 11:18:54","measured_at_utc_iso":"2026-06-14T11:18:54Z","measured_at_utc_ms":1781435934000,"wind_speed":0,"gusts":0,"direction":"341"},{"time":"2026-06-14 12:19:07","measured_at_utc_iso":"2026-06-14T12:19:07Z","measured_at_utc_ms":1781439547000,"wind_speed":0,"gusts":0,"direction":"337"},{"time":"2026-06-14 13:19:19","measured_at_utc_iso":"2026-06-14T13:19:19Z","measured_at_utc_ms":1781443159000,"wind_speed":0.37161373507586,"gusts":0.371614,"direction":"350"},{"time":"2026-06-14 14:19:30","measured_at_utc_iso":"2026-06-14T14:19:30Z","measured_at_utc_ms":1781446770000,"wind_speed":0.37161373507586,"gusts":0.371614,"direction":"292"},{"time":"2026-06-14 15:19:42","measured_at_utc_iso":"2026-06-14T15:19:42Z","measured_at_utc_ms":1781450382000,"wind_speed":0,"gusts":0,"direction":"329"},{"time":"2026-06-14 16:19:55","measured_at_utc_iso":"2026-06-14T16:19:55Z","measured_at_utc_ms":1781453995000,"wind_speed":0,"gusts":0,"direction":"1"},{"time":"2026-06-14 17:20:08","measured_at_utc_iso":"2026-06-14T17:20:08Z","measured_at_utc_ms":1781457608000,"wind_speed":0,"gusts":0,"direction":"315"},{"time":"2026-06-14 18:20:20","measured_at_utc_iso":"2026-06-14T18:20:20Z","measured_at_utc_ms":1781461220000,"wind_speed":0,"gusts":0,"direction":"283"},{"time":"2026-06-14 19:15:31","measured_at_utc_iso":"2026-06-14T19:15:31Z","measured_at_utc_ms":1781464531000,"wind_speed":0,"gusts":0,"direction":"332"},{"time":"2026-06-14 20:15:43","measured_at_utc_iso":"2026-06-14T20:15:43Z","measured_at_utc_ms":1781468143000,"wind_speed":0,"gusts":0,"direction":"313"},{"time":"2026-06-14 21:15:55","measured_at_utc_iso":"2026-06-14T21:15:55Z","measured_at_utc_ms":1781471755000,"wind_speed":0,"gusts":0,"direction":"343"},{"time":"2026-06-14 22:16:07","measured_at_utc_iso":"2026-06-14T22:16:07Z","measured_at_utc_ms":1781475367000,"wind_speed":0,"gusts":0,"direction":"334"},{"time":"2026-06-14 23:16:19","measured_at_utc_iso":"2026-06-14T23:16:19Z","measured_at_utc_ms":1781478979000,"wind_speed":0,"gusts":0,"direction":"342"},{"time":"2026-06-15 00:16:32","measured_at_utc_iso":"2026-06-15T00:16:32Z","measured_at_utc_ms":1781482592000,"wind_speed":0,"gusts":0,"direction":"328"},{"time":"2026-06-15 01:16:44","measured_at_utc_iso":"2026-06-15T01:16:44Z","measured_at_utc_ms":1781486204000,"wind_speed":9.4423671776092,"gusts":9.44237,"direction":"329"},{"time":"2026-06-15 02:16:56","measured_at_utc_iso":"2026-06-15T02:16:56Z","measured_at_utc_ms":1781489816000,"wind_speed":0,"gusts":0,"direction":"345"},{"time":"2026-06-15 03:17:08","measured_at_utc_iso":"2026-06-15T03:17:08Z","measured_at_utc_ms":1781493428000,"wind_speed":0,"gusts":0,"direction":"337"},{"time":"2026-06-15 04:17:21","measured_at_utc_iso":"2026-06-15T04:17:21Z","measured_at_utc_ms":1781497041000,"wind_speed":0.76011900356425,"gusts":0.760119,"direction":"302"},{"time":"2026-06-15 05:17:33","measured_at_utc_iso":"2026-06-15T05:17:33Z","measured_at_utc_ms":1781500653000,"wind_speed":7.5505154354049,"gusts":7.55052,"direction":"330"},{"time":"2026-06-15 06:17:45","measured_at_utc_iso":"2026-06-15T06:17:45Z","measured_at_utc_ms":1781504265000,"wind_speed":4.1553172194846,"gusts":4.15532,"direction":"337"},{"time":"2026-06-15 07:17:57","measured_at_utc_iso":"2026-06-15T07:17:57Z","measured_at_utc_ms":1781507877000,"wind_speed":0,"gusts":0,"direction":"342"},{"time":"2026-06-15 08:18:09","measured_at_utc_iso":"2026-06-15T08:18:09Z","measured_at_utc_ms":1781511489000,"wind_speed":5.6755552266131,"gusts":5.67556,"direction":"338"},{"time":"2026-06-15 10:13:33","measured_at_utc_iso":"2026-06-15T10:13:33Z","measured_at_utc_ms":1781518413000,"wind_speed":4.9154362230488,"gusts":4.91544,"direction":"1"},{"time":"2026-06-15 11:13:45","measured_at_utc_iso":"2026-06-15T11:13:45Z","measured_at_utc_ms":1781522025000,"wind_speed":0,"gusts":0,"direction":"332"},{"time":"2026-06-15 12:13:57","measured_at_utc_iso":"2026-06-15T12:13:57Z","measured_at_utc_ms":1781525637000,"wind_speed":1.503346473716,"gusts":1.50335,"direction":"345"},{"time":"2026-06-15 13:14:09","measured_at_utc_iso":"2026-06-15T13:14:09Z","measured_at_utc_ms":1781529249000,"wind_speed":0,"gusts":0,"direction":"10"},{"time":"2026-06-15 14:14:21","measured_at_utc_iso":"2026-06-15T14:14:21Z","measured_at_utc_ms":1781532861000,"wind_speed":0,"gusts":0,"direction":"354"},{"time":"2026-06-15 15:14:34","measured_at_utc_iso":"2026-06-15T15:14:34Z","measured_at_utc_ms":1781536474000,"wind_speed":0,"gusts":0,"direction":"328"},{"time":"2026-06-15 16:14:46","measured_at_utc_iso":"2026-06-15T16:14:46Z","measured_at_utc_ms":1781540086000,"wind_speed":8.682248174045,"gusts":8.68225,"direction":"33"},{"time":"2026-06-15 17:14:59","measured_at_utc_iso":"2026-06-15T17:14:59Z","measured_at_utc_ms":1781543699000,"wind_speed":0,"gusts":0,"direction":"340"},{"time":"2026-06-15 18:15:11","measured_at_utc_iso":"2026-06-15T18:15:11Z","measured_at_utc_ms":1781547311000,"wind_speed":0,"gusts":0,"direction":"303"},{"time":"2026-06-15 19:15:23","measured_at_utc_iso":"2026-06-15T19:15:23Z","measured_at_utc_ms":1781550923000,"wind_speed":0,"gusts":0,"direction":"342"},{"time":"2026-06-15 20:10:35","measured_at_utc_iso":"2026-06-15T20:10:35Z","measured_at_utc_ms":1781554235000,"wind_speed":0,"gusts":0,"direction":"332"},{"time":"2026-06-15 22:01:10","measured_at_utc_iso":"2026-06-15T22:01:10Z","measured_at_utc_ms":1781560870000,"wind_speed":0,"gusts":0,"direction":"342"},{"time":"2026-06-15 23:01:22","measured_at_utc_iso":"2026-06-15T23:01:22Z","measured_at_utc_ms":1781564482000,"wind_speed":0,"gusts":0,"direction":"297"},{"time":"2026-06-16 00:01:35","measured_at_utc_iso":"2026-06-16T00:01:35Z","measured_at_utc_ms":1781568095000,"wind_speed":0,"gusts":0,"direction":"328"},{"time":"2026-06-16 01:01:48","measured_at_utc_iso":"2026-06-16T01:01:48Z","measured_at_utc_ms":1781571708000,"wind_speed":0,"gusts":0,"direction":"329"},{"time":"2026-06-16 02:01:59","measured_at_utc_iso":"2026-06-16T02:01:59Z","measured_at_utc_ms":1781575319000,"wind_speed":0,"gusts":0,"direction":"313"},{"time":"2026-06-16 03:02:12","measured_at_utc_iso":"2026-06-16T03:02:12Z","measured_at_utc_ms":1781578932000,"wind_speed":0,"gusts":0,"direction":"337"},{"time":"2026-06-16 04:02:24","measured_at_utc_iso":"2026-06-16T04:02:24Z","measured_at_utc_ms":1781582544000,"wind_speed":0,"gusts":0,"direction":"334"},{"time":"2026-06-16 05:02:36","measured_at_utc_iso":"2026-06-16T05:02:36Z","measured_at_utc_ms":1781586156000,"wind_speed":0,"gusts":0,"direction":"214"},{"time":"2026-06-16 06:02:48","measured_at_utc_iso":"2026-06-16T06:02:48Z","measured_at_utc_ms":1781589768000,"wind_speed":0,"gusts":0,"direction":"327"},{"time":"2026-06-16 07:03:00","measured_at_utc_iso":"2026-06-16T07:03:00Z","measured_at_utc_ms":1781593380000,"wind_speed":0,"gusts":0,"direction":"22"},{"time":"2026-06-16 08:03:12","measured_at_utc_iso":"2026-06-16T08:03:12Z","measured_at_utc_ms":1781596992000,"wind_speed":0,"gusts":0,"direction":"266"},{"time":"2026-06-16 09:03:25","measured_at_utc_iso":"2026-06-16T09:03:25Z","measured_at_utc_ms":1781600605000,"wind_speed":0,"gusts":0,"direction":"286"},{"time":"2026-06-16 10:03:37","measured_at_utc_iso":"2026-06-16T10:03:37Z","measured_at_utc_ms":1781604217000,"wind_speed":0,"gusts":0,"direction":"163"},{"time":"2026-06-16 11:03:49","measured_at_utc_iso":"2026-06-16T11:03:49Z","measured_at_utc_ms":1781607829000,"wind_speed":1.1317327386401,"gusts":1.13173,"direction":"276"},{"time":"2026-06-16 12:04:01","measured_at_utc_iso":"2026-06-16T12:04:01Z","measured_at_utc_ms":1781611441000,"wind_speed":0.37161373507586,"gusts":0.371614,"direction":"174"},{"time":"2026-06-16 13:04:14","measured_at_utc_iso":"2026-06-16T13:04:14Z","measured_at_utc_ms":1781615054000,"wind_speed":1.1317327386401,"gusts":1.13173,"direction":"242"},{"time":"2026-06-16 14:04:26","measured_at_utc_iso":"2026-06-16T14:04:26Z","measured_at_utc_ms":1781618666000,"wind_speed":0,"gusts":0,"direction":"306"},{"time":"2026-06-16 15:04:38","measured_at_utc_iso":"2026-06-16T15:04:38Z","measured_at_utc_ms":1781622278000,"wind_speed":0.37161373507586,"gusts":0.371614,"direction":"243"},{"time":"2026-06-16 16:04:50","measured_at_utc_iso":"2026-06-16T16:04:50Z","measured_at_utc_ms":1781625890000,"wind_speed":1.1317327386401,"gusts":1.13173,"direction":"258"},{"time":"2026-06-16 17:05:02","measured_at_utc_iso":"2026-06-16T17:05:02Z","measured_at_utc_ms":1781629502000,"wind_speed":0,"gusts":0,"direction":"326"},{"time":"2026-06-16 18:05:14","measured_at_utc_iso":"2026-06-16T18:05:14Z","measured_at_utc_ms":1781633114000,"wind_speed":0.37161373507586,"gusts":0.371614,"direction":"289"},{"time":"2026-06-16 19:05:27","measured_at_utc_iso":"2026-06-16T19:05:27Z","measured_at_utc_ms":1781636727000,"wind_speed":0,"gusts":0,"direction":"312"},{"time":"2026-06-16 20:00:38","measured_at_utc_iso":"2026-06-16T20:00:38Z","measured_at_utc_ms":1781640038000,"wind_speed":0,"gusts":0,"direction":"311"},{"time":"2026-06-16 21:00:50","measured_at_utc_iso":"2026-06-16T21:00:50Z","measured_at_utc_ms":1781643650000,"wind_speed":0,"gusts":0,"direction":"265"},{"time":"2026-06-16 22:01:02","measured_at_utc_iso":"2026-06-16T22:01:02Z","measured_at_utc_ms":1781647262000,"wind_speed":0,"gusts":0,"direction":"260"},{"time":"2026-06-16 23:01:14","measured_at_utc_iso":"2026-06-16T23:01:14Z","measured_at_utc_ms":1781650874000,"wind_speed":0,"gusts":0,"direction":"280"},{"time":"2026-06-17 00:01:27","measured_at_utc_iso":"2026-06-17T00:01:27Z","measured_at_utc_ms":1781654487000,"wind_speed":0,"gusts":0,"direction":"307"},{"time":"2026-06-17 01:01:39","measured_at_utc_iso":"2026-06-17T01:01:39Z","measured_at_utc_ms":1781658099000,"wind_speed":0,"gusts":0,"direction":"341"},{"time":"2026-06-17 02:01:51","measured_at_utc_iso":"2026-06-17T02:01:51Z","measured_at_utc_ms":1781661711000,"wind_speed":0,"gusts":0,"direction":"319"},{"time":"2026-06-17 03:02:04","measured_at_utc_iso":"2026-06-17T03:02:04Z","measured_at_utc_ms":1781665324000,"wind_speed":0,"gusts":0,"direction":"334"},{"time":"2026-06-17 04:02:16","measured_at_utc_iso":"2026-06-17T04:02:16Z","measured_at_utc_ms":1781668936000,"wind_speed":0,"gusts":0,"direction":"316"},{"time":"2026-06-17 05:02:28","measured_at_utc_iso":"2026-06-17T05:02:28Z","measured_at_utc_ms":1781672548000,"wind_speed":0,"gusts":0,"direction":"47"},{"time":"2026-06-17 06:02:40","measured_at_utc_iso":"2026-06-17T06:02:40Z","measured_at_utc_ms":1781676160000,"wind_speed":2.6519707457686,"gusts":2.65197,"direction":"40"},{"time":"2026-06-17 07:02:52","measured_at_utc_iso":"2026-06-17T07:02:52Z","measured_at_utc_ms":1781679772000,"wind_speed":0,"gusts":0,"direction":"338"}];
    const directionMarkersFromBlade = [{"measured_at_utc_iso":"2026-06-11T00:25:02Z","measured_at_utc_ms":1781137502000,"direction":"340"},{"measured_at_utc_iso":"2026-06-11T01:25:14Z","measured_at_utc_ms":1781141114000,"direction":"341"},{"measured_at_utc_iso":"2026-06-11T02:25:27Z","measured_at_utc_ms":1781144727000,"direction":"353"},{"measured_at_utc_iso":"2026-06-11T03:20:38Z","measured_at_utc_ms":1781148038000,"direction":"312"},{"measured_at_utc_iso":"2026-06-11T04:20:50Z","measured_at_utc_ms":1781151650000,"direction":"348"},{"measured_at_utc_iso":"2026-06-11T05:21:02Z","measured_at_utc_ms":1781155262000,"direction":"262"},{"measured_at_utc_iso":"2026-06-11T06:21:14Z","measured_at_utc_ms":1781158874000,"direction":"316"},{"measured_at_utc_iso":"2026-06-11T07:16:25Z","measured_at_utc_ms":1781162185000,"direction":"323"},{"measured_at_utc_iso":"2026-06-11T08:21:38Z","measured_at_utc_ms":1781166098000,"direction":"260"},{"measured_at_utc_iso":"2026-06-11T09:21:50Z","measured_at_utc_ms":1781169710000,"direction":"340"},{"measured_at_utc_iso":"2026-06-11T10:22:03Z","measured_at_utc_ms":1781173323000,"direction":"319"},{"measured_at_utc_iso":"2026-06-11T11:22:16Z","measured_at_utc_ms":1781176936000,"direction":"209"},{"measured_at_utc_iso":"2026-06-11T12:22:28Z","measured_at_utc_ms":1781180548000,"direction":"237"},{"measured_at_utc_iso":"2026-06-11T13:22:40Z","measured_at_utc_ms":1781184160000,"direction":"304"},{"measured_at_utc_iso":"2026-06-11T14:22:52Z","measured_at_utc_ms":1781187772000,"direction":"288"},{"measured_at_utc_iso":"2026-06-11T15:23:04Z","measured_at_utc_ms":1781191384000,"direction":"345"},{"measured_at_utc_iso":"2026-06-11T16:23:16Z","measured_at_utc_ms":1781194996000,"direction":"257"},{"measured_at_utc_iso":"2026-06-11T17:23:28Z","measured_at_utc_ms":1781198608000,"direction":"307"},{"measured_at_utc_iso":"2026-06-11T18:23:40Z","measured_at_utc_ms":1781202220000,"direction":"313"},{"measured_at_utc_iso":"2026-06-11T19:23:52Z","measured_at_utc_ms":1781205832000,"direction":"333"},{"measured_at_utc_iso":"2026-06-11T20:24:06Z","measured_at_utc_ms":1781209446000,"direction":"334"},{"measured_at_utc_iso":"2026-06-11T21:24:18Z","measured_at_utc_ms":1781213058000,"direction":"343"},{"measured_at_utc_iso":"2026-06-11T22:24:30Z","measured_at_utc_ms":1781216670000,"direction":"345"},{"measured_at_utc_iso":"2026-06-11T23:24:42Z","measured_at_utc_ms":1781220282000,"direction":"343"},{"measured_at_utc_iso":"2026-06-12T00:24:54Z","measured_at_utc_ms":1781223894000,"direction":"344"},{"measured_at_utc_iso":"2026-06-12T01:25:06Z","measured_at_utc_ms":1781227506000,"direction":"346"},{"measured_at_utc_iso":"2026-06-12T02:25:18Z","measured_at_utc_ms":1781231118000,"direction":"344"},{"measured_at_utc_iso":"2026-06-12T03:20:29Z","measured_at_utc_ms":1781234429000,"direction":"342"},{"measured_at_utc_iso":"2026-06-12T04:20:42Z","measured_at_utc_ms":1781238042000,"direction":"344"},{"measured_at_utc_iso":"2026-06-12T05:20:54Z","measured_at_utc_ms":1781241654000,"direction":"344"},{"measured_at_utc_iso":"2026-06-12T06:21:06Z","measured_at_utc_ms":1781245266000,"direction":"338"},{"measured_at_utc_iso":"2026-06-12T07:21:18Z","measured_at_utc_ms":1781248878000,"direction":"309"},{"measured_at_utc_iso":"2026-06-12T08:21:30Z","measured_at_utc_ms":1781252490000,"direction":"192"},{"measured_at_utc_iso":"2026-06-12T09:21:43Z","measured_at_utc_ms":1781256103000,"direction":"103"},{"measured_at_utc_iso":"2026-06-12T10:21:55Z","measured_at_utc_ms":1781259715000,"direction":"71"},{"measured_at_utc_iso":"2026-06-12T11:22:08Z","measured_at_utc_ms":1781263328000,"direction":"266"},{"measured_at_utc_iso":"2026-06-12T12:22:34Z","measured_at_utc_ms":1781266954000,"direction":"200"},{"measured_at_utc_iso":"2026-06-12T13:22:46Z","measured_at_utc_ms":1781270566000,"direction":"119"},{"measured_at_utc_iso":"2026-06-12T14:22:58Z","measured_at_utc_ms":1781274178000,"direction":"330"},{"measured_at_utc_iso":"2026-06-12T15:23:10Z","measured_at_utc_ms":1781277790000,"direction":"111"},{"measured_at_utc_iso":"2026-06-12T16:23:22Z","measured_at_utc_ms":1781281402000,"direction":"71"},{"measured_at_utc_iso":"2026-06-12T17:23:35Z","measured_at_utc_ms":1781285015000,"direction":"7"},{"measured_at_utc_iso":"2026-06-12T18:23:47Z","measured_at_utc_ms":1781288627000,"direction":"355"},{"measured_at_utc_iso":"2026-06-12T19:23:58Z","measured_at_utc_ms":1781292238000,"direction":"62"},{"measured_at_utc_iso":"2026-06-12T20:24:11Z","measured_at_utc_ms":1781295851000,"direction":"357"},{"measured_at_utc_iso":"2026-06-12T21:24:23Z","measured_at_utc_ms":1781299463000,"direction":"339"},{"measured_at_utc_iso":"2026-06-12T22:24:36Z","measured_at_utc_ms":1781303076000,"direction":"286"},{"measured_at_utc_iso":"2026-06-13T00:19:59Z","measured_at_utc_ms":1781309999000,"direction":"254"},{"measured_at_utc_iso":"2026-06-13T01:20:12Z","measured_at_utc_ms":1781313612000,"direction":"292"},{"measured_at_utc_iso":"2026-06-13T02:20:24Z","measured_at_utc_ms":1781317224000,"direction":"346"},{"measured_at_utc_iso":"2026-06-13T03:15:35Z","measured_at_utc_ms":1781320535000,"direction":"22"},{"measured_at_utc_iso":"2026-06-13T04:15:47Z","measured_at_utc_ms":1781324147000,"direction":"306"},{"measured_at_utc_iso":"2026-06-13T05:15:59Z","measured_at_utc_ms":1781327759000,"direction":"338"},{"measured_at_utc_iso":"2026-06-13T06:16:11Z","measured_at_utc_ms":1781331371000,"direction":"331"},{"measured_at_utc_iso":"2026-06-13T07:16:23Z","measured_at_utc_ms":1781334983000,"direction":"215"},{"measured_at_utc_iso":"2026-06-13T08:16:35Z","measured_at_utc_ms":1781338595000,"direction":"240"},{"measured_at_utc_iso":"2026-06-13T09:16:48Z","measured_at_utc_ms":1781342208000,"direction":"332"},{"measured_at_utc_iso":"2026-06-13T10:17:00Z","measured_at_utc_ms":1781345820000,"direction":"348"},{"measured_at_utc_iso":"2026-06-13T11:17:14Z","measured_at_utc_ms":1781349434000,"direction":"327"},{"measured_at_utc_iso":"2026-06-13T12:17:25Z","measured_at_utc_ms":1781353045000,"direction":"148"},{"measured_at_utc_iso":"2026-06-13T13:17:37Z","measured_at_utc_ms":1781356657000,"direction":"38"},{"measured_at_utc_iso":"2026-06-13T14:17:49Z","measured_at_utc_ms":1781360269000,"direction":"3"},{"measured_at_utc_iso":"2026-06-13T15:18:01Z","measured_at_utc_ms":1781363881000,"direction":"3"},{"measured_at_utc_iso":"2026-06-13T16:18:13Z","measured_at_utc_ms":1781367493000,"direction":"344"},{"measured_at_utc_iso":"2026-06-13T17:18:26Z","measured_at_utc_ms":1781371106000,"direction":"334"},{"measured_at_utc_iso":"2026-06-13T18:18:38Z","measured_at_utc_ms":1781374718000,"direction":"319"},{"measured_at_utc_iso":"2026-06-13T19:18:50Z","measured_at_utc_ms":1781378330000,"direction":"340"},{"measured_at_utc_iso":"2026-06-13T20:19:03Z","measured_at_utc_ms":1781381943000,"direction":"343"},{"measured_at_utc_iso":"2026-06-13T21:19:15Z","measured_at_utc_ms":1781385555000,"direction":"346"},{"measured_at_utc_iso":"2026-06-13T22:19:27Z","measured_at_utc_ms":1781389167000,"direction":"346"},{"measured_at_utc_iso":"2026-06-13T23:19:39Z","measured_at_utc_ms":1781392779000,"direction":"345"},{"measured_at_utc_iso":"2026-06-14T00:19:51Z","measured_at_utc_ms":1781396391000,"direction":"345"},{"measured_at_utc_iso":"2026-06-14T01:20:03Z","measured_at_utc_ms":1781400003000,"direction":"348"},{"measured_at_utc_iso":"2026-06-14T02:20:15Z","measured_at_utc_ms":1781403615000,"direction":"346"},{"measured_at_utc_iso":"2026-06-14T03:15:26Z","measured_at_utc_ms":1781406926000,"direction":"345"},{"measured_at_utc_iso":"2026-06-14T04:15:38Z","measured_at_utc_ms":1781410538000,"direction":"357"},{"measured_at_utc_iso":"2026-06-14T05:15:51Z","measured_at_utc_ms":1781414151000,"direction":"292"},{"measured_at_utc_iso":"2026-06-14T06:16:04Z","measured_at_utc_ms":1781417764000,"direction":"352"},{"measured_at_utc_iso":"2026-06-14T07:16:16Z","measured_at_utc_ms":1781421376000,"direction":"33"},{"measured_at_utc_iso":"2026-06-14T08:16:28Z","measured_at_utc_ms":1781424988000,"direction":"336"},{"measured_at_utc_iso":"2026-06-14T09:16:40Z","measured_at_utc_ms":1781428600000,"direction":"9"},{"measured_at_utc_iso":"2026-06-14T10:16:52Z","measured_at_utc_ms":1781432212000,"direction":"21"},{"measured_at_utc_iso":"2026-06-14T11:18:54Z","measured_at_utc_ms":1781435934000,"direction":"341"},{"measured_at_utc_iso":"2026-06-14T12:19:07Z","measured_at_utc_ms":1781439547000,"direction":"337"},{"measured_at_utc_iso":"2026-06-14T13:19:19Z","measured_at_utc_ms":1781443159000,"direction":"350"},{"measured_at_utc_iso":"2026-06-14T14:19:30Z","measured_at_utc_ms":1781446770000,"direction":"292"},{"measured_at_utc_iso":"2026-06-14T15:19:42Z","measured_at_utc_ms":1781450382000,"direction":"329"},{"measured_at_utc_iso":"2026-06-14T16:19:55Z","measured_at_utc_ms":1781453995000,"direction":"1"},{"measured_at_utc_iso":"2026-06-14T17:20:08Z","measured_at_utc_ms":1781457608000,"direction":"315"},{"measured_at_utc_iso":"2026-06-14T18:20:20Z","measured_at_utc_ms":1781461220000,"direction":"283"},{"measured_at_utc_iso":"2026-06-14T19:15:31Z","measured_at_utc_ms":1781464531000,"direction":"332"},{"measured_at_utc_iso":"2026-06-14T20:15:43Z","measured_at_utc_ms":1781468143000,"direction":"313"},{"measured_at_utc_iso":"2026-06-14T21:15:55Z","measured_at_utc_ms":1781471755000,"direction":"343"},{"measured_at_utc_iso":"2026-06-14T22:16:07Z","measured_at_utc_ms":1781475367000,"direction":"334"},{"measured_at_utc_iso":"2026-06-14T23:16:19Z","measured_at_utc_ms":1781478979000,"direction":"342"},{"measured_at_utc_iso":"2026-06-15T00:16:32Z","measured_at_utc_ms":1781482592000,"direction":"328"},{"measured_at_utc_iso":"2026-06-15T01:16:44Z","measured_at_utc_ms":1781486204000,"direction":"329"},{"measured_at_utc_iso":"2026-06-15T02:16:56Z","measured_at_utc_ms":1781489816000,"direction":"345"},{"measured_at_utc_iso":"2026-06-15T03:17:08Z","measured_at_utc_ms":1781493428000,"direction":"337"},{"measured_at_utc_iso":"2026-06-15T04:17:21Z","measured_at_utc_ms":1781497041000,"direction":"302"},{"measured_at_utc_iso":"2026-06-15T05:17:33Z","measured_at_utc_ms":1781500653000,"direction":"330"},{"measured_at_utc_iso":"2026-06-15T06:17:45Z","measured_at_utc_ms":1781504265000,"direction":"337"},{"measured_at_utc_iso":"2026-06-15T07:17:57Z","measured_at_utc_ms":1781507877000,"direction":"342"},{"measured_at_utc_iso":"2026-06-15T08:18:09Z","measured_at_utc_ms":1781511489000,"direction":"338"},{"measured_at_utc_iso":"2026-06-15T10:13:33Z","measured_at_utc_ms":1781518413000,"direction":"1"},{"measured_at_utc_iso":"2026-06-15T11:13:45Z","measured_at_utc_ms":1781522025000,"direction":"332"},{"measured_at_utc_iso":"2026-06-15T12:13:57Z","measured_at_utc_ms":1781525637000,"direction":"345"},{"measured_at_utc_iso":"2026-06-15T13:14:09Z","measured_at_utc_ms":1781529249000,"direction":"10"},{"measured_at_utc_iso":"2026-06-15T14:14:21Z","measured_at_utc_ms":1781532861000,"direction":"354"},{"measured_at_utc_iso":"2026-06-15T15:14:34Z","measured_at_utc_ms":1781536474000,"direction":"328"},{"measured_at_utc_iso":"2026-06-15T16:14:46Z","measured_at_utc_ms":1781540086000,"direction":"33"},{"measured_at_utc_iso":"2026-06-15T17:14:59Z","measured_at_utc_ms":1781543699000,"direction":"340"},{"measured_at_utc_iso":"2026-06-15T18:15:11Z","measured_at_utc_ms":1781547311000,"direction":"303"},{"measured_at_utc_iso":"2026-06-15T19:15:23Z","measured_at_utc_ms":1781550923000,"direction":"342"},{"measured_at_utc_iso":"2026-06-15T20:10:35Z","measured_at_utc_ms":1781554235000,"direction":"332"},{"measured_at_utc_iso":"2026-06-15T22:01:10Z","measured_at_utc_ms":1781560870000,"direction":"342"},{"measured_at_utc_iso":"2026-06-15T23:01:22Z","measured_at_utc_ms":1781564482000,"direction":"297"},{"measured_at_utc_iso":"2026-06-16T00:01:35Z","measured_at_utc_ms":1781568095000,"direction":"328"},{"measured_at_utc_iso":"2026-06-16T01:01:48Z","measured_at_utc_ms":1781571708000,"direction":"329"},{"measured_at_utc_iso":"2026-06-16T02:01:59Z","measured_at_utc_ms":1781575319000,"direction":"313"},{"measured_at_utc_iso":"2026-06-16T03:02:12Z","measured_at_utc_ms":1781578932000,"direction":"337"},{"measured_at_utc_iso":"2026-06-16T04:02:24Z","measured_at_utc_ms":1781582544000,"direction":"334"},{"measured_at_utc_iso":"2026-06-16T05:02:36Z","measured_at_utc_ms":1781586156000,"direction":"214"},{"measured_at_utc_iso":"2026-06-16T06:02:48Z","measured_at_utc_ms":1781589768000,"direction":"327"},{"measured_at_utc_iso":"2026-06-16T07:03:00Z","measured_at_utc_ms":1781593380000,"direction":"22"},{"measured_at_utc_iso":"2026-06-16T08:03:12Z","measured_at_utc_ms":1781596992000,"direction":"266"},{"measured_at_utc_iso":"2026-06-16T09:03:25Z","measured_at_utc_ms":1781600605000,"direction":"286"},{"measured_at_utc_iso":"2026-06-16T10:03:37Z","measured_at_utc_ms":1781604217000,"direction":"163"},{"measured_at_utc_iso":"2026-06-16T11:03:49Z","measured_at_utc_ms":1781607829000,"direction":"276"},{"measured_at_utc_iso":"2026-06-16T12:04:01Z","measured_at_utc_ms":1781611441000,"direction":"174"},{"measured_at_utc_iso":"2026-06-16T13:04:14Z","measured_at_utc_ms":1781615054000,"direction":"242"},{"measured_at_utc_iso":"2026-06-16T14:04:26Z","measured_at_utc_ms":1781618666000,"direction":"306"},{"measured_at_utc_iso":"2026-06-16T15:04:38Z","measured_at_utc_ms":1781622278000,"direction":"243"},{"measured_at_utc_iso":"2026-06-16T16:04:50Z","measured_at_utc_ms":1781625890000,"direction":"258"},{"measured_at_utc_iso":"2026-06-16T17:05:02Z","measured_at_utc_ms":1781629502000,"direction":"326"},{"measured_at_utc_iso":"2026-06-16T18:05:14Z","measured_at_utc_ms":1781633114000,"direction":"289"},{"measured_at_utc_iso":"2026-06-16T19:05:27Z","measured_at_utc_ms":1781636727000,"direction":"312"},{"measured_at_utc_iso":"2026-06-16T20:00:38Z","measured_at_utc_ms":1781640038000,"direction":"311"},{"measured_at_utc_iso":"2026-06-16T21:00:50Z","measured_at_utc_ms":1781643650000,"direction":"265"},{"measured_at_utc_iso":"2026-06-16T22:01:02Z","measured_at_utc_ms":1781647262000,"direction":"260"},{"measured_at_utc_iso":"2026-06-16T23:01:14Z","measured_at_utc_ms":1781650874000,"direction":"280"},{"measured_at_utc_iso":"2026-06-17T00:01:27Z","measured_at_utc_ms":1781654487000,"direction":"307"},{"measured_at_utc_iso":"2026-06-17T01:01:39Z","measured_at_utc_ms":1781658099000,"direction":"341"},{"measured_at_utc_iso":"2026-06-17T02:01:51Z","measured_at_utc_ms":1781661711000,"direction":"319"},{"measured_at_utc_iso":"2026-06-17T03:02:04Z","measured_at_utc_ms":1781665324000,"direction":"334"},{"measured_at_utc_iso":"2026-06-17T04:02:16Z","measured_at_utc_ms":1781668936000,"direction":"316"},{"measured_at_utc_iso":"2026-06-17T05:02:28Z","measured_at_utc_ms":1781672548000,"direction":"47"},{"measured_at_utc_iso":"2026-06-17T06:02:40Z","measured_at_utc_ms":1781676160000,"direction":"40"},{"measured_at_utc_iso":"2026-06-17T07:02:52Z","measured_at_utc_ms":1781679772000,"direction":"338"}];
    
    let data = dataFromBlade.map(d => {
      const ms = parseMeasuredAtUtcMs(d);
      if (!Number.isFinite(ms)) return null;
      return {
        date: new Date(ms),
        wind: +d.wind_speed,
        gust: +d.gusts,
        dir:  d.direction ?? null
      };
    }).filter(Boolean).sort((a,b) => a.date - b.date);

    const directionMarkers = (directionMarkersFromBlade || []).map(d => {
      const ms = parseMeasuredAtUtcMs(d);
      if (!Number.isFinite(ms)) return null;
      return {
        date: new Date(ms),
        direction: d.direction ?? null
      };
    }).filter(Boolean).sort((a,b) => a.date - b.date);

    function smoothData(dataArray, windowSize) {
      const result = [...dataArray];
      for (let i = 0; i < dataArray.length; i++) {
        const windowStart = Math.max(0, i - Math.floor(windowSize/2));
        const windowEnd   = Math.min(dataArray.length - 1, i + Math.floor(windowSize/2));
        const windowValues = [];
        for (let j = windowStart; j <= windowEnd; j++) {
          windowValues.push(dataArray[j]);
        }
        let weightSum = 0;
        let valueSum = 0;
        for (let k = 0; k < windowValues.length; k++) {
          const distance = Math.abs(k - Math.floor(windowValues.length/2));
          const weight   = 1 / (distance + 1);
          valueSum += windowValues[k] * weight;
          weightSum += weight;
        }
        result[i] = valueSum / weightSum;
      }
      return result;
    }

    // Glättung der Daten
    const smoothedData = [...data];
    const windValues   = data.map(d => d.wind);
    const gustValues   = data.map(d => d.gust);
    
    const smoothedWinds = smoothData(windValues, 5);  
    const smoothedGusts = smoothData(gustValues, 5);  
    
    for (let i = 0; i < data.length; i++) {
      smoothedData[i] = {
        ...data[i],
        windSmooth: smoothedWinds[i],
        gustSmooth: smoothedGusts[i]
      };
    }

    // Originaler Zeitbereich
    const fullTimeDomain = d3.extent(data, d => d.date);
    let currentTimeDomain = [...fullTimeDomain];
    
    // Double-Range-Slider Setup
    const slider = document.getElementById('timeRangeSlider');
    const track = slider.querySelector('.slider-track');
    const range = slider.querySelector('.slider-range');
    const startThumb = document.getElementById('startThumb');
    const endThumb = document.getElementById('endThumb');
    const startValue = document.getElementById('startValue');
    const endValue = document.getElementById('endValue');
    const sliderLabels = document.getElementById('sliderLabels');
    
    // Standardmäßig den kompletten Tag anzeigen (0-24 Uhr)
    let startPos = 0;          // 0:00 Uhr = 0%
    let endPos = 100;          // 24:00 Uhr = 100%
    let startHour = 0;         // Start bei 0:00 Uhr
    let endHour = 24;          // Ende bei 24:00 Uhr
    let startDay = 0;          // Für Wochenansicht
    let endDay = 6;            // Für Wochenansicht
    let isDragging = false;
    let currentThumb = null;
    let timeoutId = null;
    
    // Schieberegler an die aktuelle Ansicht anpassen
    function setupSliderForCurrentView() {
      // Labels für den Schieberegler aktualisieren
      sliderLabels.innerHTML = '';
      
      if (currentRange === 'week' || (getSpotDayKey(fullTimeDomain[0]) !== getSpotDayKey(fullTimeDomain[1]))) {
        // Mehrtagesanzeige → Tagesslider aktivieren
        // Für Wochenansicht: Tage als Labels
        const startDate = new Date(fullTimeDomain[0]);
        for (let i = 0; i <= 6; i++) {
          const dayDate = new Date(startDate);
          dayDate.setDate(dayDate.getDate() + i);
          
          const dayLabel = document.createElement('span');
          dayLabel.textContent = dayDate.toLocaleDateString('de-DE', {weekday: 'short', day: '2-digit'});
          sliderLabels.appendChild(dayLabel);
        }
        
        // Statt Stunden zeigen wir Tage
        startValue.textContent = formatDay(new Date(fullTimeDomain[0]));
        endValue.textContent = formatDay(new Date(fullTimeDomain[1]));
      } else {
        // Für Tagesansicht: Stunden als Labels
        const hourLabels = ['00:00', '06:00', '12:00', '18:00', '24:00'];
        hourLabels.forEach(label => {
          const hourLabel = document.createElement('span');
          hourLabel.textContent = label;
          sliderLabels.appendChild(hourLabel);
        });
        
        startValue.textContent = formatHour(startHour);
        endValue.textContent = formatHour(endHour);
      }
    }
    
    // Initialisieren des Sliders
    function updateSliderPositions() {
      startThumb.style.left = startPos + '%';
      endThumb.style.left = endPos + '%';
      range.style.left = startPos + '%';
      range.style.width = (endPos - startPos) + '%';
      startValue.style.left = startPos + '%';
      endValue.style.left = endPos + '%';
      
      if (currentRange === 'week') {
        // Für Wochenansicht - Tage statt Stunden
        startDay = Math.round((startPos / 100) * 6);  // 6 Tage (0-6)
        endDay = Math.round((endPos / 100) * 6);
        
        // Datumsberechnung für Anzeige
        const startDate = new Date(fullTimeDomain[0]);
        const startDayDate = new Date(startDate);
        startDayDate.setDate(startDate.getDate() + startDay);
        
        const endDayDate = new Date(startDate);
        endDayDate.setDate(startDate.getDate() + endDay);
        
        startValue.textContent = formatDay(startDayDate);
        endValue.textContent = formatDay(endDayDate);
      } else {
        // Für Tagesansicht - Stunden
        startHour = (startPos / 100) * 24;
        endHour = (endPos / 100) * 24;
        
        startValue.textContent = formatHour(startHour);
        endValue.textContent = formatHour(endHour);
      }
    }
    
    // Initialisierung
    setupSliderForCurrentView();
    updateSliderPositions();
    
    // Event Listener für Mausaktionen
    startThumb.addEventListener('mousedown', function(e) {
      isDragging = true;
      currentThumb = 'start';
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
      e.preventDefault();
    });
    
    endThumb.addEventListener('mousedown', function(e) {
      isDragging = true;
      currentThumb = 'end';
      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
      e.preventDefault();
    });
    
    // Diese Event-Listener nach den bestehenden mousedown-Listenern hinzufügen
    startThumb.addEventListener('touchstart', function(e) {
      isDragging = true;
      currentThumb = 'start';
      document.addEventListener('touchmove', onTouchMove, { passive: false });
      document.addEventListener('touchend', onTouchEnd);
      e.preventDefault();
    });

    endThumb.addEventListener('touchstart', function(e) {
      isDragging = true;
      currentThumb = 'end';
      document.addEventListener('touchmove', onTouchMove, { passive: false });
      document.addEventListener('touchend', onTouchEnd);
      e.preventDefault();
    });

    function onTouchMove(e) {
      if (!isDragging) return;
      const touch = e.touches[0];
      onMouseMove({ clientX: touch.clientX }); // gleiche Logik wie beim Mouse-Event
      e.preventDefault();
    }

    function onTouchEnd() {
      isDragging = false;
      document.removeEventListener('touchmove', onTouchMove);
      document.removeEventListener('touchend', onTouchEnd);
      onMouseUp();
    }

    function onMouseMove(e) {
      if (!isDragging) return;
      
      const sliderRect = slider.getBoundingClientRect();
      let newPos = ((e.clientX - sliderRect.left) / sliderRect.width) * 100;
      
      // Begrenzung auf 0-100%
      newPos = Math.max(0, Math.min(100, newPos));
      
      if (currentRange === 'week') {
        // Für Wochenansicht - Snap auf Tage
        const stepSize = 100 / 6; // 6 Tage (0-6)
        newPos = Math.round(newPos / stepSize) * stepSize;
      } else {
        // Für Tagesansicht - Snap auf 0.5-Stunden-Schritte
        const stepSize = 100 / 48; // 48 Schritte für 24 Stunden in 0.5h-Schritten
        newPos = Math.round(newPos / stepSize) * stepSize;
      }
      
      const minDistance = currentRange === 'week' ? 100/6 : 100/48; // Mindestabstand
      
      if (currentThumb === 'start') {
        // Sicherstellen, dass Start nicht über End geht
        if (newPos < endPos - minDistance) {
          startPos = newPos;
        }
      } else if (currentThumb === 'end') {
        // Sicherstellen, dass End nicht unter Start geht
        if (newPos > startPos + minDistance) {
          endPos = newPos;
        }
      }
      
      updateSliderPositions();
      clearTimeout(timeoutId);
    }
    
    function onMouseUp() {
      isDragging = false;
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      
      // Diagramm nach 500ms Inaktivität aktualisieren
      clearTimeout(timeoutId);
      timeoutId = setTimeout(updateChartTimeRange, 500);
    }
    
    // Funktion zum Aktualisieren des Zeitbereichs im Diagramm
    function updateChartTimeRange() {
      if (currentRange === 'week') {
        // Bei Wochenansicht - Tage berechnen
        const startDate = new Date(fullTimeDomain[0]);
        startDate.setHours(0, 0, 0, 0);
        
        const startDayDate = new Date(startDate);
        startDayDate.setDate(startDate.getDate() + startDay);
        
        const endDayDate = new Date(startDate);
        endDayDate.setDate(startDate.getDate() + endDay);
        endDayDate.setHours(23, 59, 59, 999);
        
        currentTimeDomain = [startDayDate, endDayDate];
      } else {
        // Bei Tagesansicht - Stunden berechnen
        const baseDate = new Date(fullTimeDomain[0]);
        baseDate.setHours(0, 0, 0, 0);
        
        const startTime = new Date(baseDate);
        startTime.setHours(
          Math.floor(startHour),
          Math.round((startHour - Math.floor(startHour)) * 60)
        );
        
        const endTime = new Date(baseDate);
        endTime.setHours(
          Math.floor(endHour),
          Math.round((endHour - Math.floor(endHour)) * 60)
        );
        
        currentTimeDomain = [startTime, endTime];
      }
      
      drawChart();
    }
    
    // Funktion zum Neuzeichnen des Diagramms
    function drawChart() {
      // Altes SVG löschen und neu erstellen
      d3.select('#chart').select('svg').remove();
      
      // SVG-Setup
      const container = document.getElementById('chart');
      const margin = { top: 20, right: 20, bottom: 30, left: 20 };
      const width  = container.clientWidth  - margin.left - margin.right;
      const height = container.clientHeight - margin.top  - margin.bottom;

      const svgBase = d3.select('#chart')
        .append('svg')
        .attr('width',  container.clientWidth)
        .attr('height', container.clientHeight);

      const svg = svgBase.append('g')
        .attr('transform', `translate(${margin.left},${margin.top})`);

      // Achsen mit aktuellem Zeitbereich
      const xScale = d3.scaleTime()
        .domain(currentTimeDomain)
        .range([0, width]);

      // Maximaler Wert für y-Achse
      const filteredData = smoothedData.filter(d => 
        d.date >= currentTimeDomain[0] && d.date <= currentTimeDomain[1]
      );
      
      // Überprüfen, ob Daten vorhanden sind
      if (filteredData.length === 0) {
        svg.append('text')
          .attr('x', width / 2)
          .attr('y', height / 2)
          .attr('text-anchor', 'middle')
          .attr('fill', '#fff')
          .text('Keine Daten für den ausgewählten Zeitraum verfügbar');
        return;
      }
      
      const maxGust = d3.max(filteredData, d => d.gust) || 0;
      const maxWind = d3.max(filteredData, d => d.wind) || 0;
      const maxVal = Math.max(maxGust, maxWind) * 1.1; // +10% Puffer
      
      const yScale = d3.scaleLinear()
        .domain([0, maxVal])
        .range([height, 0]);

      // Filter
      const defs = svg.append("defs");
      defs.append("filter")
        .attr("id", "blurFilter")
        .append("feGaussianBlur")
        .attr("in", "SourceGraphic")
        .attr("stdDeviation", smoothness);

      // Vertikale Lineargradienten für die genaue Farbverteilung
      const verticalGradient = defs.append("linearGradient")
        .attr("id", "verticalGradient")
        .attr("x1", "0%")
        .attr("x2", "0%")
        .attr("y1", "100%")
        .attr("y2", "0%");

      // Farbstufen exakt anhand der definierten Stoppwerte
      for (let i = 0; i < windColorStops.length; i++) {
        const knotValue = windColorStops[i].value;
        const yPos = yScale(knotValue);
        // Prozent vom Bottom
        const offsetPercent = 100 - ((yPos / height) * 100);
        
        verticalGradient.append("stop")
          .attr("offset", offsetPercent + "%")
          .attr("stop-color", windColorStops[i].color);
      }

      // X-Achse - je nach Range (Woche oder Tag)
      const xAxis = d3.axisBottom(xScale);
      
      const isMultiDayRange = getSpotDayKey(currentTimeDomain[0]) !== getSpotDayKey(currentTimeDomain[1]);
      const isWeekOrCustom = currentRange === 'week' || isMultiDayRange;

      if (currentRange === 'week' || (currentRange === 'custom' && getSpotDayKey(fullTimeDomain[0]) !== getSpotDayKey(fullTimeDomain[1]))) {
        // Mehrtagesansicht-Logik
        // Achsen mit Datum, Labels als Tage formatieren
        xAxis.ticks(d3.timeDay.every(1))
             .tickFormat(d => tzDayFormatter.format(d));
        
        // Tagabgrenzungen zeichnen
        const days = d3.timeDay.range(
          d3.timeDay.floor(currentTimeDomain[0]),
          d3.timeDay.offset(d3.timeDay.ceil(currentTimeDomain[1]), 1)
        );
        days.forEach(day => {
          const x = xScale(day);
          
          // Vertikale Linien für Tageswechsel
          svg.append('line')
            .attr('x1', x)
            .attr('x2', x)
            .attr('y1', 0)
            .attr('y2', height)
            .attr('class', 'day-separator');
        });
      } else {
        // Eintagesansicht-Logik
        // Stundenansicht wie bisher
        xAxis.ticks(d3.timeHour.every(1))
             .tickFormat(d => tzHourFormatter.format(d));
      }
      
      svg.append('g')
        .attr('class','axis')
        .attr('transform',`translate(0,${height})`)
        .call(xAxis);

      // Fläche (D)
      const areaGenerator = d3.area()
        .x(d => xScale(d.date))
        .y0(yScale(0))
        .y1(d => yScale(d.windSmooth))
        .curve(curveType);
        
      svg.append('path')
        .datum(filteredData)
        .attr('fill', 'url(#verticalGradient)')
        .attr('stroke', 'none')
        .attr('d', areaGenerator)
        .attr('class', 'chart-line');

      // Wind-Linie (E) in SCHWARZ (wie gewünscht)
      svg.append('path')
        .datum(filteredData)
        .attr('fill', 'none')
        .attr('stroke', '#000000')  // Schwarz (wie gewünscht)
        .attr('stroke-width', 4)
        .attr('opacity', windOpacity)
        .attr('class', 'chart-line-sharp')
        .attr('d', d3.line()
           .x(d => xScale(d.date))
           .y(d => yScale(d.windSmooth))
           .curve(curveType)
        );

      // Böen-Linie (F)
      for (let i = 0; i < filteredData.length - 1; i++) {
        const segment = [filteredData[i], filteredData[i+1]];
        // Farbe aus Y-Position
        const y = yScale(filteredData[i].gustSmooth);
        const knotValue = yScale.invert(y);
        
        svg.append('path')
          .datum(segment)
          .attr('fill', 'none')
          .attr('stroke', getWindColor(knotValue))
          .attr('stroke-width', 4)
          .attr('opacity', gustOpacity)
          .attr('class', 'chart-line-sharp')
          .attr('d', d3.line()
             .x(d => xScale(d.date))
             .y(d => yScale(d.gustSmooth))
             .curve(curveType)
          );
      }

      // Labels (abhängig von der Range weniger oder mehr)
      const labelCount = currentRange === 'week' ? 14 : 24; // Weniger Labels bei Wochenansicht
      const stepSize = Math.max(1, Math.floor(filteredData.length / labelCount));
      
      for (let i = 0; i < filteredData.length; i += stepSize) {
        const d = filteredData[i];
        svg.append('text')
          .attr('x', xScale(d.date))
          .attr('y', yScale(d.wind) - 5)
          .attr('class','value-label')
          .text(Math.round(d.wind));
          
        svg.append('text')
          .attr('x', xScale(d.date))
          .attr('y', yScale(d.gust) - 5)
          .attr('class','value-label')
          .text(Math.round(d.gust));
      }

      // Windrichtungspfeile – sichere, korrekte Version
      drawWindArrows(svg, directionMarkers, xScale, 15, currentTimeDomain); // Pfeile höher positioniert
    }
    
    // Initialer Aufruf zum Zeichnen des Diagramms
    drawChart();

    const datePickerToggle = document.getElementById('datePickerToggle');
    const datePicker = document.querySelector('.date-picker-container');
    
    datePickerToggle.addEventListener('click', function(e) {
      e.preventDefault();
      datePicker.style.display = datePicker.style.display === 'none' || datePicker.style.display === '' ? 'flex' : 'none';
    });

    const dateSubmit = document.getElementById('dateSubmit');
    const dateField  = document.getElementById('customDate');

    dateSubmit.addEventListener('click', function() {
      const selectedDate = new Date(dateField.value);
      const today = new Date();

      selectedDate.setHours(0, 0, 0, 0);
      today.setHours(0, 0, 0, 0);

      const diffTime = today.getTime() - selectedDate.getTime();
      const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));

      console.log("Gewähltes Datum:", selectedDate);
      console.log("Heute:", today);
      console.log("Differenz in Tagen:", diffDays);

      window.location.href = "https://weather.iwind.at/spot/14009/history?day=" + diffDays + "&range=day";
    });

  });
  </script>
</body>
</html>