$(document).ready(function(){
	$(".person").click(function(){
		$('#speech_arrow').show();
		var person = this.id;
		var distance;
		$('#speech_arrow').stop();
		$('.person_text').stop();
		
		switch(person){
			case 'justin':
				distance = "4px";
			break;
			case 'ann':
				distance = "38px"
			break;
			case 'eve':
				distance = "74px"
			break;
			case 'dean':
				distance = "112px"
			break;
			case 'dawn':
				distance = "135px"
			break;
			case 'natalie':
				distance = "162px"
			break;
			case 'ivans':
				distance = "190px"
			break;
			case 'al':
				distance = "226px"
			break;
			case 'dave':
				distance = "261px"
			break;
			case 'jim':
				distance = "299px"
			break;
			case 'davev':
				distance = "328px"
			break;
			case 'grace':
				distance = "367px"
			break;
			case 'glen':
				distance = "408px"
			break;
			case 'rach':
				distance = "447px"
			break;
			case 'royston':
				distance = "486px"
			break;
			case 'mark':
				distance = "524px"
			break;
			case 'wes':
				distance = "553px"
			break;
			case 'nick':
				distance = "602px"
			break;
			case 'jayne':
				distance = "634px"
			break;
			case 'daveh':
				distance = "667px"
			break;
			case 'jon':
				distance = "706px"
			break;
			case 'naomi':
				distance = "752px"
			break;
			case 'mag':
				distance = "791px"
			break;
			case 'rich':
				distance = "822px"
			break;
		}
		$('#speech_arrow').animate({ 
            marginLeft:distance
        },1000);

		// now need to hide others and show the specific one.
		$('.person_text:visible').fadeOut("slow", function(){
			$('#'+person+'_text').fadeIn("slow");
		});
		
	
		
	});
});