var _startX = 0; 		// mouse starting positions
var _startY = 0;
var _offsetX = 0; 		// current element offset
var _offsetY = 0;
var _dragElement; 		// needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; 		// we temporarily increase the z-index during drag
var _debug = $('debug'); // makes life easier

function InitDragDrop() {

    document.onmousemove = OnMouseMove;
}

function ExtractNumber(value) {
    var n = parseInt(value);

    return n == null || isNaN(n) ? 0 : n;
}

function OnMouseMove(e) {

    if (e == null)
        e = window.event;

    // IE uses srcElement, others use target
    var target = e.target != null ? e.target : e.srcElement;


    if ((e.button == 1 && window.event != null || e.button == 0) && target.id == "overlay")
    //if ((e.button == 1 && window.event != null || e.button == 0))
    {
        if (e == null)
            var e = window.event;

        SelectionMove(e);
    }

} // end function OnMouseMove

function SelectionMove(e) {

    scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
    scrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft;

    docWidth = document.body.clientWidth;

    // grab the mouse position
    _startX = e.clientX + scrollLeft;
    _startY = e.clientY + scrollTop;

    offsetX = 0;
    mLeft = 0;

    if (docWidth > 940) {
        offsetX = docWidth - 940;
        mLeft = _startX - (offsetX / 2) - 40;

    } // end if
    else {

        if (scrollLeft > 0)
            mLeft = _startX - (offsetX / 2) - 40;
        else
            mLeft = _startX - 40;

    } // end else

    mTop = _startY - 230;

    wWidth = 694;
    wHeight = 289;

    sWidth = 80;
    sHeight = 80;

    mLeftMin = wWidth - sWidth;
    mTopMin = wHeight - sHeight;

    if (mLeft < 0)
        mLeft = 0;
    if (mTop < 0)
        mTop = 0;

    if (mLeft > mLeftMin)
        mLeft = mLeftMin;

    if (mTop > mTopMin)
        mTop = mTopMin;

    document.getElementById("selection").style.marginLeft = mLeft + "px";
    document.getElementById("selection").style.marginTop = mTop + "px";

    tmp1 = Math.round((mLeft) * 2.725);
    tmp2 = Math.round((mTop) * 2.725);

    document.getElementById("zoomed").style.backgroundPosition = (-tmp1) + "px " + (-tmp2) + "px";

} // end function SelectionMove

// this is simply a shortcut for the eyes and fingers
function $(id) {
    return document.getElementById(id);
}