var isDragging = false;
var xMousePos = 0;
var yMousePos = 0;

/* prepares the dragging process, but does not move anything yet */
function startDrag(e) {
  saveMousePosition(e);
  isDragging = true;
  return false;
}

/* moves the element if a dragging process is ongoing */
function doDrag(e) {
  if (!isDragging) {
    return;
  }

  var xMousePosOld = xMousePos;
  var yMousePosOld = yMousePos;
  
  saveMousePosition(e);
  
  var offsetX = xMousePos - xMousePosOld;
  var offsetY = yMousePos - yMousePosOld;

  moveIt(offsetX, offsetY);
}

/* stops the dragging process, not moving anything anymore */
function stopDrag(e) {
  isDragging = false;
}

/* moves the thing by x and y pixels */
function moveIt(offsetX, offsetY) {
  var thingy = document.getElementById("remote-control");

  var xWinPosOld = parseInt(thingy.offsetLeft);
  var yWinPosOld = parseInt(thingy.offsetTop);

  var xWinPosNew = xWinPosOld + offsetX;
  var yWinPosNew = yWinPosOld + offsetY;

  thingy.style.left = xWinPosNew + "px";
  thingy.style.top  = yWinPosNew + "px";
}

/* stores the current position of the mouse */
function saveMousePosition(e) {
  xMousePos = e.clientX;
  yMousePos = e.clientY;
}