// Skin Specific JS goes here. Watch out for possible jQuery no conflict setup (like $j instead of $)

$j(document).ready(function() {

	//Set css in Firefox (Required to use the backgroundPosition js)
	$j('#shutter1 span').css({backgroundPosition: '0px 38px'});
	$j('#shutter2 span').css({backgroundPosition: '30px 38px'});
	$j('#shutter3 span').css({backgroundPosition: '0px 38px'});

	//Animate the shutter
	$j("#shutter1 .link").hover(function(){
	      $j(this).parent().animate({backgroundPosition: '(0px -150px)'}, 500 );
	    }, function() {
	      $j(this).parent().animate({backgroundPosition: '(0px 38px)'}, 500 );
	});
	
	$j("#shutter2 .link").hover(function(){
	      $j(this).parent().animate({backgroundPosition: '(30px -150px)'}, 500 );
	    }, function() {
	      $j(this).parent().animate({backgroundPosition: '(30px 38px)'}, 500 );
	});
	
	$j("#shutter3 .link").hover(function(){
	      $j(this).parent().animate({backgroundPosition: '(0px -150px)'}, 500 );
	    }, function() {
	      $j(this).parent().animate({backgroundPosition: '(0px 38px)'}, 500 );
	});
 });