/* ***********************************************************
  set the background-image of given div id to imageName, width and height.
  if image is '' or it's the same as the current one then the div is hidden.
  the div is centred using a -ve left margin and a left posotion of 50%
*********************************************************** */

function getBrowserWidth()
{
    if (window.innerWidth)
    {
	return window.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientWidth != 0)
    {
	return document.documentElement.clientWidth;
    }
    else if (document.body)
    {
	return document.body.clientWidth;
    }
    
    return 0;
};

function getDiv(divID)
{
    var style;
    if (document.getElementById)
    {
        // this is the way the standards work
	return document.getElementById(divID).style;
    }
    else if (document.all)
    {
        // this is the way old msie versions work
	return document.all[divID].style;
    }
    else if (document.layers)
    {
        // this is the way nn4 works
	return document.layers[divID].style;
    }
}

function setImage(divID, imageName, imageWidth, imageHeight)
{
    style = getDiv(divID);

    backgroundImage = "url(" + imageName + ")";

    if (style.backgroundImage == backgroundImage || imageName == "")
    {
	style.display = "";
	style.backgroundImage = "";
    }
    else
    {
	if (style.backgroundImage == "")
	{
	    style.left = ((getBrowserWidth() - imageWidth) / 2) + 'px';
	}
	style.display = "block";
	style.backgroundImage = backgroundImage;
	style.width = (imageWidth-1) + 'px';
	style.height = (imageHeight-1) + 'px';
    }
}

function toggleDiv(divID)
{
    style = getDiv(divID);
    if (style.visibility == "visible")
    {
	style.visibility = "hidden";
    }
    else
    {
	style.visibility = "visible";
    }
}