(function (W) {
  let lock, pressed;
  const D = ["mon", "tue", "wed", "thu", "fri"];
  const log = document.querySelector("[data-log]");

  const cursor = document.createElement("i");
  cursor.hidden = 1;
  log.appendChild(cursor);

  const { width, height, y, x } = log.getClientRects()[0];

  const drag = (elm) => {
    // copy node
    // on mouse down:
    // move node by grid
    // on mouse up:
    // re-render grid
  };

  const resize = (elm) => {
    // copy node
    // on mouse down:
    // move node by grid
    // on mouse up:
    // re-render grid
  };

  const create = () => {
    cursor.hidden = 1;
    const a = document.createElement("article");
    const f = document.createElement("form");
    f.style.position = "absolute";
    f.method = "post";
    f.action = "";
    const i = document.createElement("input");
    i.addEventListener("keydown", ({ key: k }) => {
      if (k == "Escape") {
        i.blur();
        a.parentNode.removeChild(a);
      }
    });
    f.addEventListener("submit", (evt) => {
      evt.preventDefault();
      a.dataset.draggable = 1;
      a.dataset.resizeable = 1;
      a.insertAdjacentHTML("afterbegin", i.value);
      i.blur();
      f.parentNode.removeChild(f);
    });
    a.dataset.day = cursor.dataset.day;
    a.dataset.start = cursor.dataset.start;
    a.dataset.end = cursor.dataset.end;
    f.appendChild(i);
    a.appendChild(f);
    log.appendChild(a);
    i.focus();
    return;
  };

  const updateCursorPos = ({ pageY, pageX }) => {
    clearTimeout(lock);
    lock = setTimeout(() => {
      const r = Math.floor(((pageY - y) / height) * 52);
      const c = Math.floor(((pageX - x) / width) * 5);
      const p = ((r - (r % 4)) / 4 + 6) * 100 + (r % 4) * 15;
      if (!pressed) {
        cursor.dataset.day = D[c];
        cursor.dataset.start = ("0000" + p).slice(-4);
      }
      cursor.dataset.end = (
        "0000" + ((p % 100) % 45 == 0 ? p + 55 : p + 15)
      ).slice(-4);
    }, 1);
  };

  log.onmousedown = (evt) => {
    if (evt.target == cursor) {
      evt.preventDefault();
      cursor.classList.add("pressed");
      pressed = true;
    }
  };

  log.onmouseup = (evt) => {
    if (evt.target == cursor) {
      evt.preventDefault();
      cursor.classList.remove("pressed");
      pressed = false;
      create();
    }
  };

  log.onmouseover = ({ target: elm }) => {
    if (elm == log) {
      log.onmousemove = updateCursorPos;
      cursor.hidden = 0;
    } else if (elm != cursor) {
      cursor.hidden = 1;
      cursor.onmousemove = "";
    }
  };
})(this);