if(document.getElementById 
   && document.getElementsByTagName)
{
	Event.observe(window, 'load', init, false);
}

function init()
{
	setupPersonToggle();
}

function setupPersonToggle()
{
	var people = document.getElementsByClassName('members')[0].getElementsByTagName('tbody')[0].getElementsByTagName('tr');

	for (var i = 0; i < people.length; i++)
	{
		// IE does not support this...
		//students[i].addClassName('closed');
		Element.addClassName(people[i], 'closed');
		
		// Add the toggleStudent event to the lin
		var link = people[i].getElementsByClassName('toggler')[0];
		Event.observe(link, 'click', togglePerson, false);
		
		// Create the div to drop content into
		var myDiv = document.createElement('div');
		// IE does not support this...
		//myDiv.addClassName('info');
		Element.addClassName(myDiv, 'info');
		people[i].getElementsByTagName('td')[1].appendChild(myDiv);
	}
}

function togglePerson(e)
{
	var link = Event.element(e);
	var person = link.parentNode.parentNode;

	var cells = person.getElementsByTagName('td');
	
	if (person.hasClassName('open'))
	{
		cells[2].removeAttribute('style');
   		cells[1].removeAttribute('colSpan');
   		cells[1].getElementsByClassName('info')[0].style.display = 'none';
   		
   		person.removeClassName('open');
		person.addClassName('closed');
	}
	else // Person is hidden, show them
	{
		// Load the person if this is the first view
		if (!person.hasClassName('loaded'))
		{
			loadPerson(person);
		}
		else
		{
		   	cells[2].style.display = 'none';
   			cells[1].colSpan = '2';
   			cells[1].getElementsByClassName('info')[0].style.display = 'block';
   			
   			person.removeClassName('closed');
			person.addClassName('open');
		}
	}
	
	// Remove focus from the anchor that caused this event
	link.blur();
	
	Event.stop(e);
	return false;
}

/*
 *	AJAX call to server to load the student (given a studentId)
 */
function loadPerson(person)
{
	// Extract the numeric student ID from the CSS ID (i.e. Id6 -> 6)
	var idRegEx = /[0-9]+/;
	var id = idRegEx.exec(person.id);

	var url = callbackUrl + '&id=' + id;
	var displayContainer = person.getElementsByClassName('info')[0];

	var myAjax = new Ajax.Updater(
								  {success: displayContainer},
	                              url,
	                               {
	                               	method: 'get',
	                               	onComplete: function()
	                               	{
	                               	    var cells = person.getElementsByTagName('td');
	                               		cells[2].style.display = 'none';
   										cells[1].colSpan = '2';
	                               		person.addClassName('loaded');
	                               		person.removeClassName('closed');
										person.addClassName('open');
	                               	},
	                               	onException: function(r,e)
	                               	{
	                               		window.location = '?event=show-members&id=' + id;
	                               	},
	                               	onFailure: function()
	                               	{
	                               		alert('Sorry, this person could not be displayed');
	                               	}
	                               });
}