window.onload = function() {

  var button = document.getElementById("makeBox");

  var makeBox = function() {

    // Loading the CSS for the box

    var css = document.createElement("link");
    css.rel = "stylesheet";
    css.href = "style.css";
    document.body.appendChild(css);

    // Constructing the box
    var draggable = document.createElement("div");
    var dragbar = document.createElement("h1");
    var closeable = document.createElement("span");
    var content = document.createElement("p");

    content.innerText = "Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. ";
    
    draggable.appendChild(closeable)
    draggable.appendChild(dragbar);
    draggable.appendChild(content);
    draggable.id = "draggable";
    dragbar.id = "dragbar";
    closeable.id = "closeable";
    dragbar.innerText = "Drag me to hell";
    closeable.innerHTML = "<a href='#'>&times;</a>";

    document.body.appendChild(draggable);


    // Make the box closeable

    closeable.onclick = function() {
      draggable.parentNode.removeChild(draggable);
    }

    // Make the box draggable

    var startMousePos = {x:0, y:0}
    var startDivPos = {x:0, y:0}
    var dragging = false;

    dragbar.onmousedown = function(event) {
      startMousePos.x = event.clientX;
      startMousePos.y = event.clientY;

      startDivPos.x = draggable.offsetLeft;
      startDivPos.y = draggable.offsetTop;

      dragging = true;
    }

    dragbar.onmousemove = function(event) {
      if(dragging){
        deltaX = event.clientX - startMousePos.x;
        deltaY = event.clientY - startMousePos.y;

        draggable.style.left = (deltaX + startDivPos.x) + "px";
        draggable.style.top = (deltaY + startDivPos.y) + "px";
      }
    }

    dragbar.onmouseup = function(event) {
      dragging = false; 
    }

  }
  button.onclick = makeBox;

}