var curElementId = "";
var nextElementId = "";

var curHeight;
var nextHeight;

var maxSteps = 6;
var curSteps = 0;
var delay = 1;

var racing = false;

function movementlol(curElementHeight, nextElementHeight){
	document.getElementById(curElementId).style.height = curElementHeight + "px";
	document.getElementById(nextElementId).style.height = nextElementHeight + "px";
}

function calc_movement(curElementHeight, nextElementHeight){
	if(curSteps != maxSteps){
		tempCurHeight = curHeight * ((maxSteps - curSteps) / maxSteps);
		tempNextHeight = nextHeight * (  curSteps / maxSteps);
		if(curHeight == nextHeight && tempCurHeight + tempNextHeight != curHeight){
			var diff = tempCurHeight - tempNextHeight;
			tempNextHeight += ((diff < 0) ? diff * -1 : diff);
		}
		//alert(tempCurHeight + " " + tempNextHeight);
		
		//Can you say WORKAROUND?
		//IE8, when not in strict mode, for some reason assumes a height of 0px means "automatic".
		if(tempCurHeight == 0){
			tempCurHeight = 1;
		}
		
		if(tempNextHeight == 0){
			tempNextHeight = 1;
		}
		movementlol(tempCurHeight, tempNextHeight);
		setTimeout("calc_movement(" + parseInt(tempCurHeight) + "," + parseInt(tempNextHeight) + ")", delay);
		curSteps++;
	}else{
		//alert(curElementId + " " + nextElementId);
		movementlol(0, nextHeight);
		document.getElementById(curElementId).style.display = "none";
		document.getElementById(curElementId).style.height = curHeight + "px";
		//alert(document.getElementById(curElementId).offsetHeight);
		curElementId = nextElementId;
		nextElementId = "";
		racing = false;
	}
	

}

function showhide_toggle(id){

	if(document.getElementById(id).style.display == "none" && !racing){
		curSteps = 0;
		nextElementId = id;
		//document.getElementById(id).style.display = "table-row-group";
		
		//Get the next element's total height.
		/*
		nextHeight = document.getElementById(nextElementId).style.height;
		nextHeight = nextHeight.substring(0, nextHeight.length-2);*/
		
		document.getElementById(nextElementId ).style.display = "block";
		nextHeight = document.getElementById(nextElementId).offsetHeight;
		document.getElementById(nextElementId).style.height = "1px";
		
		
		//Get this element's total height.
		curHeight = document.getElementById(curElementId).offsetHeight;
		
		//document.getElementById(curElementId).style.height = currentHeight;
		
		racing = true;
		setTimeout("calc_movement(" + curHeight + "," + nextHeight + ")", delay);
		
	}
}