/* 1. BEGIN INITIALISATION */

//// declare global variables and set defaults
var programMode = 'JAVASCRIPT_ANIMATION';

function init() {

	//// disable animation for faulty browsers ;-)
	if ( (/msie/i.test(navigator.userAgent)) && (!/opera/i.test(navigator.userAgent)) ) {
	
		//// animation will be disabled -- note that MSIE is not given a 'Switch on animation' button
		programMode = 'OFF';
	
	} else {
		
		//// disable animation when '?mode=off' appears at the end of the URL
		if ( window.location.href.substr(window.location.href.length-9) == '?mode=off' ) {
		
			//// animation will be disabled
			programMode = 'OFF';
			
			//// add a button to enable animation
			modes.innerHTML = '<a onclick="switchOnAnimation()">Switch on animation</a>';
			
		} else {
		
			//// add a button to disable animation
			modes.innerHTML = '<a onclick="switchOffAnimation()">Switch off animation</a>';
	
		}
	}
}

/* 1. END INITIALISATION */


/* 2. BEGIN LOGO */

//// declare global variables for fading in/out the logo
var logoOpacity = 0; 

//// called once the logo-image has loaded
function fadeInLogo() {
	window.setTimeout('fadeInLogoStep()',40);
}

//// change the logo opacity one step
function fadeInLogoStep() {
	logoOpacity++; // increment our record of the width (an integer between 0 and 100)
	logo.style.opacity = logoOpacity/25; // mozilla/safari opacity
	logo.style.filter = 'alpha(opacity='+(logoOpacity*4)+')'; // MSIE opacity
	if (logoOpacity <= 25) { window.setTimeout('fadeInLogoStep()',40); } // line up the next animation-frame, unless we have reached 100% opacity
}

//// fade-out the logo (usually called before navigating to a new page)
function fadeOutLogo() {
	window.setTimeout('fadeOutLogoStep()',32);
}

//// change the logo opacity one step
function fadeOutLogoStep() {
	logoOpacity--; logoOpacity--; // fade out twice as quickly
	logo.style.opacity = logoOpacity/25; // mozilla/safari opacity
	logo.style.filter = 'alpha(opacity='+(logoOpacity*4)+')'; // MSIE opacity
	if (logoOpacity >= 0) { window.setTimeout('fadeOutLogoStep()',32); } // line up the next animation-frame, unless we have reached 0% opacity
}

/* END LOGO */



/* 3. BEGIN MENU */

//// declare global variables for dropping in/out the menu
var menu1Top = 0; 
var menu2Top = 0;
var menu3Top = 0;
var menu4Top = 0;
var menu5Top = 0;
var menu6Top = 0;
var menuCurve = new Array('-2.5em', '-1.8em','-1.6','-1.35em','-1.05em','-0.65em','0.2em','0em','0em');

function dropInMenus() {
	
	//// start the menu drops-outs
	window.setTimeout('dropInMenu1()',1200);
	window.setTimeout('dropInMenu2()',1400);
	window.setTimeout('dropInMenu3()',1600);
	window.setTimeout('dropInMenu4()',1800);
	window.setTimeout('dropInMenu5()',2000);
	window.setTimeout('dropInMenu6()',2200);
	
}

function dropInMenu1() {
	menu1Top++; // increment our record of the menu's vertical position (an index in the 'menuCurve' array)
	menu1.style.marginTop = menuCurve[menu1Top];
	if (menu1Top <= 8) { window.setTimeout('dropInMenu1()',40); } // line up the next animation-frame, unless we have reached the final frame
}
function dropInMenu2() {
	menu2Top++;
	menu2.style.marginTop = menuCurve[menu2Top];
	if (menu2Top <= 8) { window.setTimeout('dropInMenu2()',42); }
}
function dropInMenu3() {
	menu3Top++;
	menu3.style.marginTop = menuCurve[menu3Top];
	if (menu3Top <= 8) { window.setTimeout('dropInMenu3()',45); }
}
function dropInMenu4() {
	menu4Top++;
	menu4.style.marginTop = menuCurve[menu4Top];
	if (menu4Top <= 8) { window.setTimeout('dropInMenu4()',49); }
}
function dropInMenu5() {
	menu5Top++;
	menu5.style.marginTop = menuCurve[menu5Top];
	if (menu5Top <= 8) { window.setTimeout('dropInMenu5()',52); }
}
function dropInMenu6() {
	menu6Top++;
	menu6.style.marginTop = menuCurve[menu6Top];
	if (menu6Top <= 8) {
		window.setTimeout('dropInMenu6()',58);
	}
}

