function debugit( text )
{
    alert( text );
}


// Booleans
var TRUE = 1;
var FALSE = 0;


// Check web browser type
NS4 = (document.layers) ? true : false;
IE4 = (document.all && !document.getElementById) ? true : false;
IE5 = (document.all && document.getElementById) ? true : false;
NS6 = (!document.all && document.getElementById) ? true : false;

// Global Vars
var curX,          // the X position of the active DIV
    curY,          // the Y position of the active DIV
    downX,         // the X position of the mouse when the user clicks
    downY,         // the Y position of the mouse when the user clicks
    offX,          // the X offset on the drag event...how far the active DIV moves left or right
    offY,          // the Y offset of the drag event...how far the active DIV moves up or down
    drag = FALSE,  // are we dragging a DIV or not.,, set in onMouseDown/onMouseUp
    currDiv;        // will later be used to identify the active DIV


// Set up events
if (NS4 || NS6)
{
    document.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN|Event.MOUSEMOVE);
}

document.onmousedown = onMouseDown;
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;

function showPic( url, w, h )
{
    sizeDiv( "pictureDiv", w, h );
    content =  "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=\"100%\" HEIGHT=\"100%\">";
    content += "<TR><TD WIDTH=\"100%\" HEIGHT=\"100%\" BACKGROUND=\"" + url + "\" VALIGN=TOP ALIGN=RIGHT>";
    content += "<A HREF=\"javascript:hideDiv(\'pictureDiv\')\">x&nbsp;&nbsp;</A>";
    content += "</TD></TR>";
    content += "</TABLE>";

    changeDivContent( "pictureDiv", content );
    //moveDiv( "pictureDiv", 100, 100 );

    setTopDiv( "pictureDiv" );

    showDiv( "pictureDiv" );
    
}

//change HTML in DIV! NICE!
function changeDivContent( divName, text )
{
    if( text != "" )
    {
	    if (NS4)
	        document.layers[divName].write( text );
	    else if (IE4 || IE5)
	        document.all(divName).innerHTML = text;
	    else if (NS6)
	        document.getElementById(divName).write( text );
	}
}


function hideDiv( divName )
{
    if (NS4)
		document.layers[divName].visibility = "hide";
    else if (IE4 || IE5)
		document.all(divName).style.visibility = "hidden";
	else if (NS6)
	    document.getElementById(divName).visibility = "hide";
}

function showDiv( divName )
{
    if (NS4)
		document.layers[divName].visibility = "show";
    else if (IE4 || IE5)
		document.all(divName).style.visibility = "visible";
	else if (NS6)
	    document.getElementById(divName).visibility = "show";
}

function hideDivAll()
{
    var allDIVS = document.getElementsByTagName('div');
    var el,
		i = 0;

	while( el = allDIVS.item(i++) )
	{
	    aDiv = el.id;
	    if (typeof el.style != 'undefined' && aDiv != "" )
	    {
	        hideDiv( aDiv );
	    }
	}
}

function showDivAll()
{
    var allDIVS = document.getElementsByTagName('div');
    var el,
		i = 0;

	while( el = allDIVS.item(i++) )
	{
	    aDiv = el.id;
        if (typeof el.style != 'undefined' && aDiv != "" )
	    {
			showDiv( aDiv );
	    }
	}
}



//*********************************
//EVENT HANDLERS
//*********************************
function onPicDivMouseDown( divName )
{

    setCurrDiv( divName );
    downX = getMouseX();
    downY = getMouseY();
    currX = getDivX( getCurrDiv() );
    currY = getDivY( getCurrDiv() );
    currX2 = currX + getDivWidth( getCurrDiv() );
    currY2 = currY + getDivHeight( getCurrDiv() );
    setTopDiv( divName );
    
    drag = TRUE;
}

function onWinDivMouseDown( divName )
{

    setCurrDiv( divName );
	downX = getMouseX();
    downY = getMouseY();
    currX = getDivX( getCurrDiv() );
	currY = getDivY( getCurrDiv() );
	currX2 = currX + getDivWidth( getCurrDiv() );
    currY2 = currY + getDivHeight( getCurrDiv() );
    setTopDiv( divName );
}

function onMouseMove( e )
{
    offX = getMouseX() - downX;
    offY = getMouseY() - downY;

    if( drag )
    {
        moveDiv( getCurrDiv(), currX + offX, currY + offY);
    }
}

function onMouseUp( e )
{
    drag = FALSE;
}

