var currentArrow = 0;

var arrowImages = new Array(4);
var imagesDir = 'images';
arrowImages[0] = "arrow1.gif";
arrowImages[1] = "arrow2.gif";
arrowImages[2] = "arrow3.gif";
arrowImages[3] = "arrow4.gif";


function rotateArrow(itemToRotate, menuVisible) {
	if (!menuVisible && currentArrow < 3) {
		currentArrow++;
		t = setTimeout("rotateArrow('" + itemToRotate + "'," + menuVisible + ")", 50);
		document.getElementById(itemToRotate).style.backgroundImage = "url(" + imagesDir + '/' + arrowImages[currentArrow] + ")";
	} else if (menuVisible && currentArrow > 0) {
		currentArrow--;
		t = setTimeout("rotateArrow('" + itemToRotate + "'," + menuVisible + ")", 50);
		document.getElementById(itemToRotate).style.backgroundImage = "url("  + imagesDir + '/' + arrowImages[currentArrow] + ")";
	} else if (menuVisible && currentArrow == 0) {
		document.getElementById(itemToRotate).style.backgroundImage = "url('"+ imagesDir + "menuhover.gif')";
		document.getElementById(itemToRotate).style.backgroundImage = "none";
	}
	document.getElementById(itemToRotate).style.backgroundRepeat = "no-repeat";
	document.getElementById(itemToRotate).style.backgroundPosition = '2px 4px';
}

/* This method has two parameters. 
 * The first is the element name of the div containing the menu
 * The second is the element name of the link (which is decorated using an arrow)
 */
function togglemenu(elementName, linkElement) {
	if (document.getElementById(elementName).style.display == 'block') {
		origheight = document.getElementById(elementName).offsetHeight;
		document.getElementById(elementName).style.display = 'none';
		rotateArrow(linkElement, true);
	} else {
		document.getElementById(elementName).style.display = 'block';
		rotateArrow(linkElement, false);
	}
	return false;
}