function dynAddRow(tableID, rowCounterID){
	//get the number of rows
	var rowCounter=document.getElementById(rowCounterID);
	var rowNum=parseInt(rowCounter.value);
	//create a row
	var rowNode=document.createElement("tr");
	
	if(navigator.appName != "Microsoft Internet Explorer"){
		rowNode.className="bglight";
		rowNode.id=tableID+"row"+rowNum;
		//put the row in the table
		var table=document.getElementById(tableID);
		//var body=document.getElementById("bodyid");
		table.appendChild(rowNode);
		//now make the inner HTML
		var rowHTML=myCreateRow(rowNum, tableID);
		//put the row in the row node
		rowNode.innerHTML=rowHTML;
	}
	else{													//Only do this stuff if we are in IE
		if(!document.getElementById(tableID+"body")){
			var body=document.createElement("tbody");
			body.id = tableID+"body";
		}
		else{
			var body =document.getElementById(tableID+"body");
		}
		var dataNode=document.createElement("td");
		rowNode.className="bglight";
		rowNode.id=tableID+"row"+rowNum;
		//put the row in the table
		var table=document.getElementById(tableID);
		//var body=document.getElementById("bodyid");
		table.appendChild(body);
		body.appendChild(rowNode);
		rowNode.appendChild(dataNode);
		//now make the inner HTML
		var rowHTML=myCreateRow(rowNum, tableID);
		//put the row in the row node
		dataNode.innerHTML=rowHTML;
	}
	
	//update the count
	rowCounter.value=rowNum+1;
	return false;
}

function dynRemoveRow(tableID,rowNum){
	tableID=tableID.id; //I don't know why this needs to happen, I never pass in a table object...
	//hide the row
	var rowID=tableID+"row"+rowNum;
	var IDprefix=tableID+"row"+rowNum+":";
	formItem=document.getElementById(IDprefix+"-action");
	//if the action is add, just remove it
	if(formItem.value=="add"){
		if(navigator.appName == "Microsoft Internet Explorer"){
			thisTable=document.getElementById(tableID+"body");
		}
		else{
			thisTable=document.getElementById(tableID);
		}
		deleteThisRow=document.getElementById(rowID);
		thisTable.removeChild(deleteThisRow);
	}
	//if the action is edit, mark it deleted
	if(formItem.value=="edit"){
		formItem.value="remove";
		document.getElementById(rowID).style.display="none";

	}
	return false;

}

function dynLoadRecords(records, tableID, rowCounterID){
	var rowCounter=document.getElementById(rowCounterID);
	var REstrip=/.+[:]{2}(\w+)/
	for (row in records){
		//get the current row count
		var rowNum=parseInt(rowCounter.value);
		var IDprefix=tableID+"row"+rowNum+":";
		//create a row
		dynAddRow(tableID, rowCounterID);
		for(field in records[row]){
			//strip the portal prefix, if any
			 fieldname = field.replace(REstrip, "$1")
			//get the item
			formItem=document.getElementById(IDprefix+fieldname);
      if(formItem == null){
        continue;
      }
      else{
        //check the type for input type or select
        if(formItem.tagName=="INPUT"){
          formItem.value=records[row][field];
        }
        else if(formItem.tagName=="TEXTAREA"){
          formItem.innerHTML=records[row][field];
        }
        else if(formItem.tagName=="SELECT"){
          for(i=0; i< formItem.options.length; i++){
            //the JS interpreter is making me do
            // each of the enxt two lines, one at a time
            fI=formItem.options[i];
            if(fI.value==records[row][field]){
              fI.selected="selected";
            }//end if selected
          }//end for each option
        }//end if select
      }// else we have a form item
		}//end loading fields
		//set the action to edit
		formItem=document.getElementById(IDprefix+"-action");
		formItem.value="edit";
	}//end for each record
}

