//<![CDATA[
//////////////////////////////////////////////////////////////////
// Script by Matt Murphy
// For questions, comments and a live demo - please visit:
// http://www.matts411.com/webdev/creating_draggable_html_element_panes
//////////////////////////////////////////////////////////////////

var d_paneShell;
var d_zDex = 3;
var d_offsetX = 0;
var d_offsetY = 0;

var draggable = {
    setupPane: function(obj) {
        obj.onmousedown = draggable.activatePane;
        obj.onmouseover = function () {}
    },
    
    activatePane: function(e) {
        var e = (!e) ? window.event : e;
        d_paneShell = (e.target) ? e.target : e.srcElement;
        while(d_paneShell.tagName != "BODY" && !d_paneShell.getAttribute("paneShell")) {
            d_paneShell = d_paneShell.parentNode;
        }
        if(d_paneShell.tagName != "BODY") {
//            d_paneShell.style.zIndex = d_zDex++;
            d_offsetX = e.clientX - d_paneShell.offsetLeft;
            d_offsetY = e.clientY - d_paneShell.offsetTop;
            if(window.addEventListener) {
                document.addEventListener("mouseup", draggable.deactivatePane, true);
                document.addEventListener("mousemove", draggable.dragPane, true);
            } else {
                document.attachEvent("onmousemove", draggable.dragPane);
                document.attachEvent("onmouseup", draggable.deactivatePane);
            }
        }
		if(typeof mousedown == 'function')
			mousedown(this);
        return false;
    },
    
    dragPane: function(e) {
        var e = (!e) ? window.event : e;
        d_paneShell.style.left = (e.clientX - d_offsetX) + "px";
        d_paneShell.style.top = (e.clientY - d_offsetY) + "px";
		if(onDrag)
			onDrag();
        return false;
    },
    
    deactivatePane: function() {
        if(window.addEventListener) {
            document.removeEventListener("mousemove", draggable.dragPane, true);
            document.removeEventListener("mouseup", draggable.deactivatePane, true);
        } else {
            document.detachEvent("onmousemove", draggable.dragPane);
            document.detachEvent("onmouseup", draggable.deactivatePane);
        }
		if(onDragEnd)
			onDragEnd();
    },
    
    // Extra functions / features:
    createPane: function() {
        var newPane = document.createElement("DIV");
        newPane.className = "pane";
        newPane.setAttribute("paneShell", "true");
        newPane.style.top = "50px";
        newPane.style.left = "30px";
        
        contentPane = document.createElement("DIV");
        contentPane.className = "newPane";
        contentPane.style.backgroundColor = "rgb("+(Math.random() * 100)+"%, "+(Math.random() * 100)+"%, "+(Math.random() * 100)+"%)";
        newPane.appendChild(contentPane);
        
        document.body.appendChild(newPane);
        draggable.setupPane(newPane);
    },
    
    closePane: function(obj) {
        while(obj.tagName != "BODY" && !obj.getAttribute("paneShell")) {
            obj = obj.parentNode;
        }
        if(obj.tagName != "BODY") {
            obj.parentNode.removeChild(obj);
        }
    }
}

function onDrag()
{
}

function onDragEnd()
{
}
//]]>