counting = 0;

sizeOfImage = 450;
timerId = "";
LeftStyle = 0;
jQuery(document).ready(function(){
	loadFunctions()
});

function loadFunctions(){
	bannerAnimation();
}

function bannerAnimation(){

	$("#banner").append('<p class="pauseImage"><a href="#">Pause</a></p>');
	
	$("#banner .pauseImage").click(function () {
		if($(this).hasClass("ispaused")){
			$("a", this).text("Pause");
			timer();
			$(this).removeClass("ispaused")
		}else{
			$("a", this).text("Jouez");
			stopTimer();
			$(this).addClass("ispaused")
		}
	});
	
	var intNumberOfImages = jQuery("#banner img").length
	var intNumberOfImagesCounter = 0;
	
	
	jQuery("#banner li").each(function(i){	
		
		$(this).attr("style", "left:" + (intNumberOfImagesCounter*sizeOfImage) + "px")
		//alert($("img",this).attr("src") + (intNumberOfImagesCounter*sizeOfImage) + "px")
		intNumberOfImagesCounter++;
	});
	timer();
}

function timer(){

	timerId = self.setInterval("moveImage(sizeOfImage)",5000);
	
}

function stopTimer(){
	clearInterval(timerId);
}

function moveImage(sizeOfImage){



	$("#banner li").each(function(i){
	  		
  		var Styles = $(this).attr("style");
  				
		LeftStyle = Styles.replace(/LEFT/, "");
		LeftStyle = LeftStyle.replace(/left/, "");
		LeftStyle = LeftStyle.replace(/px/, "");
		LeftStyle = LeftStyle.replace(/\:/, "");
		LeftStyle = LeftStyle.replace(/ /, "");
						
		LeftStyle = parseInt(LeftStyle) - sizeOfImage;
		
		order = (LeftStyle / sizeOfImage) + 1;
		
		$(this).attr("class", "")
		$(this).addClass("bannerImage" + order );
		
		if(LeftStyle < - sizeOfImage){
			LeftStyle = (jQuery("#banner img").length - 2) * sizeOfImage;	
		}
		//$("h2").text(LeftStyle)
		
		$(this).animate({ 
		left: LeftStyle
		}, 400);
	});
}