function showService(listElement, serviceID) {

	// implement background hover for IE6
	if (navigator.appVersion.indexOf("MSIE 6") != -1) { // only for MSIE 6, as it only recognises the hover state on a
		// listElement.className = (serviceID != null) ? "serviceBulletHover" : "";
		if (serviceID != null) {
			listElement.children[0].className = "serviceBulletHover"; // apply the bg color change only to the div
			listElement.style.backgroundImage = "url(../images/servicebullet_grey.gif)";
		} else {
			listElement.children[0].className = "";
			listElement.style.backgroundImage = "";
		}
	}

	// first reset all the old DIVs



	var servicesList = $$('ol.serviceBullets li');
	servicesList.each(function(element) {
		i = element.id.replace('b', '');
		if (document.getElementById('service' + i).style.display == "block" && i != serviceID) {
			document.getElementById('service' + i).style.display = "none";
		}		   
	});

	
	// if the DIV exists, show it
	if (document.getElementById('service' + serviceID)) {
		document.getElementById('service' + serviceID).style.display = "block";
		document.getElementById('serviceBox').style.visibility = "visible";

		var minimumHeight = document.getElementById('measureArea').scrollHeight - 15
		if ((document.getElementById('service' + serviceID).scrollHeight) < minimumHeight) {
			document.getElementById('serviceBox').style.minHeight = minimumHeight + 'px'; // it should just cover "how does this service benefit you?"
			if (navigator.appVersion.indexOf("MSIE 6") != -1) { // only for MSIE 6, as it does not know min-height. It also need an extra 20 pixels to allow for the padding
				document.getElementById('serviceBox').style.height = minimumHeight + 'px'; // it should just cover "how does this service benefit you?"
			}
		} else {
			document.getElementById('serviceBox').style.height = 'auto';
		}

	} else { // else close the popup DIV
		document.getElementById('serviceBox').style.visibility = "hidden";
	}
}

