var delT = 25;

function toggleslow(divid,duration)
{
try{clearTimeout(hide_elem)}catch(e){}
try{clearTimeout(show_elem)}catch(e){}

var div = getDiv(divid);
var divs = div.style;

//if not then sets the overflow to hidden
var flow = divs.getPropertyValue("overflow");
if(!(flow=="hidden"))
	divs.setProperty("overflow", "hidden", "");


var h = div.scrollHeight;
if(h!=0)
	initial_h=h;

//depending on height different function is called
var ratio = calc_ratio(duration,initial_h); //ratio of height change for given duration
if(div.offsetHeight==0)
{
	element_show(divid,initial_h,ratio);
}
else
{
	element_hide(divid,ratio);
}

}

/**********************************************************/
/*	Shows the element				  */
/**********************************************************/

/*

Function description:
======================
Changes the height of the element from 0 to the 'initial height'

Declared variables:
======================
new_h = height of element after each transition
show_elem = a Timeout variable

*/

function element_show(id,h,ratio)
{
try{clearTimeout(hide_elem)}catch(e){}
var div = getDiv(id);
var divs = div.style;
var new_h = div.offsetHeight;

if(new_h<h){
	divs.setProperty("height", (new_h+ratio)+"px", "");
	show_elem = setTimeout(element_show, delT, id, h, ratio);
}
else
{
	divs.setProperty("height", "", "");
}

}

/**********************************************************/
/*	Hides the element				  */
/**********************************************************/

/*

Function description:
======================
Reduces the height of the element to 0

Declared variables:
======================
hide_elem = a Timeout variable

*/

function element_hide(id,ratio)
{
try{clearTimeout(show_elem)}catch(e){}
var div = getDiv(id);
var divs = div.style;
var h = div.offsetHeight;

if(!(h<=ratio)){
	divs.setProperty("height", (h-ratio)+"px", "");
	hide_elem = setTimeout(element_hide, delT, id, ratio);
}
else{
	divs.setProperty("height", 0+"px", "");
}

}

/**********************************************************/
/*	Secondary Functions				  */
/**********************************************************/

/*

Function description:
======================
getDiv() - Function to get the 'div' object (change it if any other
type of object is required

calc_ratio() - Calculates the by how much the height has to be
changed given the duration (not very accurate)

Declared variables:
======================
id - id of element to manipulate
duration - duration for the effect
initial_h - initial height of the element (for calculation purposes)

*/

function getDiv(id){
return document.getElementById(id);
}

function calc_ratio(duration, initial_h)
{
num = Math.ceil(initial_h/(duration/delT));
return num;
}