// set the starting image.
var i = 0;

// The array of div names which will hold the images.

// The number of images in the array.
var NumOfImages = image_slide.length;

// Variable pel setInterval
var play;

// The time to wait before moving to the next image. Set to 4 seconds by default.
var wait = 5000;

// The Fade Function
function SwapImage(x,y) {
	$(image_slide[x]).appear({ duration: 0.5 });
	$(image_slide[y]).fade({duration: 0.5});
}

// the onload event handler that starts the fading.
function StartSlideShow() {
	play = setInterval('Play()',wait);
	$('PlayButton').hide();
	$('PauseButton').appear({ duration: 0});

	updatecounter();

}

function Play() {
	var imageShow, imageHide;

	imageShow = i+1;
	imageHide = i;

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

	var textIn = i+1 + ' of ' + NumOfImages;
	updatecounter();
}

function Stop () {
	clearInterval(play);
	$('PlayButton').appear({ duration: 0});
	$('PauseButton').hide();
}

function GoNext() {
	clearInterval(play);
	//$('PlayButton').appear({ duration: 0});
	//$('PauseButton').hide();

	var imageShow, imageHide;

	imageShow = i+1;
	imageHide = i;

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

	updatecounter();
}

function GoPrevious() {
	clearInterval(play);
	//$('PlayButton').appear({ duration: 0});
	//$('PauseButton').hide();

	var imageShow, imageHide;

	imageShow = i-1;
	imageHide = i;

	if (i == 0) {
		SwapImage(NumOfImages-1,imageHide);
		i = NumOfImages-1;

		//alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)

	} else {
		SwapImage(imageShow,imageHide);
		i--;

		//alert(imageShow + ' and ' + imageHide)
	}

	updatecounter();
}

function GoItem(item) {
    var imageShow, imageHide;

    if(item != i ){
        SwapImage(item, i);
        i = item;
    }

    updatecounter();

    Stop();

}


function updatecounter() {
	var textIn = i+1 + ' of ' + NumOfImages;

	for(var j=0;j<=(NumOfImages-1);j++){
	    if(j == i){
            $('boto_'+j).update('<img src="../img/cercle_slide_punt.png" border="0" />');
	    } else {
	        $('boto_'+j).update('<img src="../img/cercle_slide.png" border="0" />');
	    }
	}
	//document.getElementById('Counter').innerHTML = textIn;
}