$(document).ready(function(){
$('#diaporama')
		.before('<div id="nav">')
		.cycle({
        fx : 'scrollLeft',
		speed : 'slow',
		timeout : 4000,
		prev : '#prev',
		next : '#next',
		pause : true
		});
		

	

$(".bloc1").hover(function(){
	$("#deroule1").animate({ 
			top:"0px"
		  }, 200 );
	
	$("#deploy_1").animate({ 
			top:"5px"
		  }, 200 );
		  
	$("#deroule2").animate({ 
			top:"220px"
		  }, 200 );
	
	$("#deploy_2").animate({ 
			top:"230px"
		  }, 200 );
	
	$("#deroule3").animate({ 
			top:"220px"
		  }, 200 );
	
	$("#deploy_3").animate({ 
			top:"230px"
		  }, 200 );

	return false;
});



$(".bloc2").hover(function(){
	$("#deroule2").animate({ 
			top:"0px"
		  }, 200 );
	
	$("#deploy_2").animate({ 
			top:"5px"
		  }, 200 );
	
	$("#deroule1").animate({ 
			top:"220px"
		  }, 200 );
	
	$("#deploy_1").animate({ 
			top:"230px"
		  }, 200 );
	
	$("#deroule3").animate({ 
			top:"220px"
		  }, 200 );
	
	$("#deploy_3").animate({ 
			top:"230px"
		  }, 200 );
		  
	return false;
});

$(".bloc3").hover(function(){
	$("#deroule3").animate({ 
			top:"0px"
		  }, 200 );
	
	$("#deploy_3").animate({ 
			top:"5px"
		  }, 200 );

	$("#deroule2").animate({ 
			top:"220px"
		  }, 200 );
	
	$("#deploy_2").animate({ 
			top:"230px"
		  }, 200 );
	
	$("#deroule1").animate({ 
			top:"220px"
		  }, 200 );
	
	$("#deploy_1").animate({ 
			top:"230px"
		  }, 200 );
		  
	return false;
});






});