jQuery(function($) {
	
	$('.scrollable_text').jScrollPane({scrollbarWidth:8});
	$('.popup').hide();
	
	//############################################ MISE EN PAGE ############################################
	
	var all_container = $('#all');
	var container = $('#container');
	var column_width = $('.item').width() + 10;
	var item_height = 200;
	
	var total_width = $(window).width();
	var container_width = Math.floor(total_width / column_width) * column_width;
	all_container.width(container_width);

	var nb_lines = all_container.height()/item_height;
	var nb_cols = all_container.width()/column_width;
	
	$(".presentation").css({ top: 405, left: 755 });
	$(".clients").css({ top: 205, left: 505 });
	
	var position = 3*nb_cols - 1;
	$('.contact').insertAfter($('.item').eq(position));
	
	$(window).resize(function() {
		var total_width = $(window).width();
		var container_width = Math.floor(total_width / column_width) * column_width;
		all_container.width(container_width);
	});
	
	container.masonry({
		itemSelector : '.item',
		columnWidth : column_width,
		isAnimated: true
	});
	
	//############################################ LIGHTBOX ############################################
	
	$('a.lightbox').lightBox();
	
	//############################################ MENU ############################################
	
	$('#menu li li a').eq(0).addClass('active');
	$('#menu li li a').click(function () {
		$('#menu li li a').removeClass('active');
		$(this).addClass('active');
	});
	
	//############################################ TRI DES PROJETS ############################################
	
	$('#menu ul li li a').click(function () {
		var object_class = $(this).html();
		$('#container div.'+object_class+' img.disabled').stop().animate({ left: '-250px' },{duration:400, easing:'easeInOutQuart'});
		$('#container div:not(.'+object_class+') img.disabled').stop().animate({ left: '0px' },{duration:400, easing:'easeInOutQuart'});
	});
	
	//############################################ SURVOL DES PROJETS ############################################
	
	$("a.lightbox").hover(
		function () {
			$(this).find('.infos_container').stop().animate({ left: '0px' },{duration:400, easing:'easeInOutQuart'});
		},
		function () {
			$(this).find('.infos_container').stop().animate({ left: '-250px' },{duration:400, easing:'easeInOutQuart'});
		}
	);
	
	//############################################### POPUPS ###############################################
	
	$(".menu_presentation a").click(function (){
		$('.menu_clients li').removeClass('active');
		$(this).parent().addClass('active');
		$(".clients").fadeOut();
		$(".presentation").fadeIn();
	});
	
	$(".menu_clients a").click(function (){
		$('.menu_presentation li').removeClass('active');
		$(this).parent().addClass('active');
		$(".presentation").fadeOut();
		$(".clients").fadeIn();
	});
	
	$(".popup .close a").click(function (){
		$('.menu_presentation li').removeClass('active');
		$('.menu_clients li').removeClass('active');
		$(".popup").fadeOut();
	});
	
});