function dropOutMenus() {
	
	//// start the menu drop-ins
	window.setTimeout('dropOutMenu1()',200);
	window.setTimeout('dropOutMenu2()',400);
	window.setTimeout('dropOutMenu3()',600);
	window.setTimeout('dropOutMenu4()',800);
	window.setTimeout('dropOutMenu5()',1000);
	window.setTimeout('dropOutMenu6()',1200);

}

function dropOutMenu1() {
	menu1Top--; // increment our record of the menu's vertical position (an index in the 'menuCurve' array)
	menu1.style.marginTop = menuCurve[menu1Top];
	if (menu1Top >= 0) { window.setTimeout('dropOutMenu1()',40); } // line up the next animation-frame, unless we have reached the final frame
}
function dropOutMenu2() {
	menu2Top--;
	menu2.style.marginTop = menuCurve[menu2Top];
	if (menu2Top >= 0) { window.setTimeout('dropOutMenu2()',42); }
}
function dropOutMenu3() {
	menu3Top--;
	menu3.style.marginTop = menuCurve[menu3Top];
	if (menu3Top >= 0) { window.setTimeout('dropOutMenu3()',45); }
}
function dropOutMenu4() {
	menu4Top--;
	menu4.style.marginTop = menuCurve[menu4Top];
	if (menu4Top >= 0) { window.setTimeout('dropOutMenu4()',49); }
}
function dropOutMenu5() {
	menu5Top--;
	menu5.style.marginTop = menuCurve[menu5Top];
	if (menu5Top >= 0) { window.setTimeout('dropOutMenu5()',52); }
}
function dropOutMenu6() {
	menu6Top--;
	menu6.style.marginTop = menuCurve[menu6Top];
	if (menu6Top >= 0) {
		window.setTimeout('dropOutMenu6()',58);
	} else {
		window.location.href = destinationURL;
	}
}

/* END MENU */



/* 4. BEGIN BKGND */

//// declare global variables for sliding in/out the bkgnd
var bkgndPosition = 0; 
var bkgndWidthCurve = new Array(
	 0    // +0.2 (add 0.1 each time)
	,0.2
	,0.4
	,0.6
	,0.9  // +0.3
	,1.2
	,1.5
	,1.8
	,2.2  // +0.4
	,2.6
	,3.0
	,3.4
	,3.8  // +0.5 (add 0.2 each time)
	,4.3
	,4.8
	,5.2
	,5.7  // +0.7
	,6.4
	,7.1
	,7.8
	,8.5  // +0.9 (add 0.3 each time)
	,9.4
	,10.3
	,11.2
	,12.1 // +1.2
	,13.3
	,14.5
	,15.7
	,16.9 // +1.5 (add 0.5 each time)
	,19.4
	,20.9
	,22.4
	,23.9 // +2.0 (subtract 0.5 each time)
	,25.9
	,27.9
	,29.9
	,31.9 // +1.5
	,33.4
	,34.9
	,36.4
	,37.9 // +1
	,38.9
	,39.9
	,40.9
	,41.9 // +0.5 (subtract 0.3 each time)
	,42.4
	,42.9
	,43.4
	,43.9 // +0.2 (subtract 0.1 each time)
	,44.1
	,44.3
	,44.4
	,44.6 // +0.1
	,44.8
	,44.9
	,45.0
	,45.0 // in case of overshoots :-)
);
var bkgndColourCurve = new Array(
	 255
	,238
	,220
	,202
	,184
	,166
	,153
	,138
	,125
	,112
	,102
	,92
	,82
	,72
	,65
	,58
	,51
	,44
	,39
	,34
	,29
	,24
	,21
	,18
	,15
	,12
	,10
	,8
	,6
	,4
	,3
	,2
	,1
	,0
);

//// container for the shade-function, which calculates various hues of BackgroundColour-string -- functionality will be assigned in the first 'switch' conditional, below
var makeShade = function() { };

