var bodySize = [];
var menuSize = [];
var contentSize = [];

var destination;

$(document).ready(function() {
	pageFolio();
	$('#btPortfolio').click(function() { pageFolio(); });
	$('#btContact').click(function() { pageContact(); });
	
	bodySize = [ $("body").innerWidth() , $("body").innerHeight() ];
	menuSize = [ $("#menu").innerWidth() , $("#menu").innerHeight() ];
	
	
	
	
	
	contentSize = [ bodySize[0] - menuSize[0] , bodySize[1]];
	$("#content").css("width",contentSize[0]);
	
	$("#content").css("height",contentSize[1]);
	$("#content").css("left",menuSize[0]);
	
	
	
	$("#hiderGalerie").css("width",contentSize[0]);
	$("#hiderGalerie").css("height",contentSize[1]);
	
	
	
	if(  $("#contentMenu").innerHeight() + menuSize[1] < bodySize[1]  ) {
		
		$("#contentMenu").css("height", (bodySize[1]-menuSize[1])+"px"  );
		$("#menuFolio").css("height", (bodySize[1]-menuSize[1])+"px"  );
		$("#menuContact").css("height", (bodySize[1]-menuSize[1])+"px"  );
	}
	
	
	
	$("#menuFolio ul li a").each(function(i) {
		$($("#menuFolio ul li a")[i]).click(function() { 
			loadDiap(i, this);
		});
	});
	
});



$(window).resize(function() {
bodySize = [ $("body").innerWidth() , $("body").innerHeight() ];
	menuSize = [ $("#menu").innerWidth() , $("#menu").innerHeight() ];
	
	
	
	
	
	contentSize = [ bodySize[0] - menuSize[0] , bodySize[1]];
	$("#content").css("width",contentSize[0]);
	
	$("#content").css("height",contentSize[1]);
	$("#content").css("left",menuSize[0]);
	
	
	
	$("#hiderGalerie").css("width",contentSize[0]);
	$("#hiderGalerie").css("height",contentSize[1]);
	if(  $("#contentMenu").innerHeight() + menuSize[1] < bodySize[1]  ) {
		
		$("#contentMenu").css("height", (bodySize[1]-menuSize[1])+"px"  );
		$("#menuFolio").css("height", (bodySize[1]-menuSize[1])+"px"  );
		$("#menuContact").css("height", (bodySize[1]-menuSize[1])+"px"  );
	}
	
	
});


function pageFolio() {
	if( $("#contentMenu").hasClass('menuContact')) {
		$("#content").empty();
		$("#menuContact").css("z-index",2);
		$("#menuContact").animate({ left: -325 }, 500, "easeInOutCubic" , function() { } ); 
		$("#contentMenu").toggleClass("menuContact");
	}
	if( !$("#contentMenu").hasClass('menuFolio') ) {
	$("#content").empty();
		$("#menuFolio").css("z-index",5);
		$("#menuFolio").animate({ left: 0 }, 500, "easeInOutCubic" , function() { } ); 
		$("#contentMenu").toggleClass("menuFolio");
		initGalerie();
	}	
	else {
		
	}
}

function initGalerie(){
	$("#content").append("<div id='hiderGalerie'></div>");
	$("#content #hiderGalerie").append($($("#contentFolio div")[0]).clone());
	
	$($("#hiderGalerie div")[$("#hiderGalerie div").length-1]).css( {  
		//"top" : (contentSize[1]- $($("#hiderGalerie div")[$("#hiderGalerie div").length-1]).innerHeight() )/2+"px",
		//"left" : (contentSize[0]- $($("#hiderGalerie div")[$("#hiderGalerie div").length-1]).innerWidth() )/2+"px",
		"opacity":0
		} );
	
	
	$('body').removeClass("white");
	$('body').addClass("black");
	
	
	// $('body').animate({ backgroundColor:"black" }, 300);
	$($("#content #hiderGalerie div")[0]).animate({ 
			opacity:1
		}, 500,  function() { } );  
}
function loadDiap(i,elem) {
	// redefinir la couleur du BG du body
	/*
	if ( $(elem).attr("rel") !=  $('body').attr('class') ) {
		$('body').removeClass($('body').attr('class'));
		$('body').addClass($(elem).attr("rel"));
		$('body').animate({ backgroundColor: $(elem).attr("rel") }, 400);
	}
	*/
	$("#content #hiderGalerie").append($($("#contentFolio div")[i]).clone());
	
	$($("#hiderGalerie div")[$("#hiderGalerie div").length-1]).css( {  
		"top" : (contentSize[1]- $($("#hiderGalerie div")[$("#hiderGalerie div").length-1]).innerHeight() )/2+"px",
		"left" : (contentSize[0]- $($("#hiderGalerie div")[$("#hiderGalerie div").length-1]).innerWidth() )/2+"px",
		"opacity":0
		} );
	
	
	$($("#content #hiderGalerie div")[$("#content #hiderGalerie div").length-2]).animate({ 
			opacity:0
		}, 300,  function() { $(this).remove(); } ); 
		
	$($("#content #hiderGalerie div")[$("#content #hiderGalerie div").length-1]).animate({ 
			opacity:1
		}, 500,  function() { } ); 
	
	
}


function pageContact() {
	if( $("#contentMenu").hasClass('menuFolio') ) {
		$("#content").empty();
		$("#menuFolio").css("z-index",2);
		$("#menuFolio").animate({ left: -325 }, 500, "easeInOutCubic" , function() { } ); 
		$("#contentMenu").toggleClass("menuFolio");
		
		
	}
	if( ! $("#contentMenu").hasClass('menuContact') )  {
		$("#menuFolio").css("z-index",5);
		$("#menuContact").animate({ left: 0 }, 500, "easeInOutCubic" , function() { } ); 
		$("#contentMenu").toggleClass("menuContact");
	}
	
	
}