$(document).ready(function() {
					  
	//Put the JPG images (.jpg) in this array and that's it name a div id=photo-display and it will work
	var galImgs = Array("1","2","3","4","5","6", "7", "8", "9", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24");
	
	//start with a random image
	var currentImage = (Math.floor(Math.random() * (galImgs.length-1)));
	
	//insert an image tag inside the div to do the dissolve effect. Set the background image of the div equal to the source on the image tag.
	$("#photo-display").html("<img id='imageID' src='images/gallery/"+galImgs[currentImage]+".jpg' />").css('background-image', 'url(images/gallery/'+galImgs[currentImage]+'.jpg)');
	
	//set a new image every 1000 miliseconds
	setInterval(swap,10000);
	
	
	//swaps the current image with the next one
	function swap(){
		//set the background image of the outside div to the current image
		$("#photo-display").css('background-image', 'url(images/gallery/'+galImgs[currentImage]+'.jpg)');
		
		//hide the img tag
		$("#imageID").hide();
		//$("#imageID").attr("src", "images/gallery/"+galImgs[current++]+".jpg");  DIDN'T WORK
		
		//find the image id and replace the source with the next image
		var image = document.getElementById("imageID");
		image.src = "images/gallery/"+galImgs[currentImage+1]+".jpg";
		
		//fade the img tag on top of the div to create the fade in effect
		setTimeout("$('#imageID').fadeIn(1000)",100);
		
		//go to the next image. If it is the last image, loop around
		if(currentImage >= (galImgs.length-1)){currentImage=0;}
		else{currentImage++;}
	}

});