$(function(){
	var x = 1;
	var arrLen = arrImages.length;
	var divID = 1;
	var myInterval = "";
	
	$('.nextImg').click(function(){
		x++;
		x = Math.abs(x % arrLen);
		divID = Math.abs(divID-1);
		myDiv = '#img'+divID;
		loadImage(arrImages[x][0], divID, arrImages[x][1]);
		startSlideshow();
		return false;
	});
	
	$('.stopShow').click(function(){
		clearInterval(myInterval);
		return false;
	});
	
	startSlideshow();

	function startSlideshow(){
		clearInterval(myInterval);
		myInterval = setInterval(function(){
		x++;
		x = Math.abs(x % arrLen);
		divID = Math.abs(divID-1);
		myDiv = '#img'+divID;
		if (arrImages[x][2] == arrImages[x][3]) {
			var captionDates = arrImages[x][3];
		}
		else {
			var captionDates = arrImages[x][2] + " - " + arrImages[x][3];
		}
		loadImage(arrImages[x][0], divID, arrImages[x][1], captionDates, arrImages[x][4]);
	},8000);
	}
	
});

function loadImage(imageFile, imageDiv, imageCaption, captionDates, infoLink){
	var myImg = new Image();
	var divToFadeOut = '#img' + Math.abs(imageDiv-1);
	var divToFadeIn = '#img' + imageDiv;
	$(myImg).load(function(){
		$(divToFadeIn).html(this);
		$(divToFadeIn).fadeIn('slow', function(){
			newZ2 = Math.abs($(this).css("z-index") -1);
			$(this).css('z-index',newZ2);
			$("#bannerCaptionHeading").html(imageCaption);
			$("#bannerCaptionDates").html(captionDates);
			$("#bannerCaptionLink").html("<a href='" + infoLink + "'>More Info</a>")
		});
		$(divToFadeOut).fadeOut('slow', function(){
			newZ = Math.abs($(this).css("z-index") -1);
			$(this).css('z-index',newZ);
		});

	}).attr("src",imageFile);
}