﻿// Global object to hold drag information.

var drag = {
    dragObj:null,
    browser:null,

    init: function ()
    {
        this.dragObj = new Object();
        this.zIndex = 0;
        this.browser = new this.BrowserCheck();
    },

    BrowserCheck: function () 
    {
        var ua, s, i;

        this.isIE = false;
        this.isNS = false;
        this.version = null;

        ua = navigator.userAgent;

        s = "MSIE";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isIE = true;
            this.version = parseFloat(ua.substr(i + s.length));
            return;
        }

        s = "Netscape6/";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isNS = true;
            this.version = parseFloat(ua.substr(i + s.length));
            return;
        }

        // Treat any other "Gecko" browser as NS 6.1.

        s = "Gecko";
        if ((i = ua.indexOf(s)) >= 0) {
            this.isNS = true;
            this.version = 6.1;
            return;
        }
    },

    dragStart: function(event, 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.browser.isIE)
                this.dragObj.elNode = window.event.srcElement;
            if (this.browser.isNS)
                this.dragObj.elNode = event.target;

            // If this is a text node, use its parent element.

            if (this.dragObj.elNode.nodeType == 3)
                this.dragObj.elNode = this.dragObj.elNode.parentNode;
        }

        // Get cursor position with respect to the page.

        if (this.browser.isIE) {
            x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
        }
        if (this.browser.isNS) {
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
        }

        // 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.browser.isIE) {
            document.attachEvent("onmousemove", this.dragGo);
            document.attachEvent("onmouseup",   this.dragStop);
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (this.browser.isNS) {
            document.addEventListener("mousemove", this.dragGo,   true);
            document.addEventListener("mouseup",   this.dragStop, true);
            event.preventDefault();
        }
    },

    dragGo: function (event) {
        var x, y;

        // Get cursor position with respect to the page.

        if (drag.browser.isIE) {
            x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
            y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
        }
        if (drag.browser.isNS) {
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
        }

        // Move drag element by the same amount the cursor has moved.

        drag.dragObj.elNode.style.left = (drag.dragObj.elStartLeft + x - drag.dragObj.cursorStartX) + "px";
        drag.dragObj.elNode.style.top  = (drag.dragObj.elStartTop  + y - drag.dragObj.cursorStartY) + "px";

        if (drag.browser.isIE) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
        if (drag.browser.isNS)
            event.preventDefault();
    },

    dragStop: function (event) {
        // Stop capturing mousemove and mouseup events.
        if (drag.browser.isIE) {
            document.detachEvent("onmousemove", drag.dragGo);
            document.detachEvent("onmouseup",   drag.dragStop);
        }
        if (drag.browser.isNS) {
            document.removeEventListener("mousemove", drag.dragGo,   true);
            document.removeEventListener("mouseup",   drag.dragStop, true);
        }
    },
    test: function ()
    {
        alert(this.browser.isIE);
    }
    
}
drag.init();
//drag.test();