$(document).ready(function(){


// HOME


$("ul.topleft li#home").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '0px', 
			marginLeft: '-10px', 
			// top: '50%', 
// 			left: '50%', 
			width: '100px', 
			height: '50px'		// be careful to not put a comma after the last parameter 
		}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '85px', 
			height: '43px' 
		}, 400);
});



// ABOUT


$("ul.topleft li#about").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '0px', 
			marginLeft: '-10px', 
			// top: '50%', 
// 			left: '50%', 
			width: '100px', 
			height: '36px'			// be careful to not put a comma after the last parameter  
		}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '85px', 
			height: '30px' 
		}, 400);
});






// CONTACT


$("ul.topleft li#contact").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '0px', 
			marginLeft: '0px', 
			// top: '50%', 
// 			left: '50%', 
			width: '100px', 
			height: '27px'			// be careful to not put a comma after the last parameter  
		}, 200);
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '85px', 
			height: '23px' 
		}, 400);
});

















// SCREENINGROOM


$("ul.thumb li#screeningroom").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-50px', 
			marginLeft: '-160px', 
			top: '50%', 
			left: '50%', 
			width: '250px',		// set the width and height to the size of the image (...-big.png) 
			height: '123px'		// be careful to not put a comma after the last parameter   
		}, 200);
	$('#head2').show();
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px', 
			height: '74px' 
		}, 400);
	$('#head2').hide();
	
});






// SCREENINGROOM - FRANCAIS
// (change the ID if the <li> and the dimensions of the hover img)

$("ul.thumb li#screeningroom_fr").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-50px', 
			marginLeft: '-160px', 
			top: '50%', 
			left: '50%', 
			width: '250px',			// set the width and height to the size of the image (...-big.png)  
			height: '97px'			// be careful to not put a comma after the last parameter  
		}, 200);
	$('#head2').show();
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px', 
			height: '58px' 
		}, 400);
	$('#head2').hide();
	
});










// ARTWALL

$("ul.thumb li#artwall").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-30px', 
			marginLeft: '-120px', 
			top: '50%', 
			left: '50%', 
			width: '250px',		// set the width and height to the size of the image (...-big.png)  
			height: '79px'		// be careful to not put a comma after the last parameter  
		}, 200);
	$('#head1').show();
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px', 
			height: '47px' 
		}, 400);
	$('#head1').hide();
});






// ARTWALL - FRANCAIS

$("ul.thumb li#artwall_fr").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-30px', 
			marginLeft: '-120px', 
			top: '50%', 
			left: '50%', 
			width: '230px',			// set the width and height to the size of the image (...-big.png)  
			height: '127px'			// be careful to not put a comma after the last parameter  
		}, 200);
	$('#head1').show();
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px', 
			height: '83px' 
		}, 400);
	$('#head1').hide();
});
















// VIRTUAL WORLD

$("ul.thumb li#vw").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-70px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '250px',			// set the width and height to the size of the image (...-big.png) 
			height: '149px'			// be careful to not put a comma after the last parameter 
		}, 200);
	$('#head3').show();
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px', 
			height: '90px' 
		}, 400);
	$('#head3').hide();
});






// VIRTUAL WORLD - FRANCAIS

$("ul.thumb li#vw_fr").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-70px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '240px',			// set the width and height to the size of the image (...-big.png) 
			height: '120px'			// be careful to not put a comma after the last parameter 
		}, 200);
	$('#head3').show();
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px', 
			height: '75px' 
		}, 400);
	$('#head3').hide();
});
















// STUDIO


$("ul.thumb li#studio").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-40px', 
			marginLeft: '-110px', 
			top: '50%', 
			left: '50%', 
			width: '250px', 
			height: '100px'
		}, 200);
	$('#head4').show();
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			width: '150px', 
			height: '60px' 
		}, 400);
	$('#head4').hide();
});


 
});