//wait until the entire page loads before doing anything
//if we try to add javascript behaviors to elements on the page before the page has loaded, the browser will think we have made an error
Event.observe(window, 'load', function() {
	//once the page has loaded, call a function to set up the behavior of the tabs
	setTabBehavior();
});

function setTabBehavior() {
	//get all the elements with the class="tab", and add an "onclick" event handler to each of them that deselects all the tabs and selects the clicked one
	$$('.tab').each( function(el) {
		//add an "onclick" behavior to each tab 
		Event.observe(el, 'click', function() {
			//make all the tabs appear deselected
			deselectAllTabs();
			//add the class "selected" to the tab that was clicked
			el.addClassName('selected');
			
			//make all the content elements invisible
			hideAllContent();
			//make the selected content visible
			var contentElId = el.id + "_content"; //we have coded the xhtml in such a way that the id of the selected content is the tab id plus "_content"
			$(contentElId).addClassName('selected');
		});
	});
}

function deselectAllTabs() {
	//this function removes the class name "selected" from all the tabs
	//this makes them all appear to be deselected
	$$('.tab').each( function(el) {
		el.removeClassName('selected');
	});
}

function hideAllContent() {
	//get all content elements and hide them
	$$('.content').each( function(el) {
		el.removeClassName('selected'); //hide the element
	});
}