// JavaScript Document
var offre = 1;
$(document).ready(function(){
	// Au chargement de la page on change la css du lien 1
	$("#lien-offre-1").addClass("offre-1_over");
	
	//on lance l'annimation en boucle toute les secondes (1000 miliseconde)
	timer = setInterval('autoplay();',3000);
	
	$("#bloc-offre").hover(function () {
		clearInterval(timer);
	},function (){
		timer = setInterval('autoplay();',3000);
	});
	
	// Cas menu offre 1
	$("#offre-1").hover(function () {
		
		// on gere les classes des boutons
		$("#lien-offre-1").addClass("offre-1_over");
		$("#lien-offre-2").removeClass("offre-2_over");
		$("#lien-offre-3").removeClass("offre-3_over");
		$("#lien-offre-4").removeClass("offre-4_over");
		
		// on gere l'affichage des div
		$("#detail-offre-1").show();
		$("#detail-offre-2").hide();
		$("#detail-offre-3").hide();
		$("#detail-offre-4").hide();
		
		offre = 1;
		
	});
	
	// Cas menu offre 2
	$("#offre-2").hover(function () {
								  
		// on gere les classes des boutons
		$("#lien-offre-2").addClass("offre-2_over");
		$("#lien-offre-1").removeClass("offre-1_over");
		$("#lien-offre-3").removeClass("offre-3_over");
		$("#lien-offre-4").removeClass("offre-4_over");
		
		// on gere l'affichage des div
		$("#detail-offre-2").show();
		$("#detail-offre-1").hide();
		$("#detail-offre-3").hide();
		$("#detail-offre-4").hide();
		
		offre = 2;
	});
	
	// Cas menu offre 3
	$("#offre-3").hover(function () {
								  
		// on gere les classes des boutons
		$("#lien-offre-3").addClass("offre-3_over");
		$("#lien-offre-1").removeClass("offre-1_over");
		$("#lien-offre-2").removeClass("offre-2_over");
		$("#lien-offre-4").removeClass("offre-4_over");
		
		// on gere l'affichage des div
		$("#detail-offre-3").show();
		$("#detail-offre-1").hide();
		$("#detail-offre-2").hide();
		$("#detail-offre-4").hide();
		offre = 3;
	});
	
	// Cas menu offre 4
	$("#offre-4").hover(function () {
								  
		// on gere les classes des boutons
		$("#lien-offre-4").addClass("offre-4_over");
		$("#lien-offre-1").removeClass("offre-1_over");
		$("#lien-offre-2").removeClass("offre-2_over");
		$("#lien-offre-3").removeClass("offre-3_over");
		
		// on gere l'affichage des div
		$("#detail-offre-4").show();
		$("#detail-offre-1").hide();
		$("#detail-offre-2").hide();
		$("#detail-offre-3").hide();
		offre = 4;
	});
});	

//------------------------------------------------------
// On gere l'autoplay
//------------------------------------------------------
//fonction gérant l'annimation
function autoplay()
{
	// cas offre 1 actif
	if ( offre == 1 ) 
	{
		// on gere les classes des boutons
		$("#lien-offre-2").addClass("offre-2_over");
		$("#lien-offre-1").removeClass("offre-1_over");
		$("#lien-offre-3").removeClass("offre-3_over");
		$("#lien-offre-4").removeClass("offre-4_over");
		
		// on gere l'affichage des div
		$("#detail-offre-2").show();
		$("#detail-offre-1").hide();
		$("#detail-offre-3").hide();
		$("#detail-offre-4").hide();
		
		offre = 2;
		return;
	}
	// cas offre 2 actif
	if ( offre == 2 ) 
	{
		// on gere les classes des boutons
		$("#lien-offre-3").addClass("offre-3_over");
		$("#lien-offre-1").removeClass("offre-1_over");
		$("#lien-offre-2").removeClass("offre-2_over");
		$("#lien-offre-4").removeClass("offre-4_over");
		
		// on gere l'affichage des div
		$("#detail-offre-3").show();
		$("#detail-offre-1").hide();
		$("#detail-offre-2").hide();
		$("#detail-offre-4").hide();
		
		offre = 3;
		return;
	}
	// cas offre 3 actif
	if ( offre == 3 ) 
	{
		// on gere les classes des boutons
		$("#lien-offre-4").addClass("offre-4_over");
		$("#lien-offre-1").removeClass("offre-1_over");
		$("#lien-offre-2").removeClass("offre-2_over");
		$("#lien-offre-3").removeClass("offre-3_over");
		
		// on gere l'affichage des div
		$("#detail-offre-4").show();
		$("#detail-offre-1").hide();
		$("#detail-offre-2").hide();
		$("#detail-offre-3").hide();
		
		offre = 4;
		return;
	}
	// cas offre 4 actif
	if ( offre == 4 ) 
	{
		// on gere les classes des boutons
		$("#lien-offre-1").addClass("offre-1_over");
		$("#lien-offre-2").removeClass("offre-2_over");
		$("#lien-offre-3").removeClass("offre-3_over");
		$("#lien-offre-4").removeClass("offre-4_over");
		
		// on gere l'affichage des div
		$("#detail-offre-1").show();
		$("#detail-offre-2").hide();
		$("#detail-offre-3").hide();
		$("#detail-offre-4").hide();
		
		offre = 1;
		return;
	}

}