// here are all the sub-arrays, containing the various attributes of each image.
// this will be dynamically generated from an xml file.
// this program uses two-dimensional arrays, allowing each image to have an unlimited number of attributes
// if this was used in a situation where photos needed more attributes (a URL to link to, photo credits, etc)



var image1 = Array();
image1["id"] = 1;
image1["image"] = "assets/images/gallery/frontpage/bat.png";
image1["caption"] = "";
image1["imagelink"] = "gallery/bat.html";

var image2 = Array();
image2["id"] = 2;
image2["image"] = "assets/images/gallery/frontpage/hedgehog.png";
image2["caption"] = "";
image2["imagelink"] = "gallery/hedgehog.html";

var image3 = Array();
image3["id"] = 3;
image3["image"] = "assets/images/gallery/frontpage/impatiens.png";
image3["caption"] = "";
image3["imagelink"] = "gallery/impatiens.html";

var image4 = Array();
image4["id"] = 4;
image4["image"] = "assets/images/gallery/frontpage/kidney.png";
image4["caption"] = "";
image4["imagelink"] = "gallery/kidney.html";

var image5 = Array();
image5["id"] = 5;
image5["image"] = "assets/images/gallery/frontpage/nepenthes.png";
image5["caption"] = "";
image5["imagelink"] = "gallery/nepenthes.html";


// here's the master array, which keeps track of the sub-arrays.

var gallery_images = new Array();
gallery_images[0] = image1;
gallery_images[1] = image2;
gallery_images[2] = image3;
gallery_images[3] = image4;
gallery_images[4] = image5;

// get the length of the master array of images (not the subarray), 
// so we known when we've gone past the end

var number_of_images = gallery_images.length;

// Arrays are zero-indexed, but array lengths aren't. Subtract one from the length of the master array to make up for this.

number_of_images--;




function display_image(image_to_display)
{
	// image_to_display is the number that references an image subarray in the master array.

	var currently_displayed = image_to_display;

	/* Up next: the attributes area. This gets the attributes for the particular image to be displayed.
	   To add a new one (say, a photo credit), add the line:
	   var credit = gallery_images[currently_displayed]["credit"];	
	   just make sure that "credit" is what you've named the attribute in the XML file.
	
	   So these two lines grab the image and caption elements from the subarray whose number in the
	   master array is the value contained by currently_displayed */

	var image = gallery_images[currently_displayed]["image"];
	
	var caption = gallery_images[currently_displayed]["caption"];	
	var imagelink = gallery_images[currently_displayed]["imagelink"];	
	
	// next, locate the gallery image and change its src to the new image
	
	var displayed_image = document.getElementById("currently_displayed");
	displayed_image.src = image;
	
	// and change its link
	
	document.getElementById("image_link").href = imagelink;
	
	// and reset the caption, too.
	
	var caption_box = document.getElementById("caption");
	caption_box.innerHTML = caption;

}

function go(d)
{
	/* This function accepts "prev" or "next" as a parameter.
	   It then grabs the number of the currently displayed image (whatever's in the current_image text field)
	   and calculates the number of the  next (or previous) image. 
	   Once again, these numbers refer to the image subarrays stored in the master array.
	*/
	
	direction = d;
	
	if (d=="next") // the user has clicked on the "next" button
	{
		// first get what's onscreen right now
		var currently_displayed = document.getElementById("current_image").value;
		var next_image = currently_displayed;

		// so now we've got the number of the current image. Increment it to move up the master array, to the next image.
		next_image++;
		// alert(next_image);

		// if we've gone past the end (if the number of the next image is greater than the total number of images in the array)
		// then wrap to the very beginning
		if (next_image > number_of_images) next_image = "0";
		
		// finally, now that we've calculated our number, update the image, caption, etc
		display_image(next_image);

		// and update the current_image field so the program knows what's currently onscreen
		document.getElementById("current_image").value = next_image;
	}

	else if (d=="prev") // get the previous image and caption
	{
		// this is what's onscreen right now
		var currently_displayed = document.getElementById("current_image").value;
		var prev_image = currently_displayed;
		
		
		
		prev_image--;

		// if the previous image is less than zero, we've gone off the deep end
		// so wrap to the last image in the array
		if (prev_image < 0) prev_image = number_of_images;
				
		// finally, now that we've calculated our number, update the image, caption, etc
		display_image(prev_image);



		// update the current_image field
		document.getElementById("current_image").value = prev_image;

	}

}


function set_caption_box()
{
	var caption_box = document.getElementById("caption");
	caption_box.innerHTML = "text text text";	
}

function choose_random_image(images)
{
	images = ++images; // increment, since the random function returns a value between 0 and one less than the images variable
	var random_image = Math.floor(Math.random()*images); // get the number
	display_image(random_image);
}