//// container for the slideIn-function and slideOut-function, which animate the background by altering cell-widths and calling 'makeShade()' -- functionality will be assigned in the second 'switch' conditional, below
var slideInBkgndStep = function() { };
var slideOutBkgndStep = function() { };

//// start the forward bkgnd-slide-out animation
function slideInBkgnd(slideStyle, slideColour) {

	//// set the slide-colour ('RED', 'PURPLE', etc) -- this will be set permanently for the page
	switch (slideColour) {
		case 'RED':
			makeShade = function(shadeValue) { return 'rgb(255,'+shadeValue+','+shadeValue+')'; };
			break;
		case 'GREEN':
			makeShade = function(shadeValue) { return 'rgb('+shadeValue+',255,'+shadeValue+')'; };
			break;
		case 'BLUE':
			makeShade = function(shadeValue) { return 'rgb('+shadeValue+','+shadeValue+',255)'; };
			break;
		case 'YELLOW':
			makeShade = function(shadeValue) { return 'rgb(255,255,'+shadeValue+')'; };
			break;
		case 'MAGENTA':
			makeShade = function(shadeValue) { return 'rgb(255,'+shadeValue+',255)'; };
			break;
		case 'CYAN':
			makeShade = function(shadeValue) { return 'rgb('+shadeValue+',255,255)'; };
			break;
		case 'WHITE':
			makeShade = function(shadeValue) { return 'rgb(255,255,255)'; }; // used when page background is black
			break;
		case 'BLACK':
			makeShade = function(shadeValue) { return 'rgb('+shadeValue+','+shadeValue+','+shadeValue+')'; };
			break;
		case 'DARK_GREY':
			makeShade = function(shadeValue) { shadeValue = Math.floor(shadeValue*0.75)+64; return 'rgb('+shadeValue+','+shadeValue+','+shadeValue+')'; };
			break;
		case 'GREY':
			makeShade = function(shadeValue) { shadeValue = Math.floor(shadeValue/3)+170; return 'rgb('+shadeValue+','+shadeValue+','+shadeValue+')'; };
			break;
		case 'LIME':
			makeShade = function(shadeValue) { return 'rgb('+(Math.floor(shadeValue/3)+170)+',255,'+shadeValue+')'; };
			break;
		case 'PURPLE':
			makeShade = function(shadeValue) { return 'rgb('+(Math.floor(shadeValue/3)+170)+','+shadeValue+',255)'; };
			break;
		case 'ORANGE':
			makeShade = function(shadeValue) { return 'rgb(255,'+(Math.floor(shadeValue/3)+170)+','+shadeValue+')'; };
			break;
		default: /* default to 'BLUE' */
			makeShade = function(shadeValue) { return 'rgb('+shadeValue+','+shadeValue+',255)'; };
	}

	//// set the slide-style ('MIDDLE', 'EDGE', etc) -- this will be set permanently for the page
	switch (slideStyle) {
		case 'MIDDLE':
			slideInBkgndStep = slideInBkgndMiddle;
			slideOutBkgndStep = slideOutBkgndMiddle;
			break;
		case 'CENTER':
			slideInBkgndStep = slideInBkgndCenter;
			slideOutBkgndStep = slideOutBkgndCenter;
			break;
		case 'EDGE':
			slideInBkgndStep = slideInBkgndEdge;
			slideOutBkgndStep = slideOutBkgndEdge;
			break;
		default:
			slideInBkgndStep = slideInBkgndMiddle;
			slideOutBkgndStep = slideOutBkgndMiddle;
	}

	//// start the bkgnd-slide-in animation, after a delay
	setTimeout('slideInBkgndStep()',1000);

}

//// start the bkgnd-slide-out animation
function slideOutBkgnd() {
	setTimeout('slideOutBkgndStep()',100);
}

