function toggleMain(e) {
    // toggling function - using the href attribute of the source of the event and switch class from "none" to "selected"
    var myEvent = new Event(e);
    var myTarget = myEvent.target;
    var divToShow = $(myTarget.href.split("#")[1]);
    // get the closest parent 'div' tag
    var elemParent = myTarget.getParent();
    while(elemParent.getTag() != 'ul') {
    	elemParent = $(elemParent).getParent();
    }
    if(divToShow.getStyle('display')=='none') {
    	// hide every divs
    	var everyDivs = $$(elemParent.getElementsByTagName('a')).getProperty('href'); // #nameoftheid
    	$each(everyDivs, function(singleDiv){
       		divToHide = singleDiv.split('#')[1];
       		$(divToHide).setStyle('display', 'none');
    	});
    	// remove class to the links
    	$each($(elemParent).getElementsByTagName('a'), function(singleLink) {
    		singleLink.removeClass('selected');
	});
    	//show a single div and add 'selected' class to the clicked link
    	divToShow.setStyle('display', 'block');
    	myTarget.addClass('selected');
    }    
    myEvent.stop();
}

function initFooter() {
	//vars
	var navLinks = $$('#bottomnav a');
	var navNames = ["cnettv","networks"];
	// add behaviour
	$each(navLinks, function(myNavLink) {myNavLink.addEvent('click', toggleMain);});
	// hide panes
	$each(navNames, function(myNav){ $(myNav).setStyle('display','none')});
	// display default
	$('cnettv').setStyle('display', 'block');
}

window.addEvent('load', initFooter);