window.addEvent('domready', function() {
	
	var mainContentElement = $('main_content');
	var logoContentElement = $('logo_content');
	var whatContentElement = $('what_content');
	var whoContentElement = $('who_content');
	var whenContentElement = $('when_content');
	var whereContentElement = $('where_content');
	
	var currentDisplayedElement = mainContentElement;
	
	//show initial content
	showDiv(logoContentElement);
	
	$('logo_link').addEvent('click', function(e){
		e.stop();
		showDiv(logoContentElement);
	});
	
	$('what_link').addEvent('click', function(e){
		e.stop();
		showDiv(whatContentElement);
	});
	
	$('who_link').addEvent('click', function(e){
		e.stop();
		showDiv(whoContentElement);
	});
	
	
	$('when_link').addEvent('click', function(e){
		e.stop();
		showDiv(whenContentElement);
	});
	
	
	$('where_link').addEvent('click', function(e){
		e.stop();
		showDiv(whereContentElement);
	});
	
	
	function showDiv(displayThisElement){
		
		//if it's the same div, don't do anything
		if (currentDisplayedElement.id==displayThisElement.id){return;}

		// remove prior content
		new Fx.Morph(currentDisplayedElement, {duration: 1000, transition: Fx.Transitions.Circ.easeOut}).start({'opacity':0});
		currentDisplayedElement.setStyle('display','none');
		
		//display new content
		currentDisplayedElement = displayThisElement;
		currentDisplayedElement.setStyle('display','block');
		currentDisplayedElement.setStyle('opacity',0);
		new Fx.Morph(currentDisplayedElement, {duration: 1500, transition: Fx.Transitions.Circ.easeIn}).start({'opacity':1});
	}
	
});