$(function () {
  const id = $("#id-embed"),
        idData = id.data();

  if (!idData.configured) {
    OSM.showAlert(OSM.i18n.t("javascripts.edit.id_not_configured.title"),
                  OSM.i18n.t("javascripts.edit.id_not_configured.body"));
    return;
  }

  const hashParams = new URLSearchParams(location.hash.slice(1));
  const hashArgs = OSM.parseHash();
  const mapParams = OSM.mapParams();
  const params = new URLSearchParams();
  let zoom, lat, lon;

  if (idData.lat && idData.lon) {
    ({ zoom, lat, lon } = idData);
  } else if (!mapParams.object) {
    ({ zoom, lat, lon } = mapParams);
  }
  if (mapParams.object) {
    params.set("id", mapParams.object.type + "/" + mapParams.object.id);
    if (hashArgs.center) ({ zoom, lat, lon } = hashArgs);
  }
  if (lat && lon) params.set("map", [zoom || 17, lat, lon].join("/"));

  const passThroughKeys = ["background", "comment", "disable_features", "gpx", "hashtags", "locale", "maprules", "notes", "offset", "photo", "photo_dates", "photo_overlay", "photo_username", "presets", "source", "validationDisable", "validationWarning", "validationError", "walkthrough"];
  for (const key of passThroughKeys) {
    if (hashParams.has(key)) params.set(key, hashParams.get(key));
  }

  if (mapParams.layers.includes("N")) params.set("notes", "true");

  if (idData.gpx) params.set("gpx", idData.gpx);

  id.attr("src", idData.url + "#" + params);

  id.ready(function () {
    if (this.contentWindow && !this.contentWindow.location.href.startsWith(idData.url)) {
      location.reload();
    }
  });

  let hashChangedAutomatically = false;
  window.addEventListener("message", function (event) {
    if (event.source !== id[0].contentWindow || event.origin !== location.origin) return;
    const msg = event.data;
    switch (msg.type) {
      case "hashchange":
        return onIframeHashChange(msg.data);
      case "titlechange":
        return onIframeTitleChange(msg.data);
    }
  });

  function onIframeHashChange(data) {
    updateLinks(data, data.zoom);

    // Manually resolve URL to avoid iframe JS context weirdness.
    // https://gist.github.com/jfirebaugh/5439412
    const hash = OSM.formatHash(data);
    if (hash === location.hash) return;

    hashChangedAutomatically = true;
    location.replace(location.href.replace(/(#.*|$)/, hash));
  }

  function onIframeTitleChange(title) {
    document.title = [title, OSM.i18n.t("layouts.project_name.title")].filter(t => t).join(" | ");
  }

  function postMessageToIframe(type, data) {
    id[0].contentWindow.postMessage({ type, data }, location.origin);
  }

  $("body").on("click", "a.set_position", function (e) {
    e.preventDefault();
    postMessageToIframe("hashchange", $(this).data());
  });

  addEventListener("hashchange", function (e) {
    if (hashChangedAutomatically) {
      hashChangedAutomatically = false;
      return;
    }
    e.preventDefault();
    postMessageToIframe("hashchange", OSM.mapParams());
  });
});