//// move 'MIDDLE' animation forward one step
function slideInBkgndMiddle() {
	bkgndPosition++; bkgndPosition++; // increment our record of the bkgnd's animation position (an index in the 'bkgndWidthCurve' and 'bkgndColourCurve' arrays)
	tl.style.width = (bkgndWidthCurve[bkgndPosition]/2)+'%';
	tr.style.width = (bkgndWidthCurve[bkgndPosition]/2)+'%';
	tlm.style.height = (bkgndWidthCurve[bkgndPosition])+'%';
	blm.style.height = (bkgndWidthCurve[bkgndPosition])+'%';
	colourString = makeShade(bkgndColourCurve[bkgndPosition/2]);
	tl.style.backgroundColor = colourString;
	tr.style.backgroundColor = colourString;
	bl.style.backgroundColor = colourString;
	br.style.backgroundColor = colourString;
	if (bkgndPosition <= 55) {
		setTimeout('slideInBkgndStep()',60); // line up the next animation-frame, unless we have reached the final frame
	} else {
		showAllTextboxes();
	}

}

//// move 'MIDDLE' animation backward one step
function slideOutBkgndMiddle() {
	bkgndPosition = bkgndPosition - 4; // slide out of the animation faster than we slided in
	tl.style.width = (bkgndWidthCurve[bkgndPosition]/2)+'%';
	tr.style.width = (bkgndWidthCurve[bkgndPosition]/2)+'%';
	colourString = makeShade(bkgndColourCurve[bkgndPosition/2]);
	tl.style.backgroundColor = colourString;
	tr.style.backgroundColor = colourString;
	bl.style.backgroundColor = colourString;
	br.style.backgroundColor = colourString;
	if (bkgndPosition > 0) {
		setTimeout('slideOutBkgndStep()',35); // line up the next animation-frame, unless we have reached the final frame
	} 
}

//// move 'CENTER' animation forward one step
function slideInBkgndCenter() {
	bkgndPosition++; bkgndPosition++; // increment our record of the bkgnd's animation position (an index in the 'bkgndWidthCurve' and 'bkgndColourCurve' arrays)
	tl.style.width = (bkgndWidthCurve[bkgndPosition]/4)+'%';
	tr.style.width = (bkgndWidthCurve[bkgndPosition]/4)+'%';
	tlm.style.height = (bkgndWidthCurve[bkgndPosition]/2)+'%';
	blm.style.height = (bkgndWidthCurve[bkgndPosition]/2)+'%';
	colourString = makeShade(bkgndColourCurve[bkgndPosition/2]);
	tl.style.backgroundColor = colourString;
	tr.style.backgroundColor = colourString;
	bl.style.backgroundColor = colourString;
	br.style.backgroundColor = colourString;
	colourString = makeShade(bkgndColourCurve[Math.floor(bkgndPosition/6)]);
	tlm.style.backgroundColor = colourString;
	trm.style.backgroundColor = colourString;
	blm.style.backgroundColor = colourString;
	brm.style.backgroundColor = colourString;
	if (bkgndPosition <= 55) {
		setTimeout('slideInBkgndStep()',60); // line up the next animation-frame, unless we have reached the final frame
	} else {
		showAllTextboxes();
	}

}

//// move 'CENTER' animation backward one step
function slideOutBkgndCenter() {
	bkgndPosition = bkgndPosition - 4; // slide out of the animation faster than we slided in
	tl.style.width = (bkgndWidthCurve[bkgndPosition]/4)+'%';
	tr.style.width = (bkgndWidthCurve[bkgndPosition]/4)+'%';
	colourString = makeShade(bkgndColourCurve[bkgndPosition/2]);
	tl.style.backgroundColor = colourString;
	tr.style.backgroundColor = colourString;
	bl.style.backgroundColor = colourString;
	br.style.backgroundColor = colourString;
	colourString = makeShade(bkgndColourCurve[Math.floor(bkgndPosition/6)]);
	tlm.style.backgroundColor = colourString;
	trm.style.backgroundColor = colourString;
	blm.style.backgroundColor = colourString;
	brm.style.backgroundColor = colourString;
	if (bkgndPosition > 0) {
		setTimeout('slideOutBkgndStep()',35); // line up the next animation-frame, unless we have reached the final frame
	} 
}

