$(document).ready(function() {
	
	var searchBox = document.getElementById('menu-keywordsearch-q');
	
	//Add default content and css
	$('#menu-keywordsearch-q').attr({ title: 'Search by Keyword'});
	$('#menu-keywordsearch-q').addClass('defaultTextActive');
	
	//Add onFocus event that will remove custom CSS and set the value to null
	$('#menu-keywordsearch-q').focus(function(srcc) {
		if ($(this).val() == $(this)[0].title) {
			$(this).removeClass('defaultTextActive');
			$(this).val('');
		}
	});
	
	//Add onMouseEnter event that will fade text to a darker shade
	$('.defaultTextActive').mouseenter(function() {
		$(this).animate({
			color: '#000'
		}, 1000);
	});
	
	//Add onMouseLeave event that will fade text to a lighter shade if the value is not equal to the title
	$('.defaultTextActive').mouseleave(function() {
		if (searchBox.value == searchBox.title) {
			$(this).animate({
				color: '#a1a1a1'
			}, 1000);
		}
	});
	
	//Add onBlur event that will add custom CSS and set the value to the title attribute
	$('#menu-keywordsearch-q').blur(function() {
		if ($(this).val() == '') {
			$(this).addClass('defaultTextActive');
			$(this).val($(this)[0].title);
		}
	});
	
	//By default run the onBlur event to add the custom CSS and content
	$('#menu-keywordsearch-q').blur();
	
	//Add onClick event to the search button in order to clear the default text if it is left in the textbox by the user
	$('#menu-keywordsearch-button').click(function() {
		
		
		if(searchBox.value == searchBox.title && searchBox.title != '') {
			searchBox.value = '';
		}
	});
});