var i = 0; // set the starting image.
var wait = 5000; // The time to wait before moving to the next image. Set to 3 seconds by default.
var play = null; // The interval
var slide_status = 0; // The current status

// The Fade Function
function SwapImage(x,y) {	
	$('slide-' + x).appear({ duration: 1.0 });
	$('slide-' + y).fade({ duration: 1.0 });

	$('slide_thumbs_' + x).addClassName('activo');
	$('slide_thumbs_' + y).removeClassName('activo');
}

// the onload event handler that starts the fading.
function StartSlideShow() {
	if(slide_status == 0) {
		slide_status = 1;
		clearInterval(play);
		play = setInterval('Play()',wait);
		$('slide_btn_play').addClassName('activo');
		$('slide_btn_stop').removeClassName('activo');
	}
}

function Play() {
	$('slide_btn_play').addClassName('activo');
	$('slide_btn_stop').removeClassName('activo');

	var imageShow, imageHide;

	imageShow = i+1;
	imageHide = i;

	if(imageShow == NumOfImages) {
		SwapImage(0,imageHide);
		i = 0;				
	} else {
		SwapImage(imageShow,imageHide);
		i++;	
	}
}

function StopSlideShow() {
	slide_status = 0;
	clearInterval(play);
	$('slide_btn_play').removeClassName('activo');
	$('slide_btn_stop').addClassName('activo');
}

function GoNext() {
/*
	clearInterval(play);
	$('slide_btn_play').removeClassName('activo');
	$('slide_btn_stop').addClassName('activo');
*/
	StopSlideShow();
	
	var imageShow, imageHide;

	imageShow = i+1;
	imageHide = i;
	
	if(imageShow == NumOfImages) {
		SwapImage(0,imageHide);	
		i = 0;					
	} else {
		SwapImage(imageShow,imageHide);			
		i++;
	}
}

function GoPrevious() {
/*
	clearInterval(play);
	$('slide_btn_play').removeClassName('activo');
	$('slide_btn_stop').addClassName('activo');
*/
	StopSlideShow();

	var imageShow, imageHide;
				
	imageShow = i-1;
	imageHide = i;
	
	if(i == 0) {
		SwapImage(NumOfImages-1,imageHide);	
		i = NumOfImages-1;		
	} else {
		SwapImage(imageShow,imageHide);			
		i--;
	}
}