function nextCam() {
	var id_next = selectedID+1;
	if(id_next > 24)
		id_next = 0;
	swap(id_next);
}//end nextCam()


function prevCam() {
	var id_prev = selectedID-1;
	if(id_prev < 0)
		id_prev = 24;
	swap(id_prev);
}//end prevCam()

function swap(id) {
	// Grab current selected objects
	var selectedDivObject			= document.getElementById("div".concat(selectedID));
	var selectedImgObject			= document.getElementById("img".concat(selectedID));
	var selectedDefaultZindex		= top25_Zindex[selectedID]
	
	// Grab the objects of the thumb the user just clicked on
	var defaultZindex				= top25_Zindex[selectedID]
	var divObject					= document.getElementById("div".concat(id));
	var imgObject					= document.getElementById("img".concat(id));
	var featuredImgObject			= document.getElementById("featuredimg");
	var featuredImgLinkObject		= document.getElementById("featuredimglink");
	var featuredLinkObject			= document.getElementById("featuredlink");
	//var featuredLocationObject		= document.getElementById("featuredlocation");
	var featuredDescriptionObject	= document.getElementById("featureddescription");
	var featuredViewLinkObject		= document.getElementById("featuredviewlink");
	
	//var divElement					= $("div".concat(id));
	var defaultZindex				= top25_Zindex[id]
	
	// Steal focus from the link as it messes with the look of the border a little - "featuredlink" is the link to the cam in the featured box
	document.getElementById("featuredlink").focus();

	
	// Turn off the current selected object that was previously active
	if(selectedDivObject.className.indexOf("LargeThumb") != -1)
		selectedDivObject.className = "LargeThumb";
	else if(selectedDivObject.className.indexOf("MediumThumb") != -1)
		selectedDivObject.className = "MediumThumb";
	else if(selectedDivObject.className.indexOf("SmallThumb") != -1)
		selectedDivObject.className = "SmallThumb";
		
	selectedImgObject.src			= top25Array[selectedID]['image_off'];
	selectedDivObject.style.zIndex	= selectedDefaultZindex;
	
	// Select the current object that the user just clicked on
	divObject.className				+= " selected";
	imgObject.src					= top25Array[id]['image_on'];
	divObject.style.zIndex			= "500";
	
	//alert("clicked element z-index: "+divObject.style.zIndex);
	
	// Update Featured Cam info
	//featuredImgObject.src			= top25Array[id]['image_on'];
	featuredImgObject.src			= top25Array[id]['image_wide'];
	featuredImgObject.alt			= top25Array[id]['title'];
	featuredImgObject.title			= top25Array[id]['title'];
	featuredLinkObject.href			= top25Array[id]['link'];
	featuredImgLinkObject.href		= top25Array[id]['link'];
	featuredLinkObject.innerHTML	= top25Array[id]['title'];
	
	//featuredLocationObject.innerHTML =  "<i>"+top25Array[id]['location']+"</i>";
	//featuredDescriptionObject.innerHTML = "&nbsp;-&nbsp;"+top25Array[id]['description'];
	featuredDescriptionObject.innerHTML = "<p><span id=\"locationText\">"+top25Array[id]['location']+"</span>&nbsp;-&nbsp;"+top25Array[id]['description']+"</p>";
	
	featuredViewLinkObject.href		= top25Array[id]['link'];

	
	//Set selectedID to current id
	selectedID = id;
	
	// Empty object vars
	selectedDivObject				= null;
	selectedImgObject				= null;
	divObject						= null;
	imgObject						= null;
	featuredImgObject				= null;
	featuredImgLinkObject			= null;
	featuredLinkObject				= null;
	featuredLocationObject			= null;
	featuredDescriptionObject		= null;
	featuredViewLinkObject			= null;
}//end swap()



/****************************************************************

These two functions below are now folded into mouseOverOut.
I've left them here for reference.
*/
function mouseover(id)
{
	var imgObject = document.getElementById("img".concat(id));
	imgObject.src = top25Array[id]['image_on'];
	imgObject = null;
}//end mouseover()

function mouseout(id)
{
	var imgObject = document.getElementById("img".concat(id));
	if(id != selectedID)
		imgObject.src = top25Array[id]['image_off'];
	imgObject = null;
}//end mouseout()
/***************************************************************/


// 1 for on, 0 for off
function mouseOverOut(id,hoverstate)
{
	var divElement		= $("div".concat(id));
	var imgObject		= $("img".concat(id));
	var defaultZindex	= top25_Zindex[id]
	//var currentZindex	= divElement.style.zIndex;

	var initialZ = divElement.style.zIndex;
		
	if (hoverstate == 1)// mouseover, i.e. on
	{
		imgObject.src = top25Array[id]['image_on'];
		divElement.style.zIndex = "1000";
		
		//we don't want it staying at 1000 if the element is the current selected one
		if(id == selectedID)
			divElement.style.zIndex = "500";
	}
	else // mouseout, i.e. off
	{
		if(id != selectedID)// check to see if the element is already the current selected thumb
		{
			imgObject.src = top25Array[id]['image_off'];
			divElement.style.zIndex = defaultZindex;
		}
	}

	
	var endingZ = divElement.style.zIndex;
	$("_debug").innerHTML = "intial z-index: "+initialZ+" <br /> ending z: "+endingZ;
	
	imgObject = null;
	divElement = null;
}//end mouseOverOut()