var box = {};
var effectsArray = new Array();
effectsArray["submenu"] = false;
effectsArray["imageFade"] = false;
effectsArray["slide"] = false;
effectsArray["toolTips"] = false;
effectsArray["multiBox"] = false;
effectsArray["serviceBullets"] = false;
effectsArray["dropdown"] = false;
// no longer used: effectsArray["email"] = false;
var multiBoxArray = new Array();
window.addEvent('domready', function(){
	
	
	/*sIFT first */
	if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
		sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:levelString + "includes/javascript/sifr/myriadpro.swf", sColor:hexColour, sFlashVars:"textalign=left&offsetTop=0"}));
	};

	
	/* --- submenu onmouseover --- */
	if (effectsArray["submenu"]) {

		var list = $$('#subMenuArea li.menuItem a,#subMenuArea li.menuItemParent a');
		list.each(function(element) {
			
			var fx = new Fx.Styles(element, {duration:100, wait:false, transition: Fx.Transitions.Sine.easeOut});
			
			element.addEvent('mouseenter', function(){
				fx2.stop(); // stop the fade out if it's still running (to prevent flickering when the two are executed at the same time)
				fx.start({
					'background-color': '#e9e9e9',
					'color': '#666666'
				});
			});
			
			var fx2 = new Fx.Styles(element, {duration:500, wait:false, transition: Fx.Transitions.Sine.easeInOut});
			element.addEvent('mouseleave', function(){
				fx.stop(); // stop the fade out if it's still running (to prevent flickering when the two are executed at the same time)
				fx2.start({
					'background-color': '#ffffff',
					'color': '#000000'
				});
			});	
		});
	}
	
	/* --- the case studies slide ("view all"). See http://demos.mootools.net/Fx.Slide --- */
	if (effectsArray["slide"]) {
		if (document.getElementById('moreCaseStudies')) { // if there are more than 4 case studies 

			var caseStudiesState = null; // prevent the click event from launching when the slide's already running
			var mySlide = new Fx.Slide('moreCaseStudies', {duration: 1000}).addEvent('onComplete', function(){
				caseStudiesState = null;
				
			});
			var myFade = new Fx.Style('moreCaseStudies', 'opacity', {duration: 1000});
			var myScroll = new Fx.Scroll(window, {wait: true, duration: 1000});
		
			$$('.caseStudiesButton').each(function(el, i) { // for both buttons
				el.addEvent('click', function(e){
					if (caseStudiesState == null) {
						caseStudiesState = "running";
						

						e = new Event(e);
						
			
						if (document.getElementById('viewAll').innerHTML == 'Close') { // we're closing the box 
							document.getElementById('viewAll').innerHTML = 'View all';
							
							// stop any action going on
							mySlide.stop();
							myFade.stop();
		
							if (navigator.userAgent.indexOf("Firefox") == -1 && navigator.userAgent.indexOf("Safari") == -1){ // firefox and Safari shock too much, so just remove it;
								myFade.start(1, 0);
								mySlide.toggle();
							} else{
								myFade.set(0);
								mySlide.hide();
								caseStudiesState = null; // must set manually as there is no oncomplete event
							}
						} else { // opening the box
							document.getElementById('moreCaseStudies').style.display = 'block';
							document.getElementById('viewAll').innerHTML = 'Close';
		
							// stop any action going on
							mySlide.stop();
							myFade.stop();
							
							myFade.start(0, 1);
							mySlide.toggle();
		
							myScroll.toBottom();
		
						}
						e.stop();
					}
				});
			});
	
			myFade.set(0);
			mySlide.hide(); // hide the second lot of case studies when the page is shown
			document.getElementById('moreCaseStudies').style.visibility = 'visible'; // we start off invisible, so make visible here.
			document.getElementById('moreCaseStudies').style.display = 'none'; // so the buttons in the background layer don't trigger the tooltips in IE
	   }
	}


	/* --- case studies and statement images onmouseover -- */
	if (effectsArray["imageFade"]) {

		var csList = $$('a img'); // was: div.caseStudyImage a img,div.expertiseImage a img, #caseStudyGallery a img, div.newsImage a img, div.linkImage a img
		csList.each(function(element) {
			var myFade = new Fx.Style(element, 'opacity', {duration: 400});
			var myFade2 = new Fx.Style(element, 'opacity', {duration: 400});
			element.addEvent('mouseenter', function(e){
				e = new Event(e);
				myFade2.stop();
				myFade.start(1, 0.6);
				e.stop();
			});
			
			element.addEvent('mouseleave', function(e){
				e = new Event(e);
				myFade.stop();
				myFade2.start(0.6, 1);
				e.stop();
			});	
		});
	}
	
	
	/* the ALT pop-ups for the case studies buttons P, D and A - see http://demos.mootools.net/Tips */
	if (effectsArray["toolTips"]) {
		
		// all tooltips bar the ones on the projects page are the same, hence the default V exception approach
		var offsetX = (effectsArray["toolTips"][0]) ? effectsArray["toolTips"][0] : 12;
		var offsetY = (effectsArray["toolTips"][1]) ? effectsArray["toolTips"][1] : 16;
		var className = (effectsArray["toolTips"][2]) ? effectsArray["toolTips"][2] : "categoryToolTip";
		var opacity = (effectsArray["toolTips"][3]) ? effectsArray["toolTips"][3] : 100;

		var categoryTips = new Tips($$('img.category', 'div#projects img.project'), {
			maxTitleChars: 40,
			className: className,
			showDelay: 100,
			hideDelay: 100,
			fixed: true,
			offsets: {'x': offsetX, 'y': -offsetY}
		});

		categoryTips.addEvent('onShow', function(el) {
			// If the tooltip goes off the screen (on the right), move it back please!
			var rightMargin = window.getWidth() - (el.getSize().size.x + el.getLeft())
			if (rightMargin < 5) {
				var elMove = rightMargin - 5;
				el.style.left = el.getLeft() + elMove;
			}
		});


		/* Custom adjustments - remove the ALT tag because it will show in IE (but we need it to be XHTML compatible) */
		$$('img.category', 'div#projects table img.project').each(function(el) { 
			el.setAttribute('alt', '');
		});
		
		/* Adjustments for the projects page */
		$$('div#projects table img.project').each(function(el) {
			// set the lowsource up so we can swap to the grey onmouseover image and back
			el.setAttribute('lowsrc', el.src);
			el.addEvent('mouseenter', function() {
				this.src = (this.src.indexOf('nocasestudy') != -1) ? 'images/projectbullet_grey_nocasestudy.gif' : 'images/projectbullet_grey.gif';
			});
			el.addEvent('mouseleave', function() {
				this.src = this.lowsrc;
			});
		});
		
		$$('img.category').each(function(el) {
			// set the lowsource up so we can swap to the grey onmouseover image and back
			el.setAttribute('lowsrc', el.src);
			
			el.addEvent('mouseenter', function() {
				var myImage = this.src;
				if (myImage.indexOf('project') != -1) {myImage = '../images/category_project.gif';}
				else if (myImage.indexOf('developer') != -1) {myImage = '../images/category_developer.gif';}
				else if (myImage.indexOf('architect') != -1) {myImage = '../images/category_architect.gif';}
				this.src = myImage;
			});
			el.addEvent('mouseleave', function() {
				this.src = this.lowsrc;
			});
		});
		
	};





	/* --- Adding mouseover events to the service bullets --- */
	if (effectsArray["serviceBullets"]) {

		var counter = 1;
		var servicesList = $$('ol.serviceBullets li');
		servicesList.each(function(element) {
			var myCounter = counter; // don't insert the global "counter" in the function, but this particular number
			element.addEvent('mouseenter', function(e){
				e = new Event(e);
				if (document.getElementsByTagName('h1').length > 0) {
					document.getElementsByTagName('h1')[0].style.display = 'none';
				}
				showService(this, myCounter);
				e.stop();
			});
			
			element.addEvent('mouseleave', function(e){
				e = new Event(e);
				if (document.getElementsByTagName('h1').length > 0) {
					document.getElementsByTagName('h1')[0].style.display = 'block';
				}
				showService(this);
				e.stop();
			});	
			
			counter ++;
		});
	}
	
	/*
	if (effectsArray["email"]) {
		$$('div.email ax').each(function(el) {
			el.className = "";
			el.style.width = 'auto';

			
			if (el.getSize().scrollSize.x > 180) {
				el.style.clip = 'rect(0 160px auto 0)';
				el.parentNode.className = 'caseStudyLink email emailHover';
				el.parentNode.style.paddingRight = '7px';
				el.parentNode.innerHTML = el.parentNode.innerHTML + '<div style="float:right; font-size:1.1em; color:#000000; padding-top:1px;">&hellip;</div>';
			} else {
				el.className = "w173";
			}
	  });
	}
	*/
	
	/* news page accordion */
	if (effectsArray["accordion"]) {
		var newsItem = document.location.search;
		//newsItem = (newsItem != '') ? parseInt(newsItem.replace('?item=', '')) : 0;
		newsItem = (newsItem != '') ? -1 : 0;
		var accordion = new Accordion('div#accordion a.accordionButton', 'div#accordion div.accordionText', {
			opacity: false,
			alwaysHide: true,
			show:newsItem,
			onActive: function(buttonEl, textEl){
				buttonEl.innerHTML = 'Close';
//				buttonEl.parentNode.parentNode.getElements('.intro').style.display = 'none';
			},
 			onBackground: function(buttonEl, textEl){
				buttonEl.innerHTML = 'Read more';
//				buttonEl.parentNode.parentNode.getElement('.intro').style.display = 'block';
			}
		}, $('accordion'));
	}
	
	

	/* --- Multibox - for showing photos and other media in a nice flash-like pop-up. info: http://www.phatfusion.net/multibox/ --- */
	if (effectsArray["multiBox"]) { // NB: bugfix ** blockResizeCall ** RE 02.2008 in source file!!
		for (i = 0; i < multiBoxArray.length; i ++) {
			box = new MultiBox(multiBoxArray[i], {descClassName: 'multiBoxDesc', useOverlay: true, waitDuration: 200, showNumbers: false}); // taken out: path: '../media/', 
		}
	}
	
	/* customised select dropdown */
	if (effectsArray["dropdown"]) {
		var mySelect = new elSelect( {container : 'dropdown'} );
	};
	
	
	// set up the onmouseover state for the "return" arrows
	$$('img.returnButton').each(function(el) {
		// set the lowsource up so we can swap to the grey onmouseover image and back
		el.setAttribute('lowsrc', el.src);
		el.addEvent('mouseenter', function() {
			this.src = '../images/return_grey.gif';
		});
		el.addEvent('mouseleave', function() {
			this.src = this.lowsrc;
		});
	});
	
	showFlash();
	
});

