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 loadNewThumbnail(thumbnail,tTitle,lLink)
{
	// document.getElementById("featuredimg");
	var featuredimg = $('featuredimg');
	var loaderHtml = '<div style="text-align: center; width: 446px; height:249px; background-color: black;">'+
	'<img style="margin-top:20%;" src="http://www.earthcam.com/mapsearch_google/images/loading_screen.gif"></div>';
	
	var newThubnailHtml = 
	"<div id='featuredImgBox' style='float:left;'>"+
	"<a id='featuredimglink' href='"+lLink+"' target='_blank'>"+
	"<img id='featuredimg' src='"+thumbnail+"' alt='"+tTitle+"' title='"+tTitle+"' />"+
	"</a>"+
	"</div>";
	
	$('#featuredImgBox').html(loaderHtml);
	//$('#featuredImgBox').html(newThubnailHtml);
}
*/

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_wide'];

	
	/****************************************************/
	var loaderHtml = '<div style="text-align: center; width: 446px; height:249px; background-color: black;">'+
	'<img style="margin-top:20%;" src="/mapsearch_google/images/loading_screen.gif"></div>';
	
	var newThubnailHtml = 
	"<div id='featuredImgBox' style='float:left;'>"+
	"<a id='featuredimglink' href='"+top25Array[id]['link']+"' target='_blank'>"+
	"<img id='featuredimg' src='"+top25Array[id]['image_wide']+"' alt='"+top25Array[id]['title']+"' title='"+top25Array[id]['title']+"' />"+
	"</a>"+
	"</div>";
	
	//$('#featuredImgBox').html(loaderHtml);
	//$('#featuredImgBox').html(newThubnailHtml);

/*
	img = new Image();
	img.src = top25Array[id]['image_wide'];
	$(img).hide();
*/
	$('#featuredimg').attr('src', 'images/loader.jpg');
	//$('#featuredImgBox').html(loaderHtml);
	
	$('#featuredimg')
	.attr('src', top25Array[id]['image_wide'])
	// once the image has loaded, execute this code
	.load(function () {
	   //$('#featuredimg').attr('src', top25Array[id]['image_wide']);
	   //$('#featuredImgBox').html(newThubnailHtml);
	 })
	 .show();
	
	 //.attr('src', top25Array[id]['image_wide']);
	 
	//$('#featuredimg').fadeIn();
	//$('#featuredImgBox').html(loaderHtml);

	/****************************************************/
	
	
	// large main image
	featuredImgObject.alt			= top25Array[id]['title'];
	featuredImgObject.title			= top25Array[id]['title'];
	featuredImgLinkObject.href		= top25Array[id]['link'];
	
	featuredLinkObject.href			= top25Array[id]['link'];
	featuredLinkObject.innerHTML	= top25Array[id]['title'];
	
	featuredLocationObject.innerHTML =  ""+top25Array[id]['location']+"";
	//featuredDescriptionObject.innerHTML = "&nbsp;-&nbsp;"+top25Array[id]['description'];
	featuredDescriptionObject.innerHTML = "<p>"+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"+id);
	var imgObject		= $("#img"+id);
	var defaultZindex	= top25_Zindex[id]
	//var currentZindex	= divElement.style.zIndex;

	var initialZ = divElement.css("z-index");
		
	if (hoverstate == 1)// mouseover, i.e. on
	{
		imgObject.src = top25Array[id]['image_on'];
		//divElement.style.zIndex = "1000";
		divElement.css("z-index","1000");
		
		//we don't want it staying at 1000 if the element is the current selected one
		if(id == selectedID)
			divElement.css("z-index","500");
			//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;
			divElement.css("z-index",defaultZindex);
		}
	}

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