/*This function will, when called using onclick="return showImage(this)" on a link tag to an image,
	 *intecept the link and load the image linked to in mainimg <img> tag, returning false
	 *so the browser does not actually follow the link
	 *
	 * It will also load the details from the dl tag and move them to the space below the big picture*/

	function showImage(link)
	{		
		//Get the number of the image being linked to
		linktxt = link.href;
		startofimagename = linktxt.lastIndexOf("/")
		imagename = linktxt.substring(startofimagename+1, linktxt.length);

		mainimage = document.getElementById("mainimg")
		mainimage.src=imagename;
		//Also, display the image, as it defaults to hidden in the css.
		mainimage.style.display="block";		
		
		//Also also, get the text from the containing definition list's dd tag
		//Format is <dl><a><img></a><dt>Shortdesc</dt><dd>Longdesc</dd></dl>
		//Since we have the link, a, we just need to  go up one notes to the dl, 
		//then grab the dd
		dlist = link.parentNode;
		
		//Ok, now find the DD node.
		for(i = 0; i < dlist.childNodes.length; i++)
		{
			longdesc = dlist.childNodes.item(i)
			if(longdesc.nodeName.toUpperCase() == "DD")
			{
				break;
			}
		}		
		//If it can't be found, then there is no long description to copy.
		if(longdesc.nodeName.toUpperCase() != "DD")
		{
			return false;
		}
				
		//If it can be found, copy the text from the dd element to the div tag beneath the image.
		longdesctxt = longdesc.innerHTML;
		mainimagetxt = document.getElementById("mainimgtxt");
		mainimagetxt.innerHTML = longdesctxt;
		
		return false;
	}
	
	
	//Loads the first image into the main image box, if one is suppled.
	//The index of the image to load is appended to the page URL with a question mark,
	//faking a server-side get. E.G. http://www.ccaurora.edu/thispage?1 (loads the first image)
	//http://www.ccaurora.edu/thispage?2 (loads the second instead)
	
	function loadFirstImage()
	{
		
		//Get the index of the image to load
		thisurl = location.href;
		startofimgindex = thisurl.lastIndexOf("?");
		endofimgindex = thisurl.lastIndexOf("#");		
		if(endofimgindex == -1) {endofimgindex = thisurl.length	}		
		imgindex = thisurl.substring(startofimgindex+1, endofimgindex)*1; //*1: converts to a number 
		
		//Now we have to find the image, or more specifically the anchor tag holding it.
		//Once that has been located, it can be passed to the showImage function above, 
		//as though the user had clicked on it.
		
		//The image list is in this structure:
		// <div><dl><a><img></a><dt></dt><dd></dt></dl><dl> .... </dl><dl>...</dl><dl>...</dl></div>
		
		//First, find the div tag that contains the list of images
		thediv = document.getElementById("longimagelist")
		
		//Now get the appropriate definition list, going by the given index.
		thedl = getChildByType(thediv,"dl",imgindex);
		if(thedl == 0) return 0; //If invalid, ignore.		
		
		//Then get the anchor tag 
		atag = getChildByType(thedl,"a",1)
		if(atag == 0) return; //If no anchor tag was found, there's something wrong. Abort.
		

		//Pass the anchor tag to the showImage function, above.
		showImage(atag)	
		
		//Finally, once the image is loaded, scroll down so it can be seen. 
		//(Only do this for the first image, otherwise it gets annoying)
		if(document.getElementById("mainimg").complete && document.getElementById("mainimg").complete == true)
		{
			scrolltoviewfunction();
		}
		else
		{
	 		document.getElementById("mainimg").onload = scrolltoviewfunction
	 	}
	}
	
	
	function scrolltoviewfunction()
	{
		document.getElementById("mainimgtxt").scrollIntoView(true);	
		//Only do once.
 		document.getElementById("mainimg").onload = null;
	}	

/*This function will get a child node of the given name from
 *a parent node. (A node is the code equivalent of an HTML tag. A child node is a tag in a tag).
 *parent should be a valid node capable of having childred (so not #text)
 *nodetype should be a string of the node name, which will match the HTML tag, e.g. DIV for <div> tags
 *Since there may be more than one node of a given name under the parent, index states
 *which to get. It is 1 based, so an index of 0 is undefined.
 *
 * This function returns the node object if one is found, or 0 if the there were no nodes of that name, or
 * not enough to satisfy the requirement given in the index.
 *
 *Example of use:
 * If in the HTML document there exists <div id="adiv"> <a>lalalal</a> <a>wimwimwim</a> </div>
 * You might call getChildByType(myDiv, "a", 1) to return the anchor node with the lalala innerHTML, and
 * getChildByType(myDiv, "a", 2) to return the wimwimwim anchor node. 
 * getChildByType(myDiv, "a", 3) would return 0.
 * myDiv in the above examples would be the div node object, 
 * such as you might obtain by document.getElementById("adiv").
 * 
 */
	function getChildByType(parent, nodetype, index)
	{
		childnode = 0;
		found = 0;
		for(i = 0; i < parent.childNodes.length; i++)
		{
			if(parent.childNodes.item(i).nodeName.toUpperCase() == nodetype.toUpperCase())
			{
				found++;
				if(found == index)
				{
					childnode = parent.childNodes.item(i);
					break;
				}
			}
		}
		return childnode;
	}