(function(){
  const moveMe = document.getElementById('movable'),
        face = document.getElementById('face'),
        message = document.getElementById('message');
  
  let diffY,
      diffX,
      elmHeight,
      elmWidth,
      containerHeight,
      containerWidth,
      outOfBoundsCounter,
      isMouseDown = false;

  function setOutOfBoundsFace() {
    if (!moveMe.classList.contains('pained') && !moveMe.classList.contains('fainted')) {
      outOfBoundsCounter++;
      if (outOfBoundsCounter < 5) {
        moveMe.classList.add('pained');    
        message.innerHTML = 'ouch!';
      } else {
        moveMe.classList.add('fainted');
        message.innerHTML = 'zzz';
        setTimeout(() => {
          outOfBoundsCounter = 0;
        }, 3000);
      }
    }
  }

  function resetFace() {
    if (outOfBoundsCounter < 5) {
      moveMe.classList.remove('pained', 'fainted');
      message.innerHTML = 'yay!';
    }
  }

  function mouseDown(e) {
    isMouseDown = true;
    outOfBoundsCounter = 0;
    // get initial mousedown coordinated
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    
    // get element top and left positions
    const elm = moveMe;
    const elmY = elm.offsetTop;
    const elmX = elm.offsetLeft;
    
    // get elm dimensions
    elmWidth = elm.offsetWidth;
    elmHeight = elm.offsetHeight;
    
    // get container dimensions
    const container = elm.offsetParent;
    containerWidth = container.offsetWidth;
    containerHeight = container.offsetHeight;
    
    // get diff from (0,0) to mousedown point
    diffY = mouseY - elmY;
    diffX = mouseX - elmX;
  }
  

  function mouseMove(e) {
    if (!isMouseDown) return;
    const elm = moveMe;
    // get new mouse coordinates
    const newMouseY = e.clientY;
    const newMouseX = e.clientX;
    
    // calc new top, left pos of elm
    let newElmTop = newMouseY - diffY,
        newElmLeft = newMouseX - diffX;
    
    // calc new bottom, right pos of elm
    let newElmBottom = newElmTop + elmHeight,
        newElmRight = newElmLeft + elmWidth;
    
    if ((newElmTop < 0) || (newElmLeft < 0) || (newElmTop + elmHeight > containerHeight) || (newElmLeft + elmWidth > containerWidth)) {
      // if elm is being dragged off top of the container...
      if (newElmTop < 0) {
        newElmTop = 0;
      }
      
      // if elm is being dragged off left of the container...
      if (newElmLeft < 0) {
        newElmLeft = 0;
      }

      // if elm is being dragged off bottom of the container...
      if (newElmBottom > containerHeight) {
        newElmTop = containerHeight - elmHeight;
      }

      // if elm is being dragged off right of the container...
      if (newElmRight > containerWidth) {
        newElmLeft = containerWidth - elmWidth;
      }
      setOutOfBoundsFace();
    } else {
      resetFace();
    }

    moveElm(elm, newElmTop, newElmLeft);
  }

  // move elm
  function moveElm(elm, yPos, xPos) {
    elm.style.top = yPos + 'px';
    elm.style.left = xPos + 'px';
  }

  function mouseUp() {
    isMouseDown = false;
    message.innerHTML = 'plz move me';
  }

  moveMe.addEventListener('mousedown', mouseDown);
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
})();