$(document).ready(function() {
	
	var background	= $('#background');
	var loader = $('.loading');
	var bgimage	= $('.bgimage');
	var totalImg = bgimage.length;
	var ItemImages = new Array();
	
	
	ItemImages.push(bgimage.attr('src'));

	var chargementImages	= function() {
		return $.Deferred(
		function(dfd) {
			var total_images 	= ItemImages.length,
			loaded			= 0;
			for(var i = 0; i < total_images; ++i){
				$('<img/>').load(function() {
					++loaded;
					if(loaded === total_images)
						dfd.resolve();
				}).attr('src' , ItemImages[i]);
			}
		}).promise();
	};
	
	
	
	$('.DiaporamaBox').click(function(){
		$('#diapoBackground').fadeIn(500);
		$('#diaporaBlock').fadeIn(500,function(){
			loader.show();
			background.find('img').hide();
			backgroundDiap = new changeBackground("#background");
			loader.fadeOut();
			
		});
		$("body").delay(500).css({"overflow":"hidden"});
		
		return false;
	});
	
	$('#closeDiaporama').click(function(){
		$('#diaporaBlock').animate({
			"height":"0px",
			"width":"0px"	
		},500,function(){
			$('#diaporaBlock').hide();
		});		
		$('#diapoBackground').fadeOut();
		$("body").css({"overflow":"auto"});		
		background.find('img').hide();
	});
	
	$('#diapoBackground').click(function(){
		$('#diaporaBlock').animate({
			"height":"0px",
			"width":"0px"	
		},500,function(){
			$('#diaporaBlock').hide();
		});		
		$('#diapoBackground').fadeOut();
		$("body").css({"overflow":"auto"});		
		background.find('img').hide();
	});
});

function centerThis(element) {
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	var elementHeight = $(element).height();
	var elementWidth = $(element).width();
	 
	var elementTop, elementLeft;
	 
	if (windowHeight <= elementHeight) {
		elementTop = $(window).scrollTop();
	} else {
		elementTop = ((windowHeight - elementHeight) / 2) + $(window).scrollTop();
	}
	 
	if (windowWidth <= elementWidth) {
		elementLeft = $(window).scrollLeft();
	} else {
		elementLeft = ((windowWidth - elementWidth) / 2) + $(window).scrollLeft();
	}
	 
	$(element).css({
	'top': elementTop,
	'left': elementLeft
	});
}


var changeBackground = function(id){
	var self=this;
	this.div = $(id);
	var divGlob = $("#diaporaBlock");	
	var windowHeight = $(window).height();
	var windowWidth = $(window).width();
	this.nbImage = this.div.find('img').length;
	this.Img = this.div.find('img');
	$(this.Img).hide();	
	var $i=1;
	
	this.div.find('#img'+$i).fadeIn();	
	divGlob.animate({
		"height":self.div.find('#img'+$i).height(),
		"width":self.div.find('#img'+$i).width(),
		"left":"50%",
		"margin-left":-self.div.find('#img'+$i).width()/2
	});
	var interVal = setInterval;
	var timer = 4000;
	$('#closeDiaporama').click(function(){
		$i = -999999999999999999999999999;
	});
	$('#diapoBackground').click(function(){
		$i = -999999999999999999999999999;
	});
		interVal(function(){
		if($i<self.nbImage)
		{
						
			var windowHeight = $(window).height();
			var windowWidth = $(window).width();
			
			self.div.find('#img'+$i).fadeOut(500,function(){
				$i++;	
				
				if (windowHeight <= self.div.find('#img'+$i).height()) {
					self.div.find('#img'+$i).css({"height":windowHeight-200+"px"});	
				}
				if (windowWidth <= self.div.find('#img'+$i).width()) {
					self.div.find('#img'+$i).css({"width":windowWidth-200+"px"});	
				}
				
				
				divGlob.animate({
					"height":self.div.find('#img'+$i).height(),
					"width":self.div.find('#img'+$i).width(),
					"left":"50%",
					"margin-left":-self.div.find('#img'+$i).width()/2
				},function(){
					self.div.find('#img'+$i).fadeIn();
				});
				
			});	
			
		}
		else
		{
			
			var windowHeight = $(window).height();
			var windowWidth = $(window).width();
			
			self.div.find('#img'+$i).fadeOut(500,function(){
				$i = 1;	
				
				if (windowHeight <= self.div.find('#img'+$i).height()) {
					self.div.find('#img'+$i).css({"height":windowHeight-200+"px"});	
				}
				if (windowWidth <= self.div.find('#img'+$i).width()) {
					self.div.find('#img'+$i).css({"width":windowWidth-200+"px"});	
				}
				self.div.find('#img'+$i).fadeIn();
				
				divGlob.animate({
					"height":self.div.find('#img'+$i).height(),
					"width":self.div.find('#img'+$i).width(),
					"left":"50%",
					"margin-left":-self.div.find('#img'+$i).width()/2
				},function(){
					self.div.find('#img'+$i).fadeIn();
				});
				
			});
			
		}
	
	 //alert(timer);
	},timer);
	//alert(this.nbImage);
}