var ie = document.all;
var moz = document.getElementById && !document.all; 


///////////////////////////
// Image Toggle example
///////////////////////////

function ShowImage(page, tag)
{
    var i = 1;
    var el;
    while (el = document.getElementById(tag + i)) {
        if (i == page)
            el.style.display = 'block';
        else
            el.style.display = 'none';
        i++;
    }
}

///////////////////////////
// Drag and Drop example
///////////////////////////

// Set the callbacks
document.onmousedown = mousedown;
document.onmousemove = movemouse;
document.onmouseup   = mouseup;

var lastobj;  // Last draggable object we hovered over
var isdrag;   // True if dragging an object

// This prevents browsers from highlighting the draggable text
// when you click on it.  The table containing all the draggable
// text has id <b>drag_drop</b>.

window.onload = function()
{
    var e = document.getElementById('drag_drop');
    if (e) {
        if (moz)
	    e.onmousedown = function () { return false; } // mozilla
	else
	    e.onselectstart = function () { return false; } // ie
    }
}

// Checks to see if a swap is allowed between two objects based on their ids.
// Change this as you see fit to permit or forbid swapping each possible pair
// of draggable items.
function allowswap(a,b)
{
    if (a.id == "dragdropa" && b.id == "dragdropb" || a.id == "dragdropb" && b.id == "dragdropa")
        return true;
    return false;
}

// Returns true if an object is draggable - change this to suit your needs.
function isdraggable(obj)
{
    if (obj.id.substr(0,8) == "dragdrop")
        return true;
    return false;
}

// Callback when mouse button is pressed.  This check if an item is draggable, and
// if so initiates the process.
function mousedown(e) 
{
    var obj = moz ? e.target : event.srcElement;
    // Trace up DOM tree to see if item clicked on is draggable.  This allows
    // for the fact that you may click, for example, on a TD while the enclosing
    // TR is the draggable object.
    while (obj.tagName != "HTML" && obj.tagName != "BODY" && !isdraggable(obj)) {
        obj = moz ? obj.parentNode : obj.parentElement;
    }
    if (isdraggable(obj)) {
        // If draggable, set a global flag to track this, and save a pointer
        // to the object in a global variable as well (dragobj).
        isdrag = true;
        dragobj = obj;

        // origx, origy is original starting location of dragged object
        origx = dragobj.style.left;
        origy = dragobj.style.top;

        // x,y is absolute co-ordinates within the window
        x = moz ? e.clientX : event.clientX;
        y = moz ? e.clientY : event.clientY;

        // While offsetX, offSetY depend on where exactly you clicked on the object.
        // Thus if you click in the middle of the object, it will be 'attached' to
        // the mouse at that point, and not the upper left corner, for example.
        offsetX = moz ? e.layerX + 2: event.x + 2;
        offsetY = moz ? e.layerY + 2: event.y + 2;
    }
}

// Callback when mouse is moved.  It will change the cursor when you move over an object
// you can - or cannot - swap with.

function movemouse(e)
{
    // Check if we are dragging an object
    if (isdrag) {
        // If so, set the dragged object's position relative to how much the mouse has moved
        // since first clicked.
        dragobj.style.left = moz ? origx + e.clientX - x + offsetX + 'px' : origx + event.clientX - x + offsetX;
        dragobj.style.top  = moz ? origy + e.clientY - y + offsetY + 'px' : origy + event.clientY - y + offsetY;
        var obj = moz ? e.target : event.srcElement;
	
        // If we are over an element that we cannot swap with, change its cursor style
        // to show that a swap is forbidden
        if (obj != dragobj && isdraggable(obj) && !allowswap(dragobj,obj)) {
            obj.style.cursor = 'wait';
            // save in a handle to the object in a global so we can reset the cursor later
            lastobj = obj;
        }
        else if (lastobj)  // reset the cursor as soon as we move off a non-swappable object
            lastobj.style.cursor = 'pointer';
        return false;
    }
    else {
        // Sometimes can get stuck with no drop icon, so restore cursor just to be safe,
        // when not dragging but passing over a draggable item
        var obj = moz ? e.target : event.srcElement;
        if (isdraggable(obj))
            obj.style.cursor = 'pointer';
    }
}

// Callback when mouse is released - checks if a swap should occur and
// returns dragged object to its starting position if not.

function mouseup(e)
{
    if (isdrag) {  // If something is being dragged

        // Get the object over which the mouse button was just released
        var obj = moz ? e.target : event.srcElement;

        // Check if mouse was release over an object we can swap with
        if (obj != dragobj && isdraggable(obj) && allowswap(dragobj, obj)) {

            // A swap is allowed - swap color, tooltip and contents of the
            // dragged object with that it was released over
            var htm = obj.innerHTML;
            obj.innerHTML = dragobj.innerHTML;
            dragobj.innerHTML = htm;

            var col = obj.style.color;
            obj.style.color = dragobj.style.color;
            dragobj.style.color = col;

            var titl = obj.title;
            obj.title = dragobj.title;
            dragobj.title = titl;

            // Set the position of the object we were dragging (dragobj) where the
            // other object (obj) is located and move obj to the original location
            // of dragobj before it was dragged (origx, origy).
            dragobj.style.left = obj.style.left;
            dragobj.style.top = obj.style.top;
            obj.style.left = origx;
            obj.style.top = origy;
        }
        else {
            // No swap can occur so return dragged object to its starting position
            dragobj.style.left = origx;
            dragobj.style.top = origy;
        }

        // Restore cursor to pointer if it was changed in movemouse above
        if (lastobj) {
            lastobj.style.cursor = 'pointer';
        }
    }
    isdrag = false;  // Nothing is being dragged now
}

///////////////////////////////////////////////////////////////////////////////////////////////////