function dragAndDrop(variableName, popupPanelsRef, browserRef)
{
    this.variableName = variableName;
    this.browserRef = browserRef;

    // Global object to hold drag information.
    this.dragObj = new Object();
    /*this.dragObj.zIndex = 0;*/
    
    this.dragStart = dragStart;
    this.dragGo = dragGo;
    this.dragStop = dragStop;

    function dragStart(event, id)
    {
        popupPanelsRef.setTopest(id);
        
        var el;
        var x, y;

        // If an element id was given, find it. Otherwise use the element being
        // clicked on.
        if (id)
            this.dragObj.elNode = document.getElementById(id);
        else
        {
            if (this.browserRef.isNS || this.browserRef.isChrome)
                this.dragObj.elNode = event.target;
            else
                this.dragObj.elNode = window.event.srcElement;
                
            // If this is a text node, use its parent element.
            if (this.dragObj.elNode.nodeType == 3) //TEXT_NODE = 3
                this.dragObj.elNode = this.dragObj.elNode.parentNode;
        }

        // Get cursor position with respect to the page.
        if (this.browserRef.isNS || this.browserRef.isChrome)
        {
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
        }
        else
        {
            x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
        }      
        // Save starting positions of cursor and element.

        this.dragObj.cursorStartX = x;
        this.dragObj.cursorStartY = y;
        this.dragObj.elStartLeft  = parseInt(this.dragObj.elNode.style.left, 10);
        this.dragObj.elStartTop   = parseInt(this.dragObj.elNode.style.top,  10);

        if (isNaN(this.dragObj.elStartLeft))
            this.dragObj.elStartLeft = 0;
        
        if (isNaN(this.dragObj.elStartTop))
            this.dragObj.elStartTop  = 0;

        /*
        // Update element's z-index.
        this.dragObj.elNode.style.zIndex = ++this.dragObj.zIndex;*/

        // Capture mousemove and mouseup events on the page.

        if (this.browserRef.isNS || this.browserRef.isChrome)
        {
            document.addEventListener("mousemove", dragGo,   true);
            document.addEventListener("mouseup",   dragStop, true);
            event.preventDefault();
        }
        else
        {
            document.attachEvent("onmousemove", dragGo);
            document.attachEvent("onmouseup",   dragStop);
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
    }

    function dragGo(event)
    {
        var x, y;
        
        // Get cursor position with respect to the page.
        if (eval(variableName +".browserRef.isNS"))
        {
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
        }
        else
        {
            x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
        }

        // Move drag element by the same amount the cursor has moved.
        eval(variableName + ".dragObj.elNode.style.left = (" + variableName + ".dragObj.elStartLeft + x - " + variableName + ".dragObj.cursorStartX) + 'px'");
        eval(variableName + ".dragObj.elNode.style.top = (" + variableName + ".dragObj.elStartTop  + y - " + variableName + ".dragObj.cursorStartY) + 'px'");
        
        if (eval(variableName + ".browserRef.isNS || " + variableName + ".browserRef.isChrome"))
            event.preventDefault();
        else
        {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
    }

    function dragStop(event)
    {
        // Stop capturing mousemove and mouseup events.
        if (eval(variableName + ".browserRef.isNS || " + variableName + ".browserRef.isChrome"))
        {
            document.removeEventListener("mousemove", dragGo,   true);
            document.removeEventListener("mouseup",   dragStop, true);
        }
        else
        {
            document.detachEvent("onmousemove", dragGo);
            document.detachEvent("onmouseup",   dragStop);
        }
    }
}