/* Cross-browser BlendTrans Javascript Filter (Fade In/Out)

   Code from http://www.brainerror.net/scripts_js_blendtrans.php.
   According to website, do not distribute and attribution must be given.
   
   Additions made to support using a PHP-generated list of filenames as image sources
   and continually cycle between them. */
   
/* Usage:
   This can only be used to make a single fading image per page.  Modifying the original
   code to support more than one is a PITA.
   
   Create a div which contains just the image you want to cycle.  Blending will occur between
   the image and the background of the div.
   
   Include this script on the webpage that you want to contain a cycling image.
   Also include a small section of inline Javascript that defines the following
   variables:
     files:     An array of filenames to use.  These should be valid URLs.
     div_id:    The id of the div which contains the img
     img_id:    The id of the img itself
     delay:     The number of milliseconds between transitions
     trans_time:The number of milliseconds that each transition will take
   
   Finally, use onLoad or inline javascript at the end of the document to call startCycler()
*/
   
// Start with random image
curr_index = Math.floor(Math.random()*files.length);

//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.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

// Pick a random image, blend to it, and set timer to switch again after "delay" milliseconds
function nextImg()
{
    new_index = Math.floor(Math.random()*files.length);
    while (new_index == curr_index) {
        new_index = Math.floor(Math.random()*files.length);
    }
    curr_index = new_index;
    
    blendImage(div_id, img_id, files[curr_index], trans_time);
    setTimeout("nextImg()", delay);
}

// Fade from one image to another by setting background to old image, foreground to new image, and fading in opacity
function blendImage(div_id, img_id, image, trans_time) {
	var frames_per_second = 25.0;
	var millisec_per_frame = 1000.0 / frames_per_second
	var total_frames = Math.ceil(trans_time / millisec_per_frame);
	var opacity_per_frame = 100.0 / total_frames
	var timer = 0;
	var opacity = 0;
	
	//set the current image as background
	document.getElementById(div_id).style.backgroundImage = "url(" + document.getElementById(img_id).src + ")";
	
	//make image transparent
	changeOpac(opacity, img_id);
	
	//make new image
	setTimeout("document.getElementById('"+img_id+"').src = '"+image+"';", millisec_per_frame);

	//fade in image
	for(opacity = 0; opacity <= 100; opacity += opacity_per_frame) {
		setTimeout("changeOpac(" + Math.round(opacity) + ",'" + img_id + "')",(timer += millisec_per_frame ));
	}
}

// Preload images, set initial values for foreground and background, and set timer for first call to nextImg()
function startCycler() {
    /* Preload the images to avoid loading times */
    images = new Array();
    for (var i in files)
    {
        images[i] = new Image();
        images[i].src = files[i];
    }
    /* Get image and background synced up immediately */
    document.getElementById(div_id).style.backgroundImage = "url(" + files[curr_index] + ")";
    document.getElementById(img_id).src = files[curr_index];
    /* Initial timer to change images */
    setTimeout("nextImg()", delay);
}