// enter number of images
var numOfImages = 10;
var goForward = true;
var timer = 5000;

// slideshow starts here
function loadImages()
{
	document.getElementById('image-10').src="http://www.traciegrizzle.com/weddings/full-screen-01.jpg";
	document.getElementById('image-9').src="http://www.traciegrizzle.com/weddings/full-screen-02.jpg";
	document.getElementById('image-8').src="http://www.traciegrizzle.com/weddings/full-screen-03.jpg";
	document.getElementById('image-7').src="http://www.traciegrizzle.com/weddings/full-screen-04.jpg";
	document.getElementById('image-6').src="http://www.traciegrizzle.com/weddings/full-screen-05.jpg";
	document.getElementById('image-5').src="http://www.traciegrizzle.com/weddings/full-screen-06.jpg";
	document.getElementById('image-4').src="http://www.traciegrizzle.com/weddings/full-screen-07.jpg";
	document.getElementById('image-3').src="http://www.traciegrizzle.com/weddings/full-screen-08.jpg";
	document.getElementById('image-2').src="http://www.traciegrizzle.com/weddings/full-screen-09.jpg";
}

function start()
{
	myElement = document.getElementById("hide");	
	myElement.style.display = "inline";				// displaying all images after they load
	
	var t = setTimeout("opacityFade(1, 100, 0, 2000)", 3000); // fading 1st image out
	
	next(1); 	// calling function next() to fade out other images
}

// function next begins fading out the next image, my_id is the current image id
function next(my_id)
{	
	var t = 0;	
	my_id++;
	timer = timer + 5000; 	// timer seperates the opacityFade calls by 5000 millisecs per image
	
	if(goForward)			// continue slideshow forward until last image and then resetOpacity() and run again
	{	
		t = setTimeout("opacityFade("+ my_id +", 100, 0, 2000)", timer);	// fading out next image
		
		if(my_id == numOfImages - 1)	
		{
			goForward = false;	// stop going forward if reached the last image
		}
		
		next(my_id);	// go to next image
	}
	else	// have reached the last image
	{	
		if(timer > (numOfImages * 50000)) // ending loop after 10x (numOfImages * 5000 * 10)
		{
			return;
		}
		
		resetOpacity();	// reset all the opacities and start slideshow over from begining
	}
}

function resetOpacity()
{
	var i = 1;
	var myTimer = 0;
	
	var t = setTimeout("opacityFade(1, 0, 100, 2000)", timer);	// fade image-1 back in
	
	myTimer = timer + 3000; // increase opacity of all other images to 1, 1 sec after the 1st image
	
	for(i = 2; i < numOfImages; i++)
	{		
		t = setTimeout("opacityFade("+ i +", 0, 100, 500)", myTimer);	// reseting all opacities back to 1
	}
	
	goForward = true;	// reset goForward
	t = setTimeout("next(0)", 2000); // start slideshow over
}

// (elementID, 100 is full opacity, 0 is no opacity, transition speed), can go from 100 to 0 or 0 to 100 
function opacityFade(my_id, opacStart, opacEnd, millisec)
{
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
	
	id = "image-" + my_id;

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

// change opacity (100 max - 0 min, elementID)
function changeOpacity(opacity, id)
{
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}