// This script controls the hover-over animation on the home page

$(document).ready(function() {
	// Create variables that will help control the animation speed and the opacity of the filters
	var aspeed = 250;
	var opacity = 0.4;
	// Retrieve the URL's of the links associated with each filter, and make the filter clickable
	$(".header-filter-1").click( function() { window.location = $("div#header-image-container a#home-header-1").attr("href"); });
	$(".header-filter-2").click( function() { window.location = $("div#header-image-container a#home-header-2").attr("href"); });
	$(".header-filter-3").click( function() { window.location = $("div#header-image-container a#home-header-3").attr("href"); });
	$(".header-filter-4").click( function() { window.location = $("div#header-image-container a#home-header-4").attr("href"); });
	// Reset all filters so that they are completely transparent
	$(".header-filter-1").hide().fadeTo(100, 0).show();
	$(".header-filter-2").hide().fadeTo(100, 0).show();
	$(".header-filter-3").hide().fadeTo(100, 0).show();
	$(".header-filter-4").hide().fadeTo(100, 0).show();
	// OnHover of Image 1
	$(".header-filter-1").hover(
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, 0);
			$(".header-filter-2").stop().fadeTo(aspeed, opacity);
			$(".header-filter-3").stop().fadeTo(aspeed, opacity);
			$(".header-filter-4").stop().fadeTo(aspeed, opacity);
		},
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, 0);
			$(".header-filter-2").stop().fadeTo(aspeed, 0);
			$(".header-filter-3").stop().fadeTo(aspeed, 0);
			$(".header-filter-4").stop().fadeTo(aspeed, 0);
		}
	);
	// OnHover of Image 2
	$(".header-filter-2").hover(
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, opacity);
			$(".header-filter-2").stop().fadeTo(aspeed, 0);
			$(".header-filter-3").stop().fadeTo(aspeed, opacity);
			$(".header-filter-4").stop().fadeTo(aspeed, opacity);
		},
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, 0);
			$(".header-filter-2").stop().fadeTo(aspeed, 0);
			$(".header-filter-3").stop().fadeTo(aspeed, 0);
			$(".header-filter-4").stop().fadeTo(aspeed, 0);
		}
	);
	// OnHover of Image 3
	$(".header-filter-3").hover(
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, opacity);
			$(".header-filter-2").stop().fadeTo(aspeed, opacity);
			$(".header-filter-3").stop().fadeTo(aspeed, 0);
			$(".header-filter-4").stop().fadeTo(aspeed, opacity);
		},
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, 0);
			$(".header-filter-2").stop().fadeTo(aspeed, 0);
			$(".header-filter-3").stop().fadeTo(aspeed, 0);
			$(".header-filter-4").stop().fadeTo(aspeed, 0);
		}
	);
	// OnHover of Image 4
	$(".header-filter-4").hover(
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, opacity);
			$(".header-filter-2").stop().fadeTo(aspeed, opacity);
			$(".header-filter-3").stop().fadeTo(aspeed, opacity);
			$(".header-filter-4").stop().fadeTo(aspeed, 0);
		},
		function () {
			$(".header-filter-1").stop().fadeTo(aspeed, 0);
			$(".header-filter-2").stop().fadeTo(aspeed, 0);
			$(".header-filter-3").stop().fadeTo(aspeed, 0);
			$(".header-filter-4").stop().fadeTo(aspeed, 0);
		}
	);
});