/* scroll to the name of the selected person in the a-z directory or news item on news page */
function scrollToId(name) {
	if (document.getElementById(name)) {
		var nameScroll = new Fx.Scroll(window, {wait: true, duration: 1500, transition: Fx.Transitions.Quart.easeInOut});
		nameScroll.toElement(document.getElementById(name));

		if (document.getElementById('button' + name.replace('item', ''))) { // open the newsitem
			document.getElementById('button' + name.replace('item', '')).fireEvent('click'); 
		} else if (document.getElementById(name + '_background')) { // this used in directory.php
			document.getElementById(name + '_background').style.backgroundColor = '#f5f5f5'; 
		}
	}
}
function scrollToIdFast(name) {
	if (document.getElementById(name)) {
		if (navigator.appName == 'Opera') { // moves up instead of down...
			document.location.href = '#' + name;
		} else {
			var fastScroll = new Fx.Scroll(window, {wait: false, duration: 1000, transition: Fx.Transitions.Quart.easeInOut});
			fastScroll.toElement(document.getElementById(name));
		}
	}
}

/* anti 5P4M device */
function callClient(ext, dom, usr) {
	document.location.href = 'mailto:' + usr + '@' + dom + '.' + ext;
}

function clickCall(thisName, thisValue) {
	if (thisName == 'team') {
		document.location.href = thisValue;
	} else if (thisName == 'start') {
		document.location.href = document.location.href.replace(document.location.search, '') + '?start=' + thisValue;
	} else {
		document.location.href = 'a-z-directory.php?letter=' + thisValue;
	}
}

function replaceLostImages() {
	$$('img.imageCheck').each(function(el) {
		if (el.getSize().scrollSize.y != 100) {
			//el.src = '../images/about_us/people/nada.jpg'; // disabled RE 12.03.2008 because it doesn't work on slow computers
		}
	});
}

function showFlash() {
	if (flashMode == true && flashVersion >= 8 && (document.getElementById('flashMenuArea') || document.getElementById('flvArea')) && !blockFlash) {
		if (expertise == 'home') {
			var so = new SWFObject('media/index.swf?menuload=true', 'animation', '800px', '320px', '8', '#000000');
			var targetArea = 'flvArea';
		} else {
			var dir = (directoryLevel == 0) ? 'media/' : '../media/';
			var mediaFile = dir + 'menu.swf?page=' + expertise;

			var so = new SWFObject(mediaFile, 'menu', '245px', '330px', '8', '#000000');
			var targetArea = 'flashMenuArea';
		}
		so.addParam('wmode', 'transparent');
		so.write(targetArea);
	}
}