$(document).ready(function(){

	/*
	
		Profiles are consecutive div blocks with the id's #profile[N]
		
		( In this document all profiles have all been prewritten into the HTML, css hides all the
		  profiles apart from profile0. Alternatively profiles could be loaded later with ajax? )
		
		The ul list below the profiles must be in the same order.
		
		If javascript is not enabled profile0 will always be on show.
	
	*/

	for (i = 0; i < $('#team-list span').length; i++) {
		/* loop the list and give each li a title attribute of 'profile[N]' */
		$('#team-list').children('span:eq('+i+')').attr('title', 'profile'+i);
		/* on mouseover of each li call the showProfile function using the title attribute */
		$('#team-list').children('span:eq('+i+')').mouseover( function() { showProfile($(this).attr('title')); } );
	}
	var apid = 'profile0';
	/* swap the profile showing with the new profile (if different) */
	function showProfile(pid) {
		if (apid == pid) return;
		$('#'+pid).show();
		$('#'+apid).hide();
		apid = pid;
	}


	/*
		
		Show the characters 'Search...' when the searchbox is empty, helpful for useability
		without needing a permanent label.
	
	*/
	if ($("#criteria").val() == '') {
		$("#criteria").val('Search...');
	}
	$("#criteria").focus(function() {
		$(this).addClass("cursor-focus");
		if (this.value == 'Search...') {

			this.value = '';
		}
	});
	$("#criteria").blur(function() {
		$(this).removeClass("cursor-focus");
		if (this.value == '') {
			this.value = 'Search...';
		}
	});
});