var selImageNum = 0;
var timerID;

/**
* Show picture
*/
function showPic(divID)
{
	$("#" + divID).fadeIn();
}

/**
* Hide picture
*/
function hidePic(divID)
{
	$("#" + divID).hide();
}

/**
* Start playing the slideshow
*/
function playSlideshow()
{
	// display active Play button
	$("#btnPlay").attr({src: baseURL + "/img/btn/play_sel.gif"});
	
	// display inactive Pause button
	$("#btnPause").attr({src: baseURL + "/img/btn/pause.gif"});
	
	// begin slideshow
	nextImage();
}

/**
* Stop playing the slideshow
*/
function pauseSlideshow()
{
	// display active Pause button
	$("#btnPause").attr({src: baseURL + "/img/btn/pause_sel.gif"});
	
	// display inactive Play button
	$("#btnPlay").attr({src: baseURL + "/img/btn/play.gif"});
	
	// stop slideshow from running
	clearTimeout(timerID);
}

/**
* Advance to the next image in the slideshow
*/
function nextImage()
{	
	var oldImageNum = selImageNum;
	
	if (selImageNum == (imageCount - 1))
	{
		selImageNum = 0;
	
	} else {
		
		selImageNum++;
	}
	
	// hide old image
	hidePic("slide_image" + oldImageNum);
	
	// highlight the corresponding thumbnail
	highlightThumb("thumb" + selImageNum);
	
	// show new image
	showPic("slide_image" + selImageNum);
	
	// rotate next image
	var recur_call = "nextImage()";
	
	timerID = setTimeout(recur_call, 3000);
}

/**
* highlight selected thumbnail image
*/
function highlightThumb(divID)
{
	// remove border from previously selected thumbnail
	$(".selThumb").removeClass("selThumb");
	
	// add border to newly selected thumbnail
	$("#" + divID).addClass("selThumb");
}

/**
* perform actions when thumbnail is clicked
*/
function selThumb(selKey)
{
	// hide selected picture
	hidePic('slide_image' + selImageNum);
	
	// highlight new thumbnail
	highlightThumb('thumb' + selKey);
	
	// show new picture
	showPic('slide_image' + selKey);
	
	// pause the slideshow
	pauseSlideshow(baseURL);
	
	// set newly selected pic to global variable
	selImageNum = selKey;
}