// NOT IN USE
function onMouseDown( e )
{
//	drag = TRUE;
//	downX = getMouseX();
//	downY = getMouseY();
//	currX = getDivX( getCurrDiv() );
//	currY = getDivY( getCurrDiv() );
//
//	currX2 = currX + getDivWidth( getCurrDiv() );
//   currY2 = currY + getDivHeight( getCurrDiv() );
//
//    if( (downX > currX) && (downX < currX2) && (downY > currY) && (downY < currY2) )
//    	drag = TRUE;
//    else
//        drag = FALSE;
}

function onMenuBarDown( e )
{
    drag = TRUE;
}


//*********************************
//GETS AND SETS
//*********************************

// bring specified DIV to the front moving everything that was above it back one
function setTopDiv( divName )
{
    var allDIVS = document.getElementsByTagName('div');
    var el,
	i = 0;
	

    // if divName is not already the top Div
    //
    
    if( divName != getTopDiv() )
    {
	divOrder = getOrder( divName );
	
        while( el = allDIVS.item(i++) )
        {
            aDiv = el.id;
            if (typeof el.style != 'undefined' && aDiv != "" )
            {
                if ( aDiv != divName && getOrder( aDiv ) >= divOrder )
                {
                    setOrder( aDiv, getOrder( aDiv ) - 1 );
                }
            }
        }

    setOrder( divName, i - 1 );
    }
}

// return name of top DIV
function getTopDiv()
{
    var allDIVS = document.getElementsByTagName('div');
    var el,
	i = 0;
    var topName = "";
    var topOrder = -1;

    while( el = allDIVS.item(i++) )
    {
	aDiv = el.id;
	if( typeof el.style != 'undefined' && aDiv != "" )
	{
	    anOrder = getOrder( aDiv );
	    test = aDiv + ": " + anOrder;

	    if( anOrder >= topOrder )
	    {
	        topName = aDiv;
	        topOrder = anOrder;
	    }

	}
    }

    return topName;
}

function setCurrDiv( divName )
{
    currDiv = divName;
}

function getCurrDiv()
{
    return currDiv;
}

function setOrder( divName, z )
{
    if (IE4 || IE5)
    	document.all(divName).style.zIndex = z;
}

function getOrder( divName )
{
    if (IE4 || IE5)
    	return document.all(divName).style.zIndex;
}

// Get position of Mouse
function getMouseX()
{
    pos = (NS4 || NS6) ? e.pageX : window.event.x;
    return pos;
}

function getMouseY()
{

    pos = (NS4 || NS6) ? e.pageY : window.event.y;
    return pos;
}

// Get position of DIV
function getDivX( divName )
{
    var myX;
	if (NS4) myX = document.layers[divName].left;
	else if (IE4 || IE5) myX = document.all(divName).style.pixelLeft;
	else if (NS6) myX = parseInt(document.getElementById(divName).style.left + "");
	return myX;
}

function getDivY( divName )
{
    var myY;
	if (NS4) myY = document.layers[divName].top;
	else if (IE4 || IE5) myY = document.all(divName).style.pixelTop;
	else if (NS6) myY = parseInt(document.getElementById(divName).style.top + "");
	return myY;
}


// Set position of DIV
function moveDiv( divName, x, y)
{
    if (NS4)
    {
        document.layers[divName].left = x;
        document.layers[divName].top = y;
    }
	else if (IE4 || IE5)
	{
	    document.all(divName).style.pixelLeft = x;
	    document.all(divName).style.pixelTop = y;
	}
	else if (NS6)
	{
	    document.getElementById(divName).style.left = x;
	    document.getElementById(divName).style.top = y;
	}
}


// Get size of DIV
function getDivWidth( divName )
{
    if (NS4) dimension = document.layers[divName].clip.width;
	else if (IE4 || IE5) dimension = document.all(divName).style.pixelWidth;
	else if (NS6) dimension = parseInt(document.getElementById(divName).style.width + "");
	return dimension;
}

function getDivHeight( divName )
{
    if (NS4) dimension = document.layers[divName].clip.height;
	else if (IE4 || IE5) dimension = document.all(divName).style.pixelHeight;
	else if (NS6) dimension = parseInt(document.getElementById(divName).style.height + "");
	return dimension;
}


// Change size of DIV
function sizeDiv( divName, w, h )
{
    if (NS4)
    {
        document.layers[divName].clip.width = w;
        document.layers[divName].clip.height = h;
    }
	else if (IE4 || IE5)
	{
	    document.all(divName).style.pixelWidth = w;
	    document.all(divName).style.pixelHeight = h;
	}
	else if (NS6)
	{
	    document.getElementById(divName).style.width = w;
	    document.getElementById(divName).style.height = h;
	}
}

// any initialization can go here. right now, it's not i use
function start()
{

}