var imgArray = new Array();
var imgNum = 0;

var numSlides = document.getElementById("num_slides").value;
var interval = document.getElementById("delay_seconds").value * 1000;
var imgDir = document.getElementById("slide_dir").value;

for(var i=0; i<numSlides; i++) {
	var slide = new Image();
	slide.src = imgDir + "slide" + (i+1) + ".jpg"; 
	imgArray.push(slide);
}

runSlideShow();

function runSlideShow() {

	var oldImage = document.getElementById("bottomImg").src
	var newImage = imgArray[imgNum++].src;

	document.getElementById("topImg").src = oldImage;
	changeOpac(100, "topImg");
	document.getElementById("bottomImg").src = newImage;

	fade('topImg', 100, 0, 1000);			
	fade('bottomImg', 0, 100, 1000);

	if(imgNum % numSlides == 0) {
		imgNum = 0;
	}

	var recur_call = "runSlideShow()";
	timerID = setTimeout(recur_call, interval);
}

function fade(id, opacStart, opacEnd, millisec) {
    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(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}