puzzPieces = 0;
currentX = currentY = 0;
whichEl = null;
noMove = false;

function createProperties (whichEl, layerName) {
  whichEl.draggable = true;
  whichEl.layer = layerName;
  puzzPieces++;
  activeEl = whichEl;
}

function grabEl() {
  whichEl = event.srcElement;
  if (whichEl.draggable) {
    if ( whichEl != activeEl) {
      whichEl.style.zIndex = activeEl.style.zIndex + 1;
      activeEl = whichEl;
    }

    whichEl.style.pixelLeft = whichEl.offsetLeft;
    whichEl.style.pixelTop = whichEl.offsetTop;
    currentX = (event.clientX + document.body.scrollLeft);
    currentY = (event.clientY + document.body.scrollTop); 

    window.status = whichEl.style.pixelLeft + "x" + whichEl.style.pixelTop;
  }
}

function moveEl() {
  if (! noMove) {
    if (whichEl == null) { return };
    if (whichEl.draggable) {
      newX = (event.clientX + document.body.scrollLeft);
      newY = (event.clientY + document.body.scrollTop);
    
      distanceX = (newX - currentX); distanceY = (newY - currentY);
      currentX = newX; currentY = newY;
      whichEl.style.pixelLeft += distanceX; whichEl.style.pixelTop += distanceY;
  
      window.status = whichEl.style.pixelLeft + "x" + whichEl.style.pixelTop;
      event.returnValue = false;
    }
  }
}

function checkEl() { if (whichEl != null) { return false } }
function dropEl()  { whichEl = null; }

document.onmousemove = moveEl;
document.onselectstart = checkEl;
document.onmousedown = grabEl;
document.onmouseup = dropEl;