var index=0;
var totalItems;
var a,b,c,d;

var delayStayOnImage = 6000; //how long the image will stay on the screen after it has been faded in
var delayWhiteImage = 1500; //how long the screen will stay completely transparent between the fade out of one image and the fade in of another
var startOpacity = 0; //set the value (0-100) of the value of the opacity you would like to start with (0=transparent, 100=completely opaque)
var endOpacity = 100; //set the value (0-100) of the value of the opacity you would like to end with (0=transparent, 100=completely opaque)
var transparentToOpaqueSpeed = 1000; //set the speed in which the selection goes from transparent to opaque (smaller number = faster)
var opaqueToTransparentSpeed = 1000; //set the speed in which the selection goes from transparent to opaque (smaller number = faster)

function setVars(total) {
	totalItems = total;
	startFade();
}

function increment() {
	clearTimeout(a);
	clearTimeout(b);
	clearTimeout(c);
	clearTimeout(d);
	index++;	
	if (index>=totalItems) {
	    index=0;
	}
	startFade();	
}

function decrement() {
	clearTimeout(a);
	clearTimeout(b);
	clearTimeout(c);
	clearTimeout(d);
	index--;
	if (index<=0) {
	    index=totalItems-1;
	}
	startFade();	
}

function choosestory(elementToShow) {
	clearTimeout(a);
	clearTimeout(b);
	clearTimeout(c);
	clearTimeout(d);
	//index=0;
	//if (index>=totalItems) {
	    index=elementToShow;
	//}
	startFade();	
}

function startFade() {
	if (index>=totalItems) {
	    index=0;
	}
	//first thing we need to do is turn the opacity of the new image to 0 then turn on its display
    document.getElementById(index).style.opacity = 0; 
    document.getElementById(index).style.MozOpacity = 0; 
    document.getElementById(index).style.KhtmlOpacity = 0; 
    document.getElementById(index).style.filter = "alpha(opacity=0)"; 
	
	for (k=0; k<=totalItems-1; k++) {
		if (index == k) {
			document.getElementById(k).style.display = 'block';
		} else {
			document.getElementById(k).style.display = 'none';
		}
	}

	opacity(index, startOpacity, endOpacity, transparentToOpaqueSpeed);
	//after this method is done, the image will be completely faded in
	a = setTimeout("endFade()",delayStayOnImage);
}

function endFade() {
	opacity(index, endOpacity, startOpacity, opaqueToTransparentSpeed);
	//after this method is done, the image will be completely faded out
	index++;
	b = setTimeout("startFade()",delayWhiteImage);
}

function opacity(id, opacStart, opacEnd, millisec) { 
    //speed for each frame 
    var speed = Math.round(millisec / 100); 
    var timer = 0; 

    //determine the direction for the blending, if start and end are the same nothing happens 
    if(opacStart > opacEnd) { 
        for(j = opacStart; j >= opacEnd; j--) { 
            c = setTimeout("changeOpac(" + j + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    } else if(opacStart < opacEnd) { 
        for(j = opacStart; j <= opacEnd; j++) 
            { 
            d = setTimeout("changeOpac(" + j + ",'" + id + "')",(timer * speed)); 
            timer++; 
        } 
    }
} 

function changeOpac(opacity, id) { 
    document.getElementById(id).style.opacity = (opacity / 100); 
    document.getElementById(id).style.MozOpacity = (opacity / 100); 
    document.getElementById(id).style.KhtmlOpacity = (opacity / 100); 
    document.getElementById(id).style.filter = "alpha(opacity=" + opacity + ")"; 
}