/**
 * @author Neil Walden
 */
 
	/**
	 *	Create a new SlideShow Object
	 *	@param playerName The name of the variable the player is stored in
	 *	@param imgId The id of the img object dislaying the slideshow
	 *	@param imageArray An array of image names in the order to display them
	 *	@param folder The folder the images are stores in (include the trailing / )
	 *	@param playButton The id of the object to place the play button in
	 */
function obj(id)
{
	return document.getElementById(id);
}	


	 function SlideShow(playerName, imageArray, folder, captions) {
		this.playerName = playerName;
		this.captions = captions;
		this.imgId = playerName+'_img';
		this.imageArray = imageArray;
		this.folder = folder;
		this.currentImageIndex = 0;
		this.timerId = 0;
		this.playButton = playerName+'_playbutton';
		this.controlsDiv = playerName+'_controls';
		this.interval = 2000;
		
		// Initialise the image
		document.getElementById(this.imgId).src = this.folder+this.imageArray[0];
		
		// Initialse Controls
		this.setControlsHTML();	
	}
	

	
	SlideShow.prototype.changeSpeed = function(speed) {
		this.interval = speed;		
		this.pause();
		this.play();
	}
	
	SlideShow.prototype.setControlsHTML = function() {
		var controlHTML = "";
		controlHTML += '<table style="width:100%;">';
		controlHTML += '<tr><td style="text-align: left;width: 200px;" colspan="3" id="'+this.playerName+'_slidenumber"></td>';
		controlHTML += '<td style="text-align: center;"><img onclick="'+this.playerName+'.prevSlide();" src="images/player_rew.jpg" alt="" title="Previous Slide" /></td>';	
		controlHTML += '<td style="text-align: center;" id="'+this.playerName+'_playbutton">'+this.getPlayButtonHTML()+'</td>';
		controlHTML += '<td style="text-align: center;"><img onclick="'+this.playerName+'.nextSlide();" src="images/player_fwd.jpg" alt="" title="Next Slide" /></td>';
		controlHTML += '<td style="text-align: center;width 50px;">&nbsp;</td>';
		controlHTML += '</tr>';
		controlHTML += '</table>';
			
		obj(this.controlsDiv).innerHTML  = controlHTML;
		this.updateSlideNumberCaption();
	}
	
	SlideShow.prototype.getPlayButtonHTML = function() {
		return '<img onclick="'+this.playerName+'.play();" src="images/player_play.jpg" alt="" title="Play Slideshow" />';
	}

	SlideShow.prototype.getPauseButtonHTML = function() {
		return '<img  onclick="'+this.playerName+'.pause();" src="images/player_pause.jpg" alt="" title="Pause Slideshow" />';
	}

	/**
	 *	Display the next slide in the sequence
	 */
	SlideShow.prototype.nextSlide = function() {
		this.currentImageIndex++;
		
		if(this.currentImageIndex >= this.imageArray.length) 
			this.currentImageIndex = 0;

		obj(this.imgId).src = this.folder+this.imageArray[this.currentImageIndex];
		this.updateSlideNumberCaption();
	}
	
	SlideShow.prototype.updateSlideNumberCaption = function() {
		obj(this.playerName+'_slidenumber').innerHTML = '<b>'+this.captions[this.currentImageIndex]+'</b>';
	}

	/**
	 *	Display the previous slide in the sequence
	 */
	SlideShow.prototype.prevSlide = function() {
		this.currentImageIndex--;
		
		if(this.currentImageIndex < 0) 
			this.currentImageIndex = this.imageArray.length - 1;

		obj(this.imgId).src = this.folder+this.imageArray[this.currentImageIndex];
		this.updateSlideNumberCaption();
	}

	SlideShow.prototype.play = function() {
		obj(this.playButton).innerHTML = this.getPauseButtonHTML();
		this.timerId = setInterval (this.playerName+".nextSlide();", this.interval);
	}
	
	SlideShow.prototype.pause = function(){
		obj(this.playButton).innerHTML = this.getPlayButtonHTML();
		clearInterval(this.timerId);
	}