currentX = currentY = 0;
whichEl = null;

function grabEl() {
    whichEl = event.srcElement;
    while (!whichEl.draggable) { 
        whichEl = whichEl.parentElement;
        if (whichEl == null) { return }
    }

    if ( whichEl != elPuzzle && 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); 
}
    
function moveEl() {
    if (whichEl == null) { return };

    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;
    if (whichEl.style.pixelLeft + whichEl.clipLeft < document.body.scrollLeft) {
        whichEl.style.pixelLeft = document.body.scrollLeft - whichEl.clipLeft;
    }
    if (whichEl.style.pixelTop + whichEl.clipTop < document.body.scrollTop) {
        whichEl.style.pixelTop = document.body.scrollTop - whichEl.clipTop;
    }
    event.returnValue = false;
}
    
function checkEl() {
    if (whichEl != null) { return false }
}


function dropEl() {
    if (whichEl == null){return}
    if (whichEl == elPuzzle) {whichEl = null; return}

    dropLeft = event.clientX + document.body.scrollLeft;
    dropTop = event.clientY + document.body.scrollTop;
    allowLeft = puzzLeft;
    allowRight = puzzLeft + puzzWidth;
    allowTop = puzzTop;
    allowBot = puzzTop + puzzHeight;

    if (dropLeft >= allowLeft && dropLeft <= allowRight && 
        dropTop >= allowTop && dropTop <= allowBot) {

        diffLeft = puzzLeft - whichEl.style.pixelLeft;
        diffTop = puzzTop - whichEl.style.pixelTop;

        whereL = parseInt( diffLeft / pieceWidth ) * pieceWidth;
        whereT = parseInt( diffTop / pieceHeight ) * pieceHeight;

        modL = diffLeft % pieceWidth;
        modT = parseInt( diffTop % pieceHeight );

        if (Math.abs(modL) > pieceWidth/2) {
            if (modL>0) {whereL += pieceWidth} else {whereL -= pieceWidth}
        }
        if (Math.abs(modT) > pieceHeight/2) {
            if (modT>0) {whereT += pieceHeight} else {whereT -= pieceHeight}
        }

        whichEl.style.pixelLeft = puzzLeft - whereL;
        whichEl.style.pixelTop = puzzTop - whereT;

        if (whichEl.style.pixelLeft == puzzLeft && whichEl.style.pixelTop == puzzTop) {
            tempEl = whichEl;
            flashTimer = setInterval("visToggle(false)",100); 
        }


    }
    whichEl = null;
}

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