/*
Below is a sample of how to use these functions to quickly create a dynamic table

<div id="content">
<?
Local comments are notated by '#'

# get some records
$bio=getBiosketchByRecid($_GET['-recid']);

# if the data you want to use is from a portal, make sure to arrange the data
arrangeEdutrainData($bio);

#this function will create a javascript array of the records.
#if you echo it, it will be properly formatted. echo one to see how it looks
# it will be used below, after we set up the table
$JSRecordArray=convertRecordsToJSArray($bio['-portal'], "myRecords");
$bio=getBiosketchByRecid($_GET['-recid']);
arrangeEdutrainData($bio);
$JSRecordArray=convertRecordsToJSArray($bio['-portal'], "myRecords");
?>

<script type="text/javascript">
#right here we have the function we'll make for every page (myCreateRow)
# this is the HTML set up for whatever will go inside the <tr></tr>
# for a row.

#things to note:
#auto entering is only currently supported for <INPUT>
#XXX in the future it will also support <SELECT>

#Name is of the following format: rowNum:field_name
#name will be used on your submit pages to push data to the database.
#a simple regular expression can easily remove the #: from the front of the
#field name.

#ID needs to be a cross of the tableID and the rowID, which is essentially "row"+rowNum
#This is important for the action of loadRecords, which will fill out fields based on these unique IDs

#The remove function in the last cell below calls remove row. currently there's a bug where the tableID being
#passed is the table element itself, not just the string. There's a small fix in remove that addresses that
# but if it even can be solved it should.

#if you have more than one dynamic table on a page
# you will need to add a switch statement to myCreateRow (The name CANNOT be changed)
# so that you can have different table items based on tableID.
# switch(tableID)


function myCreateRow(rowNum, tableID){
	var html="";
	html+="<td>";
	html+="<input type='text' name='"+tableID+"row"+rowNum+":Instituion' id='"+tableID+"row"+rowNum+":Institution'><br><span class='faded'>Instituion</span><br>";
	html+="<input type='text' name='"+tableID+"row"+rowNum+":Location' id='"+tableID+"row"+rowNum+":Location'><br><span class='faded'>Location</span><br>";
	html+="<input type='text' name='"+tableID+"row"+rowNum+":Degree' id='"+tableID+"row"+rowNum+":Degree'><br><span class='faded'>Degree Awarded</span><br>";
	html+="</td>";
	html+="<td>";
	html+="<input type='text' name='"+tableID+"row"+rowNum+":Start_Date' id='"+tableID+"row"+rowNum+":Start_Date'><br><span class='faded'>Start Year</span><br>";
	html+="<input type='text' name='"+tableID+"row"+rowNum+":End_Date' id='"+tableID+"row"+rowNum+":End_Date'><br><span class='faded'>End Year</span><br>";
	html+="<input type='text' name='"+tableID+"row"+rowNum+":Study_Field' id='"+tableID+"row"+rowNum+":Study_Field'><br><span class='faded'>Field of Study</span><br>";
	html+="<input type='hidden' name='"+tableID+"row"+rowNum+":-action' id='"+tableID+"row"+rowNum+":-action' value='add'>";
	html+="<input type='hidden' name='"+tableID+"row"+rowNum+":-recid' id='"+tableID+"row"+rowNum+":Recid'>";
	html+="</td>";
	html+="<td>";
	html+="<a href='#' onclick='return dynRemoveRow("+rowNum+","+tableID+");'>Remove</a>";
	html+="</td>";
	return html;
}
</script>


<style type="text/css">
td{
	border-bottom:thin dotted #0062BD;
}
tr{
}
</style>

<h2>Biographical Sketch for <?echo $bio['People 2::cFirst_Last']?></h2>

<h4>
	Please list all Education and Training you have received below. You may add 
	additional rows as necessary.  If you click to remove a row, it will not
	be removed until you commit your changes by clicking "Edit" below.
</h4>

<form 
	id='edutrain'
	name='edutrain'
	method='post'
	action='edit-submit.php'
#//onsubmit="" This is where form validation functions should go if it exists
	>
	<input type="hidden" name="numRows" id="numRowsTable1" value="0">
	#so now we need to make our dynamic table. We can make more than 1 per page
	# as long as we give them all different IDs
	<table id="table1">
		#we should put the script inside the table so we know where it goes.
		<script type="text/javascript">
		#remember that array of all there records? this is where it goes
		<?echo $JSRecordArray;?>
		#so then we can pass it to the loadRecords function with the table we want to load
		# it in to and the rowVariable and our records will be filled out
		# as long as our field ID's in myCreateRow match the field names.
		# load record automagically strips out Table_Occurance::Field_Name to Field_Name
		# so make sure the field names match and that you're not trying to display 
		# Cinfo::fk_Person_ID and Affiliation::fk_Person_ID in the same table. They'll
		# over write one another
		if(myRecords.length){//if we have records
			dynLoadRecords(myRecords, "table1", 'numRowsTable1');
			alert(myRecords.length);
		}
		else{//if there are no records, put up a blank row.
			dynAddRow('table1', 'numRowsTable1');
		}
		</script>
	</table>
	#this item below is going to be our addRow button. Notice that the parameters
	# are the string literals of the table ID and the numRows variable ID
	<a href="#" onclick="return dynAddRow('table1', 'numRowsTable1');">Add</a> |
	<a href="#" onclick="return submitForm('edutrain')">Submit</a>
	#you can add anything else you want in the form.

</form>

*/