preload_image_object = new Image();
var theImages = new Array();
theImages[0] = 'url(images/diagram.gif)';
theImages[1] = 'url(images/diagram_sarah.gif)';
theImages[2] = 'url(images/diagram_mark.gif)';
theImages[3] = 'url(images/diagram_zoe.gif)';
theImages[4] = 'url(images/diagram_jeremy.gif)';

var i = 1;
for(i=1; i<=4; i++) 
preload_image_object.src = theImages[i];

var thePeople = new Array();
thePeople[0] = 'none';
thePeople[1] = 'sarah';
thePeople[2] = 'mark';
thePeople[3] = 'zoe';
thePeople[4] = 'jeremy';

var theImages2 = new Array();
theImages2[0] = 'url(images/diagram.gif)';
theImages2[1] = 'url(images/sarah.jpg)';
theImages2[2] = 'url(images/mark.jpg)';
theImages2[3] = 'url(images/zoe.jpg)';
theImages2[4] = 'url(images/jeremy.jpg)';

function colourDiagram(diagramId) {
	newImage = theImages[diagramId];
	newImage2 = theImages2[diagramId];
	document.getElementById('diagram').style.backgroundImage = newImage;
	document.getElementById(thePeople[diagramId]).style.backgroundImage = newImage2;
	document.getElementById(thePeople[diagramId]).setAttribute("class", "moveface");
}

function resetDiagram(diagramId) {
	newImage = theImages[0];
	document.getElementById('diagram').style.backgroundImage = newImage;
	document.getElementById(thePeople[diagramId]).setAttribute("class", thePeople[diagramId]);
}