$(document).ready(function() {
	
	//Add an input box at the beginning of the body
	$('#breadCrumb').append('<div id="filterBox" style="float:right;width:200px;"><p style="margin:0;padding:0;"><b style="font-size:1.2em;">Filter</b> - <span id="filterExplanation" style="font-size:0.9em;">What\'s this for?</span></p><input type="text" id="filterInput"/></div>');
	
	//Position tooltip function
	var positionTooltip = function(event) {
		var tPosX = event.pageX - 5;
		var tPosY = event.pageY + 20;
		$('div.selectTooltip').css({top: tPosY, left: tPosX});
	};
	
	//Show tooltip function
	var showTooltip = function(event) {
		$('div.selectTooltip').remove();
		//var $thisTitle = $(this).text();
		$('<div class="selectTooltip">Start typing a species name in the box (scientific or common name) and those species that are not relevant will become transparent.</div>').appendTo('body');
		positionTooltip(event);
	};
	
	//Hide tooltip function
	var hideTooltip = function() {
		$('div.selectTooltip').remove();
	};

	/*$('.multiSelect option').each(function() {
		$(this).hover(showTooltip, hideTooltip).mousemove(positionTooltip);
	});*/
	
	//Set the tooltip for the whats this for link
	$('#filterExplanation').hover(showTooltip, hideTooltip).mousemove(positionTooltip);
	
	//Set the funciton that will filter the tables on the keyup of the newly created input
	$('#filterInput').keyup(function() {
		//Get the value entered in the input
		var output = $(this).val();
		//Loop through all of the table cells
		$('table tr td').each(function() {
			//Store the text of this cell in a variable
			//var haystack = $(this).text();
			
			//Get the text from the scientific title
			var scientificTitle = $(this).children('.speciesTitle').children('.scientificTitle').text();
			
			//Get the text from the scientific title
			var commonName = $(this).children('.speciesTitle').children('.speciesName').text();
			
			//Combine the text to search into one variable
			var textToSearch = scientificTitle + ' ' + commonName;
			
			//Check if the cells text contains the user entered value
			var isMatch;
			
			var re = new RegExp(output,"i");

			if(textToSearch.search(re) == -1) {
				$(this).removeClass('selected');
				$(this).addClass('notSelected');
				isMatch = 'No';
			} else {
				$(this).addClass('selected');
				$(this).removeClass('notSelected');
				isMatch = 'Yes';
			}
			
		});
	});
});