$(document).ready(function() {
	
	$('#ContactEmail').focus(
		function()
		{
			if($(this).val()=='you@email.com')
			{
				$(this).val('');
			}
		}
	);
	
	$('#ContactEmail').blur(
		function()
		{
			if($(this).val()=='')
			{
				$(this).val('you@email.com');
			}
		}
	);
	
	
	$('.hover-effect').hover(
		function()
		{
			$(this).fadeTo('normal', 0.6);	
		},
		function()
		{
			$(this).fadeTo('normal', 1);	
		}
	);
	
	
	/**
	 * Fades / effects multiple items at once
	 *
	 * @note - give the item you want to add an effect to the following classes 'symp-hover' & a unique on of your chosing, starting with 'hover-UNIQUE'
	 * @note - I've set 'a' tags to change colour rather than fade	
	**/
	var classToFade;
	//$('.symp-hover').css('filter', 'alpha(opacity=60)');
	$('.symp-hover').hover(
		function()
		{
			// get all the classes of the object hovered over
			var classes = $(this).attr('class').split(' ');
			
			// for each of that objects classes
			for(var i in classes)
			{
				// find the one beginning with "hover-"
				if(classes[i].match(/^hover-/))
				{
					classToFade = classes[i]; // we need this one set here for the callback
					
					// for each object with the class
					$('.' + classes[i]).each(function(i)
					{
						// get the tag name (ie 'a', 'img', 'div')
						// and apply an effect
						if(this.tagName.toLowerCase() != 'a')
						{
							$(this).fadeTo('normal', 0.6);
						}
						else
						{
							$(this).attr('style', 'color: #fff;');	
						}
					});
				}
			}
		},
		function()
		{
			// undo the effect done above
			$('.' + classToFade).each(function(i)
			{
				if(this.tagName.toLowerCase() != 'a')
				{
					$(this).fadeTo('normal', 1);
				}
				else
				{
					$(this).attr('style', 'color: #888;');	
				}
			});
		}
	);
	

	
	
	$('.unavailable').click(
		function()
		{
			alert('This class is fully booked');
		}
	);
	
	$('.required label').append('*');
	
	$('.more').click(
		function()
		{
			$('.more').hide();
			$('#more-press-releases').slideDown(400);
			return false;
		}
	);
	
	if($('#ProductSearch').length != 0)
	{	
		$("#ProductSearch").autocomplete("/products/search/", {
			width: 260,
			selectFirst: false
		});
	}
	
	$('#ProductSearch').focus(
		function()
		{
			if($(this).val()=='by product code')
			{
				$(this).val('');
			}
		}
	);
	
	$('#ProductSearch').blur(
		function()
		{
			if($(this).val()=='')
			{
				$(this).val('by product code');
			}
		}
	);	
	
});