(function () {
  const draggydivs = document.getElementsByClassName("draggydiv");
  const minimizedList = document.getElementById("draggydivs-minimized");
  let buttonsDrag = [];
  let buttonsMinimize = [];
  let zIndex = 1000;
  let pos = { x: 0, y: 0 };
  let currentDraggy;

  // event helpers
  const minimizeDraggydiv = (draggydiv, inURL) => {
    if (!minimizedList) {
      minimizedList = document.createElement("ul");
      minimizedList.className = "draggydivs-minimized";
      document.body.appendChild(minimizedList);
    }

    const minimizedItem = document.createElement("li");
    const minimizedItemTitle = draggydiv.getAttribute("title");
    minimizedItem.innerHTML = `<a class="draggydiv-title" href=#>${minimizedItemTitle}</a>`;
    minimizedList.appendChild(minimizedItem);

    minimizedItem.addEventListener("click", onMinimizedItemClick);

    draggydiv.style.display = "none";
  };

  const expandDraggydiv = (draggydiv, inURL) => {
    zIndex++;
    draggydiv.style.zIndex = zIndex;
    draggydiv.style.display = "block";

    const menuItems = document.querySelectorAll(".draggydiv-title");
    [].forEach.call(menuItems, function (item) {
      if (item.innerHTML == draggydiv.title) {
        item.closest("li").remove();
      }
    });

    const { top } = draggydiv.getBoundingClientRect();
    window.scrollTo(0, top);
  };

  // event callbacks
  const onDragClick = (e) => {
    pos = { x: e.pageX, y: e.pageY };
    currentDraggy = e.target.closest(".draggydiv");

    document.addEventListener("mousemove", onMove);
    document.addEventListener("touchmove", onMove);
    document.addEventListener("mouseup", onMouseUp);
    document.addEventListener("touchend", onMouseUp);

    zIndex++;
    currentDraggy.style.zIndex = zIndex;
  };

  const onMinimizeClick = (e) => {
    minimizeDraggydiv(e.target.closest(".draggydiv"));
  };

  const onMinimizedItemClick = (e) => {
    e.preventDefault();
    const thisMinimizedItem = e.target;
    const thisMinimizedItemTitle = thisMinimizedItem.innerHTML;

    const draggyToExpand = document.querySelector(
      `[title="${thisMinimizedItemTitle}"]`
    );
    expandDraggydiv(draggyToExpand);
  };

  const onMove = (e) => {
    const curr = { x: e.pageX, y: e.pageY };
    const dx = curr.x - pos.x;
    const dy = curr.y - pos.y;

    const currentDraggyStyle = getComputedStyle(currentDraggy);

    currentDraggy.style.setProperty(
      "left",
      parseInt(currentDraggyStyle.left) + dx + "px",
      "important"
    );
    currentDraggy.style.setProperty(
      "top",
      parseInt(currentDraggyStyle.top) + dy + "px",
      "important"
    );

    pos = curr;
  };

  const onMouseUp = (e) => {
    document.removeEventListener("mousemove", onMove);
    document.removeEventListener("touchmove", onMove);
    document.removeEventListener("mouseup", onMouseUp);
    document.removeEventListener("touchend", onMouseUp);
  };

  // init draggydiv styling and button events
  const draggyPromises = [];
  for (let i = 0; i < draggydivs.length; i++) {
    const thisDraggyPromise = new Promise((resolve, reject) => {
      draggydivs[i].style.top = parseInt(draggydivs[i].offsetTop) + "px";
      draggydivs[i].style.left = parseInt(draggydivs[i].offsetLeft) + "px";
      draggydivs[i].style.width = parseInt(draggydivs[i].offsetWidth) + "px";
      draggydivs[i].style.zIndex = zIndex;
      resolve(draggydivs[i]);
    });
    draggyPromises.push(thisDraggyPromise);

    zIndex++;

    buttonsDrag = buttonsDrag.concat(
      Array.prototype.slice.call(
        draggydivs[i].getElementsByClassName("draggydivs-drag")
      )
    );
    buttonsMinimize = buttonsMinimize.concat(
      Array.prototype.slice.call(
        draggydivs[i].getElementsByClassName("draggydivs-minimize")
      )
    );

    for (let j = 0; j < buttonsDrag.length; j++) {
      buttonsDrag[j].addEventListener("mousedown", onDragClick);
      buttonsDrag[j].addEventListener("touchstart", onDragClick);
    }

    for (let k = 0; k < buttonsMinimize.length; k++) {
      buttonsMinimize[k].addEventListener("click", onMinimizeClick);
    }

    // if draggydiv initially has "draggydivs-init-closed" class, minimize
    if (draggydivs[i].classList.contains("draggydivs-init-closed")) {
      minimizeDraggydiv(draggydivs[i], true);
    }
  }
  Promise.all(draggyPromises).then((draggydivVals) => {
    draggydivVals.forEach((draggydiv) => {
      draggydiv.style.position = "absolute";
    });
  });
})();