// step is initialized as 5.
var step=5;
// speed is initialized as 1.
var speed=1;
// CollapsePanel is the function which takes temp and totalheight as input parameters.
// temp is the id of the div which contains all the items under individual Group.
// This function makes the div containing collection of items to collapse.
function CollapsePanel(temp, totalheight)
{	
	// panelheight is assigned the height of the div.
	var panelheight=parseInt(document.getElementById(temp).style.height);
	// Check is done wether panelheight is greater than zero.
	if(panelheight>0)
	{
		// panelheight is decremented by step.
		panelheight=panelheight-step;
		// if panelheight is less than or equal to zero, then div containing items is set to as display none.
		if(panelheight<=0)
		{
			document.getElementById(temp).style.display='none';
		}
		// Check is done if panelheight is greater than zero.
		if(panelheight>0)
		{
			// the height of the div is set to as panelheight.
			document.getElementById(temp).style.height=panelheight;
			// CollapsePanel function is called recursively using setTimeout function using speed as interval.
			setTimeout("CollapsePanel('"+temp+"','"+totalheight+"')", speed);
		}
	}
}

// ExpandPanel is the function which takes temp and totalheight as the input parameters.
// temp is the id of the div which contains all the items under individual Group.
// This function makes the div containing collection of items to expand.
function ExpandPanel(temp, totalheight)
{	
	// panelheight is assigned the height of the div which contains the items collection.
	var panelheight=parseInt(document.getElementById(temp).style.height);
	// It's checked if panelheight is less than total height decremented by step.
	if(panelheight<=(totalheight-step))
	{
		// panelheight is incremented by step.
		panelheight=panelheight+step;
		// the display attribute of the div containing items collection is set to block.
		document.getElementById(temp).style.display='block';
		// the height of the div is set as panelheight.
		document.getElementById(temp).style.height=panelheight;
		// ExpandPanel function is called recursively using setTimeout function with speed as interval.
		setTimeout("ExpandPanel('"+temp+"','"+totalheight+"')", speed);
	}
}

// hidespeed is set to as 1.
var hidespeed=1;
// hidestep is set to as 100.
var hidestep=100;
// HidePanel is the function which takes temp and totalheight as the input parameters.
// temp is the id of the div which contains all the items under individual Group.
// This function makes the div containing the collection of items to disappear at once.
function HidePanel(temp, totalheight)
{
	// panelheight is assigned the height of the div which contains the item collection.
	var panelheight=parseInt(document.getElementById(temp).style.height);
	// It's checked if panelheight is greater than Zero.
	if(panelheight>0)
	{
		panelheight=panelheight-panelheight;
		// If panelheight is less than or equal to zero
		if(panelheight<=0)
		{
			// display attribute of div containing items collection is set to none.
			document.getElementById(temp).style.display='none';
			// height of the div containing items collection is set to as panelheight.
			document.getElementById(temp).style.height=panelheight;
		}
		// If panelheight is greater than zero
		if(panelheight>0)
		{
			// height of the div containing items collection is set to as panelheight.
			document.getElementById(temp).style.height=panelheight;
			// HidePanel function is called recursively using setTimeout function with hidespeed as interval.
			setTimeout("HidePanel('"+temp+"','"+totalheight+"')", hidespeed);
		}
	}
}

// ShowPanel is the function which takes temp and totalheight as the input parameters.
// temp is the id of the div which contains all the items under individual Group.
// This function makes the div containing the collection of items to appear at once.
function ShowPanel(temp, totalheight)
{
	// panelheight is assigned the height of the div which contains the item collection.
	var panelheight=parseInt(document.getElementById(temp).style.height);
	if(panelheight<=(totalheight-panelheight))
	{
		// panelheight is incremented by totalheight.
		panelheight=panelheight+parseInt(totalheight);
		// the display attribute of the div containing items collection is set to as block.
		document.getElementById(temp).style.display='block';
		// the height of the div containing items collection is set to as panelheight.
		document.getElementById(temp).style.height=panelheight;
		setTimeout("ShowPanel('"+temp+"','"+totalheight+"')", hidespeed);
	}
}

