/****************************************************************************
 * Image slide show for Central Coast Gymnastics Home Page.  Shows 5 images
 * found in the images/Slidepics folder named img1.jpg, img2.jpg, etc.  
 *
 * Created by: Jonathan Thomassian
 * Modified by: Dana Desrosiers 11/4/09 
 * 			- removed timeSlideshow() function making slideshowarray global.  
 * 			- Used setInterval() instead of setTimeout()
 * 			- Added changeto() function
 * 			- Increase array size to 7
 ****************************************************************************/
var timedisplayed = 5000;
var timefadeinout = 1750;
var slideshowarray = new Array(8);
var j = 0;

slideshowarray[0] = new Image(400,300);
slideshowarray[0].src = "images/Slidepics/img1.jpg";
slideshowarray[1] = new Image(400,300);
slideshowarray[1].src = "images/Slidepics/img2.jpg";
slideshowarray[2] = new Image(400,300);
slideshowarray[2].src = "images/Slidepics/img3.jpg";
slideshowarray[3] = new Image(400,300);
slideshowarray[3].src = "images/Slidepics/img4.jpg";
slideshowarray[4] = new Image(400,300);
slideshowarray[4].src = "images/Slidepics/img5.jpg";
slideshowarray[5] = new Image(400,300);
slideshowarray[5].src = "images/Slidepics/img6.jpg";
slideshowarray[6] = new Image(400,300);
slideshowarray[6].src = "images/Slidepics/img7.jpg";
slideshowarray[7] = new Image(400,300);
slideshowarray[7].src = "images/Slidepics/img8.jpg";

var timerId = setInterval('timedLoop()', timedisplayed);
	
/***********************************************************************************
 * Change the picture in the slideshow to slideshowarray[k] without fading.  Resets
 * the timer so we see the image for the whole 'timedisplayed' interval.
 * 
 * @param {Integer} k - the index of the image in slideshowarray to change to
 ************************************************************************************/
function changeto(k)
{
	clearInterval(timerId);
	j = k;
	document.getElementById('mainpicture').src = slideshowarray[j].src;
	changeOpac(100, 'mainpucture');
	timerId = setInterval('timedLoop()', timedisplayed);
}

function timedLoop()
{
	document.getElementById('blenddiv').style.backgroundImage = "url(" + slideshowarray[j].src + ")";
	changeOpac(0, 'mainpicture');
	j++;
	j = j % 8;
	document.getElementById('mainpicture').src = slideshowarray[j].src;
	opacity('mainpicture', 0, 100, timefadeinout);
}

function opacity(id, opacitystart, opacityend, milliseconds)
{
	var speed = Math.round(milliseconds / 100);
	var timer = 0;
	if(opacitystart > opacityend)
	{
		for(i= opacitystart; i >= opacityend; i--)
		{
			setTimeout("changeOpac(" + i + ",'" + id + "')", (timer*speed));
			timer++;
		}
	}
	else if(opacitystart < opacityend)
	{
		for(i=opacitystart; i <= opacityend; i++)
		{
			setTimeout("changeOpac(" + i + ",'" + id + "')", (timer*speed));
			timer ++;
		}
	}
}

function changeOpac(opacity, id)
{
	var object = document.getElementById('mainpicture').style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}