/**
 *	Script qui gère la partie réalisation du site.
 *	@author	ZEZUKA Clément	<clemzezuk@gmail.com>
 */
$(function(){
	
	/**
	 *	La variable 'i' est un entier, correspond à l'index numerique de la réalisation en cours de consultation.
	 *	@default    0
	 */
	var i = 0;
	
	/**
	 *	La variable 'lines' est un entier, correspond au nombre de lignes de la partie réalisations ( 1 ligne équivaut à 4 réalisations ).
	 */
	var lines = Math.round(  $(".box").length / 4 ) - 1;
	
	/**
	*	La variable 'test' est un booléen, permet de contingenter l'utilisation des boutons suivant et précédent.
	*	@default	false
	*/
       var test = false;
       
	//	Méthode appelée au survol des boutons suivant, précédent et des images possedant la classe level.
	$("#next, #prev, .level").hover(
		function() {  
			$(this).stop().animate({ opacity: 0 }, 500);  
		},
		function() {  
			$(this).stop().animate({ opacity: 1 }, 500);  
		}
	);
	
	//	Méthode appelée au clique du bouton suivant.
	$('#next').click(function() {
		if ( i < lines ) {
			if ( !test ){
				i++;
				test = !test;
				setPosition(i);
			}
		}
	});
	
	//	Méthode appelée au clique du bouton précédent.
	$('#prev').click(function() {
		if ( i > 0 ) {
			if ( !test ){
				i--;
				test=!test;
				setPosition(i);
			}
		}
	});
	
	//	Méthode appelée au survol d'une réalisation.
	$('.box').hover(
		function() {
			$(this).find('img.over').stop().animate({opacity:1},500);  
		},
		function() {  
			$(this).find('img.over').stop().animate({opacity:0},500);
		}
	);
	
	//  	Méthode appelée au clique d'une réalisation.
	$('.box').click(function() {
		var id = $(this).index() + 1;
		var w = $('#view_project img').width();
		var h = $('#view_project img').height();
		var ratio = (w/h);
		$.post(
			"ajax/project.php", 
			{id:id},
			function(data) {
				$("#text_project").empty().append(data.content).fadeIn();
				$("#container_project").empty().append(data.image).fadeIn();
				$('#view_project').stop().animate({height:"100%"},1000,"easeOutExpo");
				var length = $('#view_project img').length;
				for (z = 0; z < length; z++){
				    var index = ($('#view_project img').eq(z).index());
				    $('#view_project img').eq(index).delay(300*index).fadeIn(500);
				}
				$('#view_project img').fadeIn(500);
				$('#text_project').fadeIn(500);
				$('#close').fadeIn(500);
				$('#next_images').fadeIn(500);
				$('#prev_images').fadeIn(500);
				if ($(window).height() < 770) {
					$('#view_project img').css({height:$(window).height()-270, width:ratio*($(window).height()-270), marginTop:120});
					$('#text_project').css({height:$(window).height()-270, marginTop:120});
				} else { 
					$('#view_project img').css({height:500, width:750, marginTop:(($(window).height()-30)-500)/2}); 
					$('#text_project').css({height:500, marginTop:(($(window).height()-30)-500)/2});
				}
			},
			"json"
		);
	});
	
	/**
	 *	Méthode qui définit la position et la transparence de chaque lignes de réalisations.
	 *	@param	index
	 */
	function setPosition(index) {
		var position = -(300*index);
		$('#projets').stop().animate({marginTop:position}, 1000, "easeOutExpo", function(){test = !test;});
		if (index == 0) {
			$('.box').each(function(j) {
				if (Math.floor(j/4) == 0) {
					$('.box').eq(j).stop().animate({opacity:1}, 1000, "easeOutExpo");
				}
			})
		}
		if (index > 0 && index < lines) {
			$('.box').each(function(j) {
				if (Math.floor(j/4) <= index-1) {
					$('.box').eq(j).stop().animate({opacity:0.1}, 1000, "easeOutExpo");
				}
				if (Math.floor(j/4) == index) {
					$('.box').eq(j).stop().animate({opacity:1}, 1000, "easeOutExpo");
				}
			})
		}
		if (index == lines) {
			$('.box').each(function(j){
				if (Math.floor(j/4) <= index-2) {
					$('.box').eq(j).stop().animate({opacity:0}, 1000, "easeOutExpo");
				}
				if (Math.floor(j/4) == index-1) {
					$('.box').eq(j).stop().animate({opacity:0.1}, 1000, "easeOutExpo");
				}
				if (Math.floor(j/4) >= index) {
					$('.box').eq(j).stop().animate({opacity:1}, 1000, "easeOutExpo");
				}
			})
		}
	}    
});