var imageFilenames;
var imageIndex;
var imageControlIndex;
var img1;
var img2;
var slideDuration;
var timer;

function initSlideshow(imageDirectory,imageFiles,imageControlId,duration)
    {
	var f = imageFiles.split(",")
	imageFilenames = new Array(f.length);
	for( var i = 0; i < f.length; i++ )
		{
		imageFilenames[i] = imageDirectory + "/" + f[i];
		}
	img1 = document.getElementById(imageControlId);
	img2 = document.getElementById(imageControlId + "_2");
	slideDuration = duration * 1000;
	}
	
function startSlideshow()
    {
    imageIndex = 0;
    img1.src = imageFilenames[imageIndex];
    imageControlIndex = 0;
    if( imageFilenames.length == 1 )
		img2.style.visibility = "hidden"
	else
    	{
	   	if( img1.filters != null ) /* IE */
			img2.style.visibility = "hidden"
		else  /* non-IE */
	    	img2.src = imageFilenames[imageIndex + 1];
	    timer = setTimeout("changeSlideshowImage()",slideDuration);
	    }
    }
    
function changeSlideshowImage()
    {
    if( imageIndex >= imageFilenames.length - 1 )
    	imageIndex = 0
    else 
    	imageIndex += 1;
    /*
    	At this time IE implements transitions using the "filters" feature (IE only) and does not support CSS3, and
    	the other main browsers we want to support (Firefox, Chrome) don't support filters but do support CSS3 (with variations).
    	
    	For IE we use the filters feature (which is IE only). 
    */
   	if( img1.filters != null )
    	{
		img1.filters.item(0).Apply();
		img1.src  = imageFilenames[imageIndex];
		img1.filters.item(0).Play();
		}
	/*
		For other browsers we use the CSS3 transitions feature. CSS3 does not appear to support transitions based on the "src" property so we have
		to use two images that are located at the same absolute position and to achieve the
		transition we fade one image out (using the opacity property) at the same time as fading the other image in.
	*/
	else
		{
	   	if( imageControlIndex == 1 )
    		{
    		imageControlIndex = 0;
    		img2.style.opacity = 0;
    		img1.src = imageFilenames[imageIndex];
    		img1.style.opacity = 1;
    		}
    	else
    		{
    		imageControlIndex = 1
    		img1.style.opacity = 0;
    		img2.src = imageFilenames[imageIndex];
    		img2.style.opacity = 1;
    		}
	   	}
	timer = setTimeout("changeSlideshowImage()",slideDuration);
    }