window.addEvent('domready', function(){	
function setupMenu(){
	currentClicked = false;
	var list = $$('#relatedNav a');

	frontBox.load(getBasePath()+list[0].get('id'));
        swapActiveMenuClass(list[0].get('id'))

	list.each(function(element) {
		element.addEvent('click', function() { swapActiveMenuClass(element.get('id')); });
		element.addEvent('click', function() { switchContent(element.get('id'));});
	});
}

function getBasePath(){
	return "/relatedWidgetOutput?";
}

function switchContent(fileNameToLoad){
	currentClicked = fileNameToLoad;
	if(frontBox.get('opacity')==1 && backBox.get('opacity')==0) switchFrontToBack(fileNameToLoad);
	if(backBox.get('opacity')==1 && frontBox.get('opacity')==0) switchBackToFront(fileNameToLoad);
}

function switchFrontToBack(fileNameToLoad){
	backBox.load(getBasePath()+fileNameToLoad);
	backBox.fade(1)
	frontBox.fade(0)
	frontBox.set('text','')
}

function switchBackToFront(fileNameToLoad){
	frontBox.load(getBasePath()+fileNameToLoad);
	frontBox.fade(1)
	backBox.fade(0)
	backBox.set('text','')
}

function swapActiveMenuClass(memuItemId){
	var menuItems = $$('#relatedNav a');
	menuItems.each(function(element) {
		element.set('class','tab');
	});
		
	$(memuItemId).set('class','tabOn');
}

 var frontBox = $('frontBox').set('opacity',1);
 var backBox = $('backBox').set('opacity',0);
 setupMenu();
});