// div dragging. very simple but works fine.


var xoff;
var yoff;
var dragging;
var callback; // called when the drag finishes

/* 
I need a slight modification here to allow things to stay where
they are dragged by doing an rpc back to the server and notifying the
object that it has moved.
*/

// xoff + pos.x = pageX
// this also needs to move the window to the front. Probably the easiest way to do that would be to remove child then append child.
function startDrag(event, obj, cb) {
    callback=cb;
    //obj.innerHTML="Start drag..." + obj.style.left + ', ' + obj.style.top;
    dragging = obj;
    xoff = event.pageX - parseFloat(dragging.style.left);
    yoff = event.pageY - parseFloat(dragging.style.top);

    raise(event, obj);

    document.body.onmousemove = drag;
    obj.onmouseup = endDrag;
}

// raise a window. I think I need to think of a different way of doing this. At the moment window height won't be persisted.
function raise(event, obj) {
    var p = obj.parentNode;
    // p.removeChild(obj);
    // p.appendChild(obj);
}

// this shouldn't get called unless we are dragging - it is attached to the body move event by the startDrag handler.
function drag(event) {
    if (!dragging) return;
    //obj.innerHTML="drag...";
    dragging.style.left = event.pageX - xoff;
    dragging.style.top = event.pageY - yoff;
}

function endDrag(event) {
    if(callback) callback();

    callback = undefined;
    //obj.innerHTML="end drag...";
    dragging = undefined;

    document.body.onmousemove = undefined;
}