//// move 'EDGE' animation forward one step
function slideInBkgndEdge() {
	bkgndPosition++; bkgndPosition++; // increment our record of the bkgnd's animation position (an index in the 'bkgndWidthCurve' and 'bkgndColourCurve' arrays)
	tlm.style.height = (bkgndWidthCurve[bkgndPosition])+'%';
	blm.style.height = (bkgndWidthCurve[bkgndPosition])+'%'; 
	colourString = makeShade(bkgndColourCurve[bkgndPosition/2]);
	tlm.style.backgroundColor = colourString;
	trm.style.backgroundColor = colourString;
	blm.style.backgroundColor = colourString;
	brm.style.backgroundColor = colourString;
	if (bkgndPosition <= 55) {
		setTimeout('slideInBkgndStep()',60);
	} else {
		showAllTextboxes();
	}

}

//// move 'EDGE' animation backward one step
function slideOutBkgndEdge() {
	bkgndPosition = bkgndPosition - 4; // slide out of the animation faster than we slided in
	tlm.style.height = (bkgndWidthCurve[bkgndPosition])+'%';
	blm.style.height = (bkgndWidthCurve[bkgndPosition])+'%'; 
	colourString = makeShade(bkgndColourCurve[bkgndPosition/2]);
	tlm.style.backgroundColor = colourString;
	trm.style.backgroundColor = colourString;
	blm.style.backgroundColor = colourString;
	brm.style.backgroundColor = colourString;
	if (bkgndPosition >= 0) {
		setTimeout('slideOutBkgndStep()',35);
	}
}

/* END BKGND */



/* 5. BEGIN TEXTBOX */

var textboxCHeight = 0;
var textboxRHeight = 0;
var textboxLHeight = 0;

function showAllTextboxes() {
	try {
		if (textboxC) {
			textboxCHeight = 1;
			revealTextboxC();
		}
	} catch(e) { }
	try {
		if (textboxR) {
			textboxRHeight = 1;
			revealTextboxR();
		}
	} catch(e) { }
	try {
		if (textboxL) {
			textboxLHeight = 1;
			revealTextboxL();
		}
	} catch(e) { }
}

function revealTextboxC() {
	textboxCHeight = textboxCHeight*1.33;
	if (textboxCHeight > 65) {
		textboxCHeightString = 'auto';
	} else {
		setTimeout('revealTextboxC()',35);
		textboxCHeightString = textboxCHeight+'%';
	}
	textboxC.style.height = textboxCHeightString;
}

function revealTextboxR() {
	textboxRHeight = textboxRHeight*1.33;
	if (textboxRHeight > 25) {
		textboxRHeightString = 'auto';
	} else {
		setTimeout('revealTextboxR()',35);
		textboxRHeightString = textboxRHeight+'%';
	}
	textboxR.style.height = textboxRHeightString;
}

function revealTextboxL() {
	TextboxLHeight = TextboxLHeight*1.33;
	if (TextboxLHeight > 25) {
		TextboxLHeightString = 'auto';
	} else {
		setTimeout('revealTextboxL()',35);
		TextboxLHeightString = TextboxLHeight+'%';
	}
	TextboxL.style.height = TextboxLHeightString;
}

function hideAllTextboxes() {
	try { textboxR.style.height = '0%'; } catch(e) { } // make the text-box disappear, if it exists on this page
	try { textboxL.style.height = '0%'; } catch(e) { }
	try { textboxC.style.height = '0%'; } catch(e) { }
}

/* END TEXTBOX */



/* 6. BEGIN MOUSE HANDLERS */

//// define global variables for mouse-handlers
var destinationURL = ''; // this will be set to teh URL of a clicked-link, and navigated to after the final Menu item has slid out of view

////
function clickHandler(linkRef) {

	if (programMode == 'JAVASCRIPT_ANIMATION') {
		destinationURL = linkRef.href;
		fadeOutLogo();
		dropOutMenus();
		slideOutBkgnd();
		hideAllTextboxes();
	} else {
		if ( (/msie/i.test(navigator.userAgent)) && (!/opera/i.test(navigator.userAgent)) ) {
			window.location.href = linkRef.href;
		} else {
			window.location.href = linkRef.href+'?mode=off';
		}
	}
}

////
function switchOffAnimation() {
	programMode = 'OFF';
	modes.innerHTML = '<a onclick="switchOnAnimation()">Switch on animation</a>';
}

////
function switchOnAnimation() {
	programMode = 'JAVASCRIPT_ANIMATION';
	modes.innerHTML = '<a onclick="switchOffAnimation()">Switch off animation</a>';
}

/* END MOUSE HANDLERS */