/*
 * A JavaScript implementation of a fading slideshow in random order.
 * Every image can be linked to an URL. 
 * Especially aimed at displaying a slideshow of sponsor logos
 *
 * Version 1.0 Copyright (C) Stef Sijben 2007-2009
 * Distributed under the BSD license
 *
 * Configuration variables:
 * - IMG_PREFIX:
 *      What should be prefixed to an image name to get the image's URL.
 *      May be relative or absolute.
 * - SPONSOR_URLS: 
 *      Array of URLs to the websites related to each image.
 *      *MUST* be present and have length equal to the number of images.
 * - IMG_NAMES:
 *      Array of filenames of the images to show.
 * - SPONSOR_FADE_STEP: The percentage the opacity of the image should change each time.
 * - SPONSOR_FADE_INTERVAL: How often the opacity of the image changes, in milliseconds.
 * - SPONSOR_STAND_TIME: 
 *      How long the image should remain fully opaque once faded in, 
 *      in milliseconds.
 *
 * Images should have the URL
 *         <IMG_PREFIX><IMG_NAMES[ImgNum]>
 * Where ImgNum is a number in the range [0 .. length(SPONSOR_URLS) - 1]
 * 
 * This script requires the following HTML and CSS code:
 *
 * === HTML ===================================================================
 *
 * <div id="sponsorcontainer">
 *  <div id="sponsor0" class="sitesponsor"></div>
 *  <div id="sponsor1" class="sitesponsor"></div>
 * </div>
 *
 * === CSS ====================================================================
 *
 * div#sponsorcontainer {
 *	height: 100px;
 * }
 *
 * div.sitesponsor {
 *	height: 100px;
 *	width: 180px;
 *	position: absolute;
 *	text-align: center;
 *	line-height: 100px;
 *	*font-size: 90px;
 * }
 *
 * img.sitesponsor {
 *	vertical-align: middle;
 *	border: 0px;
 * }
 * === END CSS ================================================================
 *
 * Of course you should modify the heights and widths etc. for your needs.
 */

/* configuration */

var IMG_PREFIX = "images/sponsors/slideshow/";

var SPONSOR_FADE_STEP = 2;
var SPONSOR_FADE_INTERVAL = 30;
var SPONSOR_STAND_TIME = 5000;


/****************************************
* Don't change anything below this line *
****************************************/

var sponsorCurrDiv=0;	// the div currently INvisible or fading in
var sponsorUrl = false;

var sponsorOpacities = new Array(0, 100);
var sponsorImgs = new Array(null, null);

var sponsorStopped = true;

var sponsorImages = new Array();

function initSlideShow() {
	getImage();
	sponsorOpacities[1] = 100;
	setInterval("sponsorCrossFade()",SPONSOR_FADE_INTERVAL);
	setTimeout("sponsorStopped=false;",SPONSOR_STAND_TIME);
	
	for (i = 0; i < IMG_NAMES.length; i++) {
		sponsorImages[i] = new Image();
		sponsorImages[i].src =  IMG_PREFIX + IMG_NAMES[i];
	}
}

function sponsorCrossFade() {
	if(sponsorStopped) return;
	
	
	sponsorOpacities[1 - sponsorCurrDiv] -= SPONSOR_FADE_STEP;
	sponsorOpacities[sponsorCurrDiv] += SPONSOR_FADE_STEP;
	if (sponsorOpacities[1-sponsorCurrDiv]<0) sponsorOpacities[1-sponsorCurrDiv]=0;
	if (sponsorOpacities[sponsorCurrDiv]>100) sponsorOpacities[sponsorCurrDiv]=100;

	// The fading action ...
	if(document.all) { // ... for IE ...
		document.getElementById("sponsor0").style.filter =
                "alpha(opacity=" + sponsorOpacities[0] + ")";
		document.getElementById("sponsor1").style.filter = 
                "alpha(opacity=" + sponsorOpacities[1] + ")";
	} else { // ... and for real browsers
		document.getElementById("sponsor0").style.opacity = sponsorOpacities[0]/100;
		document.getElementById("sponsor1").style.opacity = sponsorOpacities[1]/100;
	}
	if(sponsorOpacities[sponsorCurrDiv]==100) { // we're done fading
		sponsorCurrDiv = 1-sponsorCurrDiv;
		getImage();
		
		sponsorStopped = true;
		setTimeout("sponsorStopped=false;",SPONSOR_STAND_TIME);
	}

	// create or delete a link
	if(sponsorOpacities[sponsorCurrDiv] && sponsorUrl){	
		// we're starting to fade in sponsorCurrDiv, so remove the link from 1-sponsorCurrDiv and show sponsorCurrDiv
		document.getElementById("sponsor" + sponsorCurrDiv).style.display = 'block';
		document.getElementById("sponsor" + sponsorCurrDiv).style.zIndex = 1;
		document.getElementById("sponsor" + (1-sponsorCurrDiv)).style.zIndex = 0;
		document.getElementById("sponsorimg" + (1-sponsorCurrDiv)).innerHTML = 
				"<img src=\"" + IMG_PREFIX + IMG_NAMES[sponsorImgs[1-sponsorCurrDiv]] + "\" alt=\"\" class=\"sitesponsor\">";
		sponsorUrl = false;
	}else if(!sponsorOpacities[sponsorCurrDiv] && !sponsorUrl && SPONSOR_URLS[sponsorImgs[1-sponsorCurrDiv]]){ 
		// sponsorCurrDiv is invisible, make the image in 1-sponsorCurrDiv clickable
		document.getElementById("sponsor" + sponsorCurrDiv).style.display = 'none';
		document.getElementById("sponsorimg" + (1-sponsorCurrDiv)).innerHTML = 
				"<a href=\"" + SPONSOR_URLS[sponsorImgs[1-sponsorCurrDiv]] + "\" target=\"_blank\">\n" +
				" <img src=\"" + IMG_PREFIX + IMG_NAMES[sponsorImgs[1-sponsorCurrDiv]] + 
                    "\" alt=\"\" class=\"sitesponsor\">\n" +
				"</a>";
		sponsorUrl = true;
	}
}

function getImage() {
	var imgNum = Math.floor(SPONSOR_URLS.length*Math.random());
	// don't show the same image too soon after the previous showing
	while (sponsorImgs[0] == imgNum || sponsorImgs[1] == imgNum){
		imgNum = Math.floor(SPONSOR_URLS.length*Math.random());
	}
	sponsorImgs[sponsorCurrDiv] = imgNum;
	document.getElementById("sponsorimg" + sponsorCurrDiv).innerHTML = 
			"<img src=\"" + IMG_PREFIX + IMG_NAMES[sponsorImgs[sponsorCurrDiv]] + "\" alt=\"\" class=\"sitesponsor\">";
}