// ----------------------------------------------
// Fichier de fonctions jQuery
// Site : ISEL LOGISTIQUE
// Auteur : Grégory BELLENCONTRE - Agence Iceberg
// ----------------------------------------------

// INITIALISATION DE L'ÉTAT D'AFFICHAGE
// Permet de cibler les redimensions.
var leftSide = false; // Côté gauche inactif
var rightSide = false; // Côté droit inactif

// ÉTAT DE SURVOL DES CASES
var sc = false; // Désactivé par défaut pour éviter un bug pendant l'appel du côté gauche. (Curseur dépliant les cases)

var retour = false;

$(function() { 
	// --------------------------------------------------------------------
	// ----- INITIALISATIONS & DÉCLARATIONS
	// --------------------------------------------------------------------
		var windowW = $(window).width(); // Largeur de la fenêtre
		var windowH = $(window).height(); // Hauteur de la fenêtre
		var documentH = $(document).height() + 'px'; // Hauteur du document
		var bandeauW = 393; // Largeur fixe du bandeau principal
	
		$("body").css('background-color','#f2f2f2'); // Couleur d'arrière plan par défaut
		$(".side").hide();
	
		// ------------------------------------------------------
		// ----- ACCUEIL
		// ------------------------------------------------------
		
		if (rightSide == false && leftSide == false) {
			$(".side").css('overflow','hidden');
		
			if (windowH < 795) { // Si la hauteur de la fenêtre est inférieure à 795px (hauteur mini choisie)
				$("body").css('overflow-y','scroll');
			}
			else {
				$("body").css('overflow-y','hidden');
			}
			
			// BARRE DE NAVIGATION
			var navigationW = ((((windowW - bandeauW)/2)*0.7)*2) + bandeauW;
			navigationW = Math.round(parseInt(navigationW)) + 'px';
			$("#nav").css('width',navigationW);
			
			// BANDEAU PRINCIPAL
			var bandeau = (windowW - bandeauW)/2;
			bandeau = Math.round(parseInt(bandeau)) + 'px';
			$("#bandeau").css('left',bandeau);
			
			// ALIGNEMENT DU LOGO SUR LE BANDEAU
			var margeLogo = (bandeauW-186)/2;
			margeLogo = Math.round(parseInt(margeLogo)) + 'px';
			$("#logo").css('left',margeLogo);
			
			$("#logo").click(function() {
				window.location.href='http://www.isel-logistique.fr'; // Lien sur le logo en bas du bandeau
			});
		}
		
		// ------------------------------------------------------
		// ----- CÔTÉS DU SITE
		// ------------------------------------------------------
		
		$(".side").css('height',"100%");
		
		// ------------------------------------------------------
		// ----- CÔTÉ GAUCHE
		// ------------------------------------------------------
		
		var ruLeft = parseInt(-windowW*2);
		ruLeft = ruLeft + "px";
		$("#raisons-unique").css('left',ruLeft);
		$("#raisons-unique").css('height',documentH + "px");
		
			// TABLEAU DES CASES
			var sideW = windowW - bandeauW; // Largeur d'un côté
			
			if (sideW < 900) {
				sideW = 900
			}
			
			sideW = Math.round(parseInt(sideW)) + 'px';
			
			$("table").css('width',sideW);
	
			var caseW = (windowW - bandeauW)/3-1;
			
			if (caseW < 300) { // Si la larger de la case passe sous la barre des 300
				caseW = 300; // Elle reste fixée à 300px minimum
				$("body").css('overflow-x','scroll'); // On scrollera pour lire les informations
			}
			else {
				$("body").css('overflow-x','hidden');
			}
			
			var value = caseW * 3;
			caseW = parseInt(caseW) + "px";
			$("table td").css('width',caseW); // Cellule
			$("table td div").css('width','100%'); // Conteneur
			$("table td div span").css('width','100%');
	
			if ($(document).height() > windowH) { // Si le document est plus haut que la fenêtre
				var tableH = parseInt($(document).height()+2) + "px"; // Hauteur du tableau
				$(".side").css('height',$("#bandeau").height());
				$("table").css('height',$("#bandeau").height());
				$("raisons-unique").css('height',tableH);
				
				var caseH = $(document).height()/3+1; // Hauteur dune case
				var value2 = caseH;
				caseH = parseInt(caseH) + "px";
				$("table td").css('height',caseH); // Cellule du tableau
				$("table td div").css('height',caseH); // Conteneur
				$("table td div span").css('height',caseH); // Conteneur
			}
			else {
				$("table").css('height',windowH+2 +"px"); // Hauteur du tableau
				
				var caseH = windowH/3+1; // Hauteur d'une case
				caseH = parseInt(caseH) + "px";
				var value2 = caseH;
				$("table td").css('height',caseH); // Cellule du tableau
				$("table td div").css('height',caseH); // Conteneur
				$("table td div span").css('height',caseH); // Conteneur
			}
			
			// IMAGES PRÉSENTES DANS LES CASES
			var value2 = caseH.replace('px','');
			var imageW = ((value/3)-270)/2;
			var imageH = (value2-180)/2;
			imageW = parseInt(imageW) + "px";
			imageH = parseInt(imageH) + "px";
			$("td div img").css('margin-left',imageW);
			$("td div img").css('margin-top',imageH);
	
		// ------------------------------------------------------
		// ----- CÔTÉ DROIT
		// ------------------------------------------------------
		
		$("#organiser-monde").css('width',windowW-bandeauW-100+'px');
		$("#organiser-monde").css('height',documentH);
		$("#organiser-monde").css('min-width',"750px");
		
		var omLeft = windowW + bandeauW;
		omLeft = omLeft + "px";
		$("#organiser-monde").css('left',omLeft);
	
	
	// --------------------------------------------------------------------
	// ----- NAVIGATION & ACCÈS
	// --------------------------------------------------------------------
	
		// ------------------------------------------------------
		// ----- ACCÈS AU CÔTÉ GAUCHE
		// ------------------------------------------------------
	
			$("#nav #left a").click(function() {
				if (retour == false) {
				$("#raisons-unique").css('display','block'); // Réactivation du côté gauche qui était caché
				leftSide = true; // On active le côté gauche
				rightSide = false; // On désactive le côté droit
				retour = true;
				
				$(".retour").hide().attr('class','retour right').fadeIn(2000); // Affichage du bouton retour
				$("#nav").fadeOut(1000); // Disparition de la navigation derrière le bandeau
			
				var newHeight = $('body').prop('scrollHeight'); // Valeur du scroll pour la nouvelle hauteur
	
				$("body").css('overflow-y','hidden');
	
				$("body").animate({
					backgroundColor:"#ffffff", // Changement de la couleur d'arrière-plan
					height:newHeight // Application de la nouvelle hauteur et apparition du scroll si nécessaire
				},2000, function() {});
				
				// Déplacement du bloc "9 raisons d'être unique"
				$("#raisons-unique").animate({
					left:0
				},1900, function() {});
				
				// Déplacement du bandeau vers la droite
				var windowW = $(window).width(); // Largeur de la fenêtre
				var posBandeau = windowW - bandeauW; // Position du bandeau sur l'écran
		
				if (posBandeau < 900) { // Si le bandeau doit être positionné à moins de 900px de la gauche
					posBandeau = 900; // Il reste à 900
				}
				
				$("#bandeau").animate({
					left:posBandeau
				},2000, function() { sc = true /* Activation des slides sur les cases quand l'animation est terminée. */ });
		
				$("#organiser-monde").css('display','none'); // Désactivation du côté droit pour que le overflow:scroll éventuel ne l'affiche pas.
				}
			});
			
		// ------------------------------------------------------
		// ----- ACCÈS AU CÔTÉ DROIT
		// ------------------------------------------------------
	
			$("#nav #right a").click(function() {
				if (retour == false) {
				$("#organiser-monde").show(); // Réactivation du côté droit qui était caché
				rightSide = true; // On active le côté droit
				leftSide = false; // On désactive le côté gauche
				retour = true;
				
				$(".retour").hide().attr('class','retour left').fadeIn(2000); // Affichage du bouton retour
				$("#nav").fadeOut(1000); // Disparition de la navigation derrière le bandeau
			
				var newHeight = $('body').prop('scrollHeight'); // Valeur du scroll pour la nouvelle hauteur
				
				$("body").css('width',windowW+"px");
				$("body").css('overflow-y','scroll');
				
				$("body").animate({
					backgroundColor:"#ffffff", // Changement de la couleur d'arrière-plan
					height:newHeight // Application de la nouvelle hauteur et apparition du scroll si nécessaire
				},2000, function() {});
				
				// Déplacement du bloc "Organiser un monde"
				$("#organiser-monde").animate({
					left:bandeauW+20
				},1900, function() {});
				
				// Déplacement du bandeau vers la gauche
				$("#bandeau").animate({
					left:0,
					height:documentH
				},2000, function() {});
				
				$("div#accroche").animate({
					marginTop:90
				},2000, function() {});
				
				$("#raisons-unique").css('display','none'); // Désactivation du côté gauche pour que le overflow:scroll éventuel ne l'affiche pas
				}
			});
			
		// ------------------------------------------------------
		// ----- RETOUR À L'ACCUEIL
		// ------------------------------------------------------
	
			$(".retour").click(function() {
				rightSide = false; // Désactivation du côté droit
				leftSide = false; // Désactivation du côté gauche
				
				windowW = $(window).width(); // Largeur de la fenêtre
				windowH = $(window).height(); // Hauteur de la fenêtre
				
				$(".retour").fadeOut(2000); // Disparition du bouton retour
				$("#nav").fadeIn(2000); // Réapparition de la navigation derrière le bandeau
		
				var ruLeft = parseInt(-windowW);
				ruLeft = ruLeft + "px"; // Valeur négative pour emmener le côté gauche hors écran
		
				$("body").animate({
					backgroundColor:"#f2f2f2" // Changement de la couleur d'arrière-plan
				},2000, function() {});
				
				$("body").css('overflow-y','hidden');
				
				omLeft = windowW + bandeauW;
				omLeft = omLeft + "px";
				
				$("#organiser-monde").animate({
					left:omLeft // Mise hors écran du côté droit
				},1900, function() {});
		
				ruLeft = parseInt(-windowW*2);
				ruLeft = ruLeft + "px";
		
				$("#raisons-unique").animate({
					left:ruLeft // Mise hors écran du côté gauche
				},1900, function() {});
				
				bandeau = (windowW - bandeauW)/2;
				bandeau = Math.round(parseInt(bandeau)) + 'px';
				
				$("#bandeau").animate({
					left:bandeau, // Recentrage du bandeau principal
					height:windowH
				},2000, function() { sc = false; });
				
				$("div#accroche").animate({
					marginTop:90
				},2000, function() {});
				
				$("div#chiffres").animate({
					marginTop:70
				},2000, function() {});
				
				$("#raisons-unique").hide(1000); // Désactivation du côté gauche pour que le overflow:scroll éventuel ne l'affiche pas
				$("#organiser-monde").hide(1000); // Désactivation du côté droit pour que le overflow:scroll éventuel ne l'affiche pas.
				
				window.setTimeout(function() { retour = false; /* Désactivation des slide sur les cases */  },2200);
			});
	
	// --------------------------------------------------------------------
	// ----- SURVOL DES CASES & SLIDES
	// --------------------------------------------------------------------
	
	$("div span").css('height',$("td#c1").height());
	
	// ENTREE DU CURSEUR AU DESSUS D'UNE CASE
	$("td div").mouseover(function() {
		if (sc == true) { // Si les slides sont activées
			if ($(this).find("span").is(":hidden")) { // Si celle que l'on veut afficher est cachée
				var caseH = $(this).height();
				caseH = parseInt(caseH) + "px"; // On calcule sa nouvelle hauteur
				
				$(this).find("span").slideDown(500);
			}
		}
	});
	
	// SORTIE DU CURSEUR
	$("td div").mouseleave(function() {
		if ($(this).find("span").is(":visible")) { // Si la slide d'où l'on sort est visible
			$(this).find("span").slideUp(500);
		}
	});
});