$(function(){
$('#a a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:800})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:800, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
$('#b a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:800})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:800, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
$('#c a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:800})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:800})
})
$('#d a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:800})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:800})
})
});

$(document).ready(function(){
	/*
	Here we create a content slider using the jquery jFlow plugin.
	Instructions are in the HELP file and also included in HTML comments below.
	Link to the jFlow plugin can be found in help file.
	*/
	$("#hidden-controller").jFlow({
		slides: "#header-slides",
		controller: ".jFlowControl", // must be class, use . sign
		slideWrapper : "#jFlowSlide", // must be id, use # sign
		selectedWrapper: "jFlowSelected",  // text, no sign
		width: "540px",
		height: "150px",
		duration: 400,
		prev: ".slides-arrow-left", // must be class, use . sign
		next: ".slides-arrow-right" // must be class, use . sign
	});
	// We do this so that on long loading pages (eg: google maps) the content doesn't overflow/flicker down
	// over the content.
	$('#header-slides-holder').css('visibility','visible');
});