function DragDrop(){
    this.savedTarget = null; // The target layer
    this.orgCursor = null;   // The original Cursor (mouse) Style so we can restore it
    this.dragOK = false;     // True if we're allowed to move the element under mouse
    this.dragXoffset = 0;    // How much we've moved the element on the horizontal
    this.dragYoffset = 0;    // How much we've moved the element on the horizontal
    this.dragElements = new Array();
    this.px = this.py = 0;

    this.dragElement = function(className, dragStart, drag, drop, cursor) {
        this.dragElements.push([className, dragStart, drag, drop, cursor]);
    }

    this.moveHandler = function(me, i) {
        function moveHandle(e) {
            if (e == null) { e = window.event }
            if (e.button <= 1 && me.dragOK) {
                this.px = e.clientX - me.dragXoffset;
                this.py = e.clientY - me.dragYoffset;
                //do callback - drag
                if (me.dragElements[i][2]) me.dragElements[i][2](me.savedTarget, this.px, this.py);
            }
        }
        return moveHandle;
    }
    this.cleaner = function(me) {
        function clean(e){
            document.onmousemove = null;
            document.onmouseup = null;
            me.savedTarget.style.cursor = me.orgCursor;
            me.dragOK = false;
            //do callback - drop
            if (me.dragElements[i][3]) me.dragElements[i][3](me.savedTarget, this.px, this.py);
        }
        return clean;
    }
    this.dragHandler = function(me) {
        function dragHandle(e) {
            //var htype = '-moz-grabbing';
            if (e == null) {
                e = window.event;
                //htype = 'move'; //ie
            }
            var target = e.target != null ? e.target : e.srcElement;
            for (i = 0; i < me.dragElements.length; i++) {
                if (target.id == me.dragElements[i][0]) {
                    me.savedTarget = target;
                    me.orgCursor = target.style.cursor;
                    target.style.cursor = me.dragElements[i][4] // htype;
                    me.dragOK = true;
                    me.dragXoffset = e.clientX - parseInt(target.style.left);
                    me.dragYoffset = e.clientY - parseInt(target.style.top);
                    this.px = e.clientX - me.dragXoffset;
                    this.py = e.clientY - me.dragYoffset;
                    document.onmousemove = me.moveHandler(me, i);
                    document.onmouseup = me.cleaner(me);
                    //do callback - dragStart
                    if (me.dragElements[i][1]) me.dragElements[i][1](me.savedTarget, this.px, this.py);
                    return false;
                    break;
                }
            }
        }
        return dragHandle;
    }
}
var dragDrop = new DragDrop();
document.onmousedown = dragDrop.dragHandler(dragDrop);

