var sImgOnID = '';
var iImgID = 0;

$(document).ready(function() {
	$("#nojava").hide();
	$("#sscontrols").show();
	$("#slideshow").show();
	setImg("ss_1", slideshow[0]);
	sImgOnID = 'ss_1';
	iImgID = 0;
	
	$("#ssprev").addClass('control').bind('click', previousPhoto);
	$("#ssnext").addClass('control').bind('click', nextPhoto);
	$("#ssplaypause").addClass('control').bind('click', playPhotos);

});

//here we bind the click event for the control buttons to their repsective functions.

function setImg(sID, oImg) {
	$('#' + sID + ' img').attr('width', oImg.width);
	$('#' + sID + ' img').attr('height', oImg.height);
	$('#' + sID + ' img').attr('alt', oImg.title);
	$('#' + sID + ' img').attr('title', oImg.title);
	$('#' + sID + ' img').attr('src', 'images/' + oImg.file + '.jpg');
	var left = Math.floor((400 - oImg.width - 20) / 2);
	$('#' + sID).css('left', left + 'px');
	

}


// Above we define the setImg function, attributing the images height, width,title and tell thefinction where to pull the images from. We also ensure the images are centered using the left variable.

function previousPhoto() {
	changeImg(-1);
}

function nextPhoto() {
	changeImg(1);
}

function playPhotos() {
	$("#ssplaypause").attr('src', 'images/pause_button.jpg').attr('alt', 'Pause').attr('title', 'Pause');
	$("#ssplaypause").unbind('click').bind('click', pausePhotos);
	changeImg(1);
	oPlay = setInterval("changeImg(1)", 2500);
	}

function pausePhotos() {
	$("#ssplaypause").attr('src', 'images/play_button.jpg').attr('alt', 'Play').attr('title', 'play');
	$("#ssplaypause").unbind('click').bind('click', playPhotos);
	clearInterval(oPlay);
}
//The control functions are defined here, we instruct the buttons to either move through thei mages +1 or -1, we elaos enable the swtich beteen the play and paus buttons on click
	
	
	
	
function changeImg(iOffset) {

	iImgID = (iImgID + iOffset) % slideshow.length;
	if (iImgID < 0) {
		iImgID = slideshow.length + iImgID;
	}
	var oImg = slideshow[iImgID];
	
	var imgOn = "ss_1";
	var imgOff = "ss_2";
	if (sImgOnID == "ss_2") {
		imgOn = "ss_2";
		imgOff = "ss_1";
	}
	
	setImg(imgOff, oImg);
	
	sImgOnID = imgOff;
	
	$('#' + imgOff).fadeIn('slow');
	$('#' + imgOn).fadeOut('slow',function() {
		imgOff = "ss_2";
		if (sImgOnID == "ss_2") {
			imgOff = "ss_1";
		}
		
		$('#' + imgOff + ' img').attr('width', oImg.width);
		$('#' + imgOff + ' img').attr('height', oImg.height);
		$('#' + imgOff + ' img').attr('alt', oImg.title);
		$('#' + imgOff + ' img').attr('title', oImg.title);
		$('#' + imgOff + ' img').attr('src', 'images/' + oImg.file + '.jpg');
		var left = Math.floor((548 - oImg.width - 20) / 2);
		$('#' + imgOff).css('left', left + 'px');
	});
}
/*   This function defines the change over of the images allowing them to run through the images defined in the slideshow array as defined in show_files.js. 
  We switch between the images using the imnOn and imgOff variables, the switch will fade in or outs using 'slow'      */



function swapImg(fnCallback) {
	var imgOn = "ss_1";
	var imgOff = "ss_2";
	if (sImgOnID == "ss_2") {
		imgOn = "ss_2";
		imgOff = "ss_1";
	}
	
	sImgOnID = imgOff;
	
	$('#' + imgOff).fadeIn('slow');
	$('#' + imgOn).fadeOut('slow', fnCallback);
	
}