var timeout = 4000;
var speed = 2000;

$(document).ready(function(){
	//show the container
	$("#image_cont").show();
	
	//get the total size
	var img_cnt = $('.images').length;
	var size = $("#image_cont").width() * img_cnt;
	
	//set the size of the container
	$("#header_images").width(size);
	
	//only do it if there is more than one image
	if(img_cnt > 1){
		//set the initial timeout
		setTimeout("changeImages()",timeout);
	}
});

function changeImages(){
	//initialize the counter
	var count = 0;
	
	//set the z-index higher to remove flash
	$('.images').eq(1).css({'z-index':'1000'});
	
	//loop through the images
	$(".images").each(function(){
						  
		//animate the images to the left
		$(this).animate({'left':'-='+$("#image_cont").width()+'px'},speed,function(){
			//if its the first image do what is necessary
			if(count == 0){
				//get the image source
				var image_src = $('.images').eq(0).attr("src");
				
				//remove the first image
				$('.images').eq(0).remove();
				
				//put the first image at the end
				$("#header_images").append('<img class="images" src="'+image_src+'" />');
			} else { 
				//reset the z-index
				$(this).css({'z-index':'0'});
			}
			
			//remove the left
			$(this).css({'left':''});
			
			//increment the counter
			count++;
		});
	});
	
	//set the timeout for the new image
	setTimeout("changeImages()",timeout+speed);
}