// CollapseExpand function takes temp and total height as input parameters. temp is the id of the 
// div containing items collection and totalheight is it's height. This function checks,
// wether the div is in visible or invisible mode and accordingly calls ExpandPanel or CollapsePanel function.
function CollapseExpand(temp, totalheight, behavior, mode, controlid, imageid, expandimageurl, collapseimageurl)
{
	var tempimgurl;
	// if mode is ExpandAll
	if(mode=="ExpandAll")
	{
		// If the div containing items collection does not exist or if totalheight is equal to zero.
		if(temp=="" || totalheight==0)
		{
		}
		else
		{
			// It is checked if the behaviour is property is equal to Animated.
			if(behavior=="Animated")
			{
				// If the div containing items collection is in invisible mode then ExpandPanel function is called.
				if(document.getElementById(temp).style.display=='none')
				{
					ExpandPanel(temp, totalheight);
					document.getElementById(imageid).setAttribute("src", collapseimageurl);
				}
				// If the div containing items collection is in visible mode then CollapsePanel function is called.
				else
				{
					CollapsePanel(temp, totalheight);
					document.getElementById(imageid).setAttribute("src", expandimageurl);
				}
			}
			// It is checked if the behaviour is equal to NonAnimated.
			else if(behavior=="NonAnimated")
			{
				// If the div containing items collection is in invisible mode, then ShowPanel function is called.
				if(document.getElementById(temp).style.display=='none')
				{
					ShowPanel(temp, totalheight);
					document.getElementById(imageid).setAttribute("src", collapseimageurl);
				}
				// If the div containing items collection is in visible mode, then HidePanel function is called.
				else
				{
					HidePanel(temp, totalheight);
					document.getElementById(imageid).setAttribute("src", expandimageurl);
				}
			}
		}
	}
	// else if the mode is ExpandOne
	else
	{
		// idlength is the length of the control Id.
		var idlength=controlid.length;
		// loop is used to get all the divs by using getElementsByTagName.
		for(iloop=0;iloop<document.getElementsByTagName("div").length;iloop++)
		{
			// eachid holds the id of every div while in the loop.
			var eachid=document.getElementsByTagName("div")[iloop].id;
			// It's checked if substring of eachid upto idlength is equal to controlid.
			if(eachid.substr(0,idlength)==controlid)
			{
				// It's checked if behavior is NonAnimated
				if(behavior=="NonAnimated")
				{
					if(eachid==temp)
					{
						// If the div containing items collection is in invisible mode, then ShowPanel function is called.
						if(document.getElementById(eachid).style.display=='none')
						{
							ShowPanel(eachid, totalheight);
						//	document.getElementById(imageid).src=collapseimageurl;
						}
						// If the div containing items collection is in visible mode, then HidePanel function is called.
						else
						{
							HidePanel(eachid, totalheight);
						//	document.getElementById(imageid).src=expandimageurl;
						}
					}
					// if the id does not matches temp, then HidePanel function is called.
					else
					{
						HidePanel(eachid, totalheight);
						//document.getElementById(imageid).src=expandimageurl;
					}
				}
				// else if behavior is Animated
				else if(behavior="Animated")
				{
					if(eachid==temp)
					{
						// If the div containing items collection is in invisible mode then ExpandPanel function is called.
						if(document.getElementById(eachid).style.display=='none')
						{
							ExpandPanel(eachid, totalheight);
						//	document.getElementById(imageid).src=collapseimageurl;
						}
						// If the div containing items collection is in visible mode then CollapsePanel function is called.
						else
						{
							CollapsePanel(eachid, totalheight);
						//	document.getElementById(imageid).src=expandimageurl;
						}
					}
					// if the id does not matches temp, then CollapsePanel function is called.
					else
					{
						CollapsePanel(eachid, totalheight);
						//document.getElementById(imageid).src=expandimageurl;
					}
				}
			}
		}
		// loop is used to get all the image elements by using getElementsByTagName
		for(iloop=0;iloop<document.getElementsByTagName("img").length;iloop++)
		{
			// eachimgid is used to store the ids of the image elements.
			var eachimgid=document.getElementsByTagName("img")[iloop].id;
			// It's checked if the id of the image consists of the control id within it
			if(eachimgid.substr(3,idlength)==controlid)
			{
				// It's checked if any of the id is equal to id of image which is clicked.
				if(eachimgid==imageid)
				{
					// tempimageurl is used to store the path of the image.
					var tempimageurl=document.getElementById(eachimgid).getAttribute("src");
					// tempimagelength is used to hold the length of the complete image path in tempimageurl.
					var tempimagelength=tempimageurl.length;
					var iString=tempimageurl.split('/');
					var expString=expandimageurl.split('/');
					var colString=collapseimageurl.split('/');
					if(iString[iString.length-1]==colString[colString.length-1])
					{
						// expandimageurl is set as image path for eachimgid.
						document.getElementById(eachimgid).setAttribute("src", expandimageurl);
					}
					else if(iString[iString.length-1]==expString[expString.length-1])
					{
						// collapseimageurl is set as image path for eachimgid.
						document.getElementById(eachimgid).setAttribute("src", collapseimageurl);
					}
				}
				// If the eachimgid is not equal to id of the image which is clicked, then expandimageurl is set as the imagepath.
				else
				{
					document.getElementById(eachimgid).setAttribute("src", expandimageurl);
				}
			}
		}
	}
}