/**
 * Drag.js: drag absolutely positioned HTML elements.
 *
 * This module defines a single drag( ) function that is designed to be called
 * from an onmousedown event handler. Subsequent mousemove events will
 * move the specified element. A mouseup event will terminate the drag.
 * If the element is dragged off the screen, the window does not scroll.
 * This implementation works with both the DOM Level 2 event model and the
 * IE event model.
 *
 * Arguments:
 *
 *   elementToDrag: the element that received the mousedown event or
 *     some containing element. It must be absolutely positioned. Its
 *     style.left and style.top values will be changed based on the user's
 *     drag.
 *
 *   event: the Event object for the mousedown event.
 **/
function drag(elementToDrag, event) {
    // The mouse position (in window coordinates)
    // at which the drag begins
    var startX = event.clientX, startY = event.clientY;

    // The original position (in document coordinates) of the
    // element that is going to be dragged. Since elementToDrag is
    // absolutely positioned, we assume that its offsetParent is the
    // document body.
    var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;

    // Even though the coordinates are computed in different
    // coordinate systems, we can still compute the difference between them
    // and use it in the moveHandler( ) function. This works because
    // the scrollbar position never changes during the drag.
    var deltaX = startX - origX, deltaY = startY -