var styling;
var direction;
var newContent;
var endHeight;

function unfold(div)
{
	endHeight = 220;

	styling = document.getElementById("foldout").style;
	newContent = document.getElementById(div).style;

	if (styling.display == "block")
	{
	     //already shown, so just fade the new content in
		direction="out";
		//resumeFade(100); Don't do this because we lose the hover style on the new content
		styling.display = "block";
		reset();
		newContent.display = "block";
		resumeScroll(410);
	}
	else
	{
		styling.display = "block";
		reset();
		newContent.display = "block";
		resumeScroll(0);
	}
}

function resumeFade(opacity)
{
	styling.opacity = (opacity/100);
	styling.MozOpacity = (opacity/100);
	styling.KhtmlOpacity = (opacity/100);
	styling.filter = "alpha(opacity=" + opacity + ")";
	
	if(direction == "out")
	{
		if(opacity > 0)
		{
			opacity = opacity - 10;
			window.setTimeout("resumeFade(" + opacity + ")",1);
		}
		else
		{
			reset();
			newContent.display = "block";
			
			direction="in";
			opacity++;
			window.setTimeout("resumeFade(" + opacity + ")",1);
		}
	}
	else if(direction == "in")
	{
		if(opacity < 100)
		{
			opacity = opacity + 10
			window.setTimeout("resumeFade(" + opacity + ")",1);
		}
		else
		{
			return;
		}
	}
}

function resumeScroll(height)
{
    if (height < endHeight)
	{
	    styling.overflow = "hidden";
		styling.height = height + "px";
		height = height + 10;
		window.setTimeout("resumeScroll(" + height + ")",1);
	}
	else
	{
	    styling.overflow = "auto";
		styling.height = endHeight + "px";
		return;
	}
}

function reset()
{
	document.getElementById("about").style.display = "none";
	document.getElementById("projects").style.display = "none";
	document.getElementById("resources").style.display = "none";
	document.getElementById("recruitment").style.display = "none";
}