$(document).ready(function()
{
	autoFill('#product_search', 'FIND THE PRODUCT', '#06452f', '#06452f');
	autoFill('#safety_search', 'SAFETY DATA SHEETS', '#06452f', '#06452f');
	autoComplete('#product_search', '#product-loader', '#product-result', 'lightbox_pages/IntelSearch_Product.aspx');
	autoComplete('#safety_search', '#safety-loader', '#safety-result', 'lightbox_pages/IntelSearch_Product.aspx');
});
// FUNCTION TO AUTOFILL INPUT BOX WITH TEXT variables: the input box ID, the autofill text, color before user begins typing, color as user types
function autoFill(searchInputID, autoValue, startColor, endColor)
{
	$(searchInputID).css({ color: startColor }).attr({ value: autoValue }).focus(function()
	{
		if($(this).val() == autoValue)
		{
			$(this).val('').css({ color: endColor });
		}
	}).blur(function()
	{
		if($(this).val() == '')
		{
			$(this).css({ color: startColor }).val(autoValue);
		}
	});		
}
// FUNCTION TO SHOW AUTOCOMPLETE DROP DOWN variables: the input box ID, the ID of a loader image, the ID of a result box to fill, file that is returned and displayed inside the result box with the results (this file is passed a POST variable with the name 'search')
function autoComplete(searchInputID, searchLoaderID, resultBoxID, ajaxFile)
{
	
	$(searchInputID).keyup(function(e)
	{
		//alert((searchInputID));
		if($(searchInputID).val() == '')
		{
			$(resultBoxID).hide();
			return false;
		}
		
		$(searchLoaderID).show();
		var dataString = 'search=' + $(searchInputID).val() + '&type=' + (searchInputID);
		$.ajax(
		{
			type: 'POST',
			url: ajaxFile,
			data: dataString,
			success: function(result)
			{
				$(resultBoxID).html(result).show();
				$(searchLoaderID).hide();
			}
		});
	});
	$(document).click(function(e)
	{
		if($(resultBoxID).is(':visible'))
		{
			var offset = $(resultBoxID).offset();
			var boundaryLeftStart = offset.left;
			var boundaryLeftEnd = offset.left + $(resultBoxID).width();
			var boundaryTopStart = offset.top;
			var boundaryTopEnd = offset.top + $(resultBoxID).height();
			if(e.pageX < boundaryLeftStart || e.pageX > boundaryLeftEnd || e.pageY < boundaryTopStart || e.pageY > boundaryTopEnd)
			{
				$(resultBoxID).hide();
			}
		}
		else
		{
			if($(e.target).attr('id') == $(searchInputID).attr('id') && $(searchInputID).val() != '' && $(resultBoxID).html() != '')
			{
				$(resultBoxID).show();
			}
		}
	});
}