var rowTrack;
var tblTrack;
function showInfoRow(tblID,rowIndex,infoIndex) {
//alert(infoIndex);
/*
params: the table element
rowIndex: the position in the table to write or delete
infoIndex: the position in the infoArray for this related content
tblId: 

*/
var imgID;
var tdID;

// lets see if the user is clicking a row from a different table
if(tblTrack != tblID && tblTrack!=null){
	imgID = tblTrack + "IMG" + rowTrack;
	tdID = tblTrack + "TD" + rowTrack;
	document.getElementById(tdID).style.fontWeight = "normal";
	document.images[imgID].src = "/compare/img_info.gif";
	document.getElementById(tblTrack).deleteRow(rowTrack);
}else{

// determines if user is clicking a different info icon than the one for the row already expanded - is do, delete the old info row and set all the parent row's styles back to default
	
	if(rowTrack != rowIndex && rowTrack!=null){
		imgID = tblID + "IMG" + rowTrack;
		tdID = tblID + "TD" + rowTrack;
		document.getElementById(tdID).style.fontWeight = "normal";
		document.images[imgID].src = "/compare/img_info.gif";
		document.getElementById(tblID).deleteRow(rowTrack);
	}
}
// determines if user is clicking the expanded rows info icon again to close the row - if so, delete the row and set the parent row's styles to default and exit the function
if(tblTrack == tblID && rowTrack == rowIndex){
	imgID = tblID + "IMG" + rowTrack;
	tdID = tblID + "TD" + rowTrack;
	document.getElementById(tdID).style.fontWeight = "normal";
	document.images[imgID].src = "/compare/img_info.gif";
	document.getElementById(tblID).deleteRow(rowIndex);
	rowTrack = null;
	tblTrack = null;
	return;

}	

// the position in the array for the expanded info row content
var info = infoArray[infoIndex];

// insert row based on the desired index, insert the actual cell, set some style rules for the info row
var x=document.getElementById(tblID).insertRow(rowIndex);
var y=x.insertCell(0)
y.width="598";
y.colSpan="4";
y.cellPadding="5";
y.className="infoRow";
y.innerHTML=info;
//y.innerText=info;

// turn info row's parent row's font to bold
tdID = tblID + "TD" + rowIndex;
document.getElementById(tdID).style.fontWeight = "bold";

// turn info row's parent row's info icon to on
imgID = tblID + "IMG" + rowIndex;
document.images[imgID].src = "/compare/img_info_on.gif";

//set the rowTrack and tblTrack vars to the currently expanded info row's index
rowTrack = rowIndex;
tblTrack = tblID;
}