// JavaScript Document

var imgs = ["images/galleryImage.jpg", "images/galleryImage2.jpg", "images/galleryImage3.jpg", "images/galleryImage4.jpg", "images/galleryImage5.jpg", "images/galleryImage6.jpg", "images/galleryImage7.jpg", "images/galleryImage8.jpg", "images/galleryImage9.jpg", "images/galleryImage10.jpg", "images/galleryImage11.jpg", "images/galleryImage12.jpg", "images/galleryImage13.jpg", "images/galleryImage14.jpg", "images/galleryImage15.jpg", "images/galleryImage16.jpg", "images/galleryImage17.jpg", "images/galleryImage18.jpg", "images/galleryImage19.jpg", "images/galleryImage20.jpg", "images/galleryImage21.jpg"];
            
var imageIndex = 0; //default image index

//The following code can be used to iterate over any length imgs array;
//This means you could dynamically add/delete images i.e.
//imgs[imgs.length] = "images/galleryImageX.jpg", and the code
//below will not require modification in order to iterate the array.

function next() {
	if (imageIndex + 1 <= imgs.length - 1) {
		document.getElementById("imagePath").src = imgs[++imageIndex];
	} else {
		imageIndex = 0;
		document.getElementById("imagePath").src = imgs[imageIndex];
	}

	document.getElementById("imageIndex").value = imageIndex+1;
	
}

function previous() {
	if (imageIndex - 1 >= 0) {
		document.getElementById("imagePath").src = imgs[--imageIndex];
	} else {
		imageIndex = imgs.length - 1;
		document.getElementById("imagePath").src = imgs[imageIndex];
	}
	
	document.getElementById("imageIndex").value = imageIndex+1;
}