// Prototypified as a learning tool

// How this works:
// we have <ul> <li id="tab_name">Name of tab</li> ... </ul>
// Then we have <div id="tab_name_wrapper"> ... </div> ....
// then we call TabberSelect('tab_name');
// That's it!
//  -- If you don't want to see things disappear after the page loads, you must add class="hidden" to each wrapper IE <div id="tab_name_wrapper" class="hidden">

function TabberSelect(tabid) {
	var showtab = $(tabid);
	var ulnode = showtab.up();
	
	if(! ulnode.currentTab) {
		ulnode.childElements().each(function(ele) {
			ele.observe('click',function(event) {
				TabberSelect(event.findElement('li'));
			});
			$(ele.id+"_wrapper").addClassName('hidden');
		});
	} else {
		ulnode.currentTab.removeClassName('selected');
		$(ulnode.currentTab.id + "_wrapper").removeClassName('shown').addClassName('hidden');
	}
	
	showtab.addClassName('selected');
	$( showtab.id + "_wrapper" ).removeClassName('hidden').addClassName('shown');

	ulnode.currentTab = showtab;
}