var mainNavEffect = new Array(); 
var maskEffect = new Array(); 
var mainNavActive = null;
var maskActive = null;

function displayPage (browserName, browserVersion) {
	/* prepare main navigation */	
	prepareMainNav(browserName, browserVersion);
	/* display page elements */
	var wE = new Fx.Style($('wrapper'), 'opacity', {
		duration: 500
	}).hide();
	var mE = new Fx.Style($('mainNav'), 'opacity', {
		duration: 500
	}).hide();
	window.addEvent('load', function(){
		wE.start(0, 1);
		mE.start.pass([0, 1], mE).delay(500);
	});
}
function prepareMainNav (browserName, browserVersion) {
	// clear rollover nav when leaving the main nav area
	$('mainNav').addEvent('mouseleave', clearMainNav);
	var mainNavItems = $$('#mainNav ul')[0].childNodes;
	for (i = 0; i < mainNavItems.length; i++) {		
		// configure the squares
		if (mainNavItems[i].getElementsByTagName('div').length) {			
			// we add an id on the sublist (actualy, the square) 
			mainNavItems[i].getElementsByTagName('div')[0].id = "mainNav-"+i;
		} else {
			// we add the tag ul for those without it -> the css adds color to this square
		    var zeNode = document.createElement('div');
			zeNode.className = "square";
			// we add an id on the sublist (actualy, the square) 
			zeNode.id = "mainNav-"+i;
			if (mainNavItems[i].getElementsByTagName('a')[0].className == 'selected') zeNode.className = "selected";
		    mainNavItems[i].appendChild(zeNode);
		}
		// we create the effects and hide the the sub squares
		if (mainNavItems[i].getElementsByTagName('div')[0].className.indexOf('selected')===-1) {
			mainNavEffect['mainNav-' + i] = new Fx.Style($('mainNav-' + i), 'opacity', {
				duration: 500
			}).hide();
			// rollover changes css class when mouse enter a mainNav link
			mainNavItems[i].getElementsByTagName('a')[0].addEvent('mouseenter', mainNavItemBrotherActivate);
		}			
		// we add a click for the <li> as well
		mainNavItems[i].addEvent('click', getGlobalLink);
		// and here we provide a mask that will hide the picto (white circle
	    var zeNode = document.createElement('p');
	    zeNode.className = "mask";
		zeNode.id = 'mask-'+i;
	    mainNavItems[i].appendChild(zeNode);
		// hide the mask
		if (mainNavItems[i].getElementsByTagName('div')[0].className.indexOf('selected')===-1) {
			maskEffect['mask-' + i] = new Fx.Style($('mask-' + i), 'opacity', {
				duration: 500
			}).hide();
		}
	}
}
function mainNavItemBrotherActivate() {
	var square = this.parentNode.getElementsByTagName('div')[0];
	var mask = this.parentNode.getElementsByTagName('p')[0];
	mainNavActive = square.id;
	maskActive = mask.id;
	if ($(mainNavActive).className.indexOf('selected')===-1 && square.style.opacity<0.9) mainNavEffect[mainNavActive].start(0, 1);
	if ($(maskActive).className.indexOf('selected')===-1 && mask.style.opacity<0.9) maskEffect[maskActive].start.pass([0, 1], maskEffect[maskActive]).delay(1);
	this.parentNode.setAttribute('class', 'expanded');
	clearMainNav();	
}
function clearMainNav() {
	var mainNavItems = $('mainNav').getElementsByTagName('ul')[0].childNodes;
	for(i=0; i<mainNavItems.length; i++) {
		var mainNavId = mainNavItems[i].getElementsByTagName('div')[0].id;
		var maskId = mainNavItems[i].getElementsByTagName('p')[0].id;
		if($(mainNavId).style.opacity>0 && mainNavId!=mainNavActive) mainNavEffect[mainNavId].start.pass([1, 0], mainNavEffect[mainNavId]).delay(1);
		if($(maskId).style.opacity>0 && maskId!=maskActive) maskEffect[maskId].start.pass([1, 0], maskEffect[maskId]).delay(1);
		mainNavItems[i].setAttribute('class', '');		
	} 
	mainNavActive = null;
	maskActive = null;	
}
function getGlobalLink() {
	window.location = this.getElementsByTagName('a')[0].href;
}