$(document).ready(function(){
	$(".person").click(function(){
		$('#speech_arrow').show();
		var person = this.id;
		var distance;
		$('#speech_arrow').stop();
		$('.person_text').stop();
		
		switch(person){
			case 'lib':
				distance = "28px";
			break;
			case 'ann':
				distance = "75px"
			break;
			case 'dean':
				distance = "136px"
			break;
			case 'dawn':
				distance = "177px"
			break;
			case 'ivans':
				distance = "216px"
			break;
			case 'al':
				distance = "275px"
			break;
			case 'dave':
				distance = "334px"
			break;
			case 'jim':
				distance = "398px"
			break;
			case 'glen':
				distance = "449px"
			break;
			case 'rach':
				distance = "518px"
			break;
			case 'jayne':
				distance = "572px"
			break;
			case 'jon':
				distance = "633px"
			break;
			case 'debby':
				distance = "680px"
			break;
			case 'mag':
				distance = "732px"
			break;
			case 'rich':
				distance = "799px"
			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");
		});
		
	
		
	});
});