// -----------------------------------------------------------------------
// User-configurable variables:

var n_banners = 8        // The number of images.
var banner_delay = 10    // How long each image stays visible, in seconds.
var fade_duration = 1500 // Speed of the transition, in milliseconds.

// -----------------------------------------------------------------------
// End of user-configurable variables
// -----------------------------------------------------------------------

/* Hook on-load event */
if (typeof attachEvent != 'undefined') {
	attachEvent('onload', ccfpd_init);
} else if (typeof addEventListener != 'undefined') {
	addEventListener('load', ccfpd_init, false);
}

function $(el) { return document.getElementById(el); }
function ease(t, b, c, d) { return c/2 * (1 - Math.cos(Math.PI * t/d)) + b; }

function ccfpd_init() {

	/* Start banner image rotation */
	setTimeout(rotate_banners, 1000 * banner_delay);

}

var banner_path = "http://www.ccfpd.org/images/banner-rotation"
var cur_banner = 1;
var toggle = "odd";
var intv_fader = ""; // interval id
var fader_granularity = 50; // milliseconds

function rotate_banners() {
	/* current & next img and div tags */
	var c_img, n_img, c_div, n_div;

	/* switch back and forth between the two, to support crossfade */
	if (toggle == "odd") {
		c_img = $('rotating-banner-img');
		n_img = $('rotating-banner-img-swap');
		c_div = $('Header');
		n_div = $('Header-swap');
		toggle = "even";
	} else {
		c_img = $('rotating-banner-img-swap');
		n_img = $('rotating-banner-img');
		c_div = $('Header-swap');
		n_div = $('Header');
		toggle = "odd";
	}

	/* convienence abbreviations */
	var ns = n_div.style;
	var cs = c_div.style;

	/* set the next image in the hidden spot and grab the next next 
	 * image for preloading, but don't set it until after the crossfade */
	cur_banner = (cur_banner == n_banners) ? 1 : cur_banner + 1;
	next_banner = (cur_banner == n_banners) ? 1 : cur_banner + 1;
	n_img.src = banner_path + "/header_" + cur_banner + ".jpg";
	var defer_c_img_src = banner_path + "/header_" + next_banner + ".jpg";

	/* init crossfade */
	ns.opacity = 0;
	ns.filter = "alpha(opacity=0)";
	ns.visibility = "visible";

	t = 0; // time
	intv_fader = setInterval(function() {
		t += fader_granularity;

		/* calculate transparency */
		var ietrans = Math.round(100 * ease(t, 0, 1, fade_duration));
		var trans = ietrans / 100;

		/* set transparency */
		ns.opacity = trans;
		cs.opacity = 1 - trans;
		/* set it again for IE */
		ns.filter = "alpha(opacity="+ ietrans +")";
		cs.filter = "alpha(opacity="+ (100 - ietrans) +")";

		/* Done */
		if (t == fade_duration) {
			clearInterval(intv_fader);
			cs.visibility = "hidden";
			/* preload the next image  */
			c_img.src = defer_c_img_src;
			/* start over */
			setTimeout(rotate_banners, 1000 * banner_delay);
		}
	}, fader_granularity);
}