/*
** This function will show of the CAPTCHA
** div and hide the other one.
** The first time, when we start with both
** invisible, we expand the height of the
** containers, otherwise the leave a message
** form at the bottom would be clipped.
*/
function showhide(element, visibility)
{
	var vis1 = isVisible('code1');
	var vis2 = isVisible('code2');
	
	if (element == 'code1')
	{
		setVisible('code1', visibility);	
		setVisible('code2', !visibility);	
	}
	else if (element == 'code2')
	{
		setVisible('code1', !visibility);	
		setVisible('code2', visibility);	
	}

	// If both elements
	if (vis1==false && vis2==false)
		expandHeight(element);
}


/*
** This function is called when the CAPTCHA
** is validated. We shrink the height of the
** containers by the height of one of the div
** and then make them both invisible.
*/
function hideBoth()
{
	// Shrink the height of the containers
	shrinkHeight();

	// Hide objects
	setVisible('code1', false);
	setVisible('code2', false);
}


/*
** This function is called when we expand one
** of the link to get a CAPTCHA box. The first
** time we need to expand the height of our 
** containers by the height of the div.
*/
function expandHeight(element)
{
	// Find objects 
	var obj1 = document.getElementById('contentleft');
	var obj2 = document.getElementById('contentright');
	var div = document.getElementById(element);
	
	// Get height
	var h = parseInt(obj1.offsetHeight);
	
	// New height
	var newh = h + parseInt(div.offsetHeight);
	
	// Set the new height
	obj1.style.height = newh + 'px';
	obj2.style.height = newh + 'px';	
}


/*
** This function is called when we validate one
** of the CAPTCHA box. We then close the div
** and need to shrink the height of the containers.
*/
function shrinkHeight()
{
	// Find objects 
	var obj1 = document.getElementById('contentleft');
	var obj2 = document.getElementById('contentright');
	var div1 = document.getElementById('code1');
	var div2 = document.getElementById('code2');
	
	// Get height of container
	var h = parseInt(obj1.offsetHeight);
	
	// New height (one of the 2 div is not visible, ie height = 0)
	var newh = h - parseInt(div1.offsetHeight) - parseInt(div2.offsetHeight);
	
	// Set the new height
	obj1.style.height = newh + 'px';
	obj2.style.height = newh + 'px';	
}


/*
** Sets the visibility of an element.
** It does actually more than that since
** an element with a display of none is not
** even constructed.
*/
function setVisible(element, visibility)
{
	if (document.getElementById)
	{
		// Get style of element
		var style = document.getElementById(element).style;
		
		// Change visibility of element
		if (style)
		{
			if (visibility)
				style.display = "block";
			else
				style.display = "none";
		}
	}	
}


/*
** Returns true if the element is visible.
** This is only working for us, because we check for 
** BLOCK in the style.display.
** THIS IS NOT A GENERIC FUNCTION.
*/
function isVisible(element)
{
	if (document.getElementById)
	{
		// Get style of element
		var style = document.getElementById(element).style;
		
		// Change visibility of element
		if (style)
		{
			if ( style.display.toUpperCase() == "BLOCK" )
				return true;
			else 
				return false;
		}
		else
			return false;
	}
	else
		return false;
}