// the slides - relative or complete urls for any number of swappable images
var slides = new Array('imageseb/slide2.jpg','imageseb/slide3.jpg','imageseb/slide1.jpg');
var slidelinks = new Array('sellers-boost-sales-today.php', 'https://' + location.hostname + '/create_account.php','certified-seal-range.php');
var slideIndex = 0; // which slide are we viewing?
var fadeTimer = 3; // time, in seconds, it takes to swap images
var swapTimer = 8; // time, in seconds, between image swaps

// Call this from div fadebook onclick="showLink()"
function showLink()
{
	window.location = slidelinks[slideIndex];
}

// gotta set it all up before we run it...
function initSwap() {
	// CAREFUL! we ASSUME there's a page element with id 'fadeBox' to 
	// contain the effected images
	var fadeBox = document.getElementById('fadeBox');
	// set up the actual images
	for(var i=0;i<slides.length;i++) {
		// hooray for the DOM
		var slide = document.createElement('img'); // a new image
		slide.src = slides[i]; // should show this image
		
		slide.style.cursor='pointer';

		slide.style.position = 'absolute'; // important so images stay on top of each other
		slide.style.opacity = '0'; // init to transparent (CSS2)
		slide.style.filter = 'alpha(opacity:0)'; // init to transparent (MSIE)
		//slide.style.zIndex=0;
		fadeBox.appendChild(slide); // put the image in the box
		slides[i] = slide; // reassign to same array for convenience
		// if it's the first image, let's show it now to avoid waiting
		if(i==0) { 
			fade(i,1); // fade it in!
			setTimeout(doSwap,swapTimer*1000); // start the swap timer!
		}
		// repeat for each slide
	}
}

function doSwap() {
	var s1 = slideIndex; // where *are* we?
	var s2 = s1+1==slides.length?0:s1+1; // either the next or the first
	// we just wrapped to the beginning if we hit the end of the array, so...
	slideIndex = s2; // update slide index
	fade(s1,0); // fade the old slide out!
	fade(s2,1); // fade the new slide in!
	setTimeout(doSwap,swapTimer*1000); // do it again in swapTimer seconds!
}

function fade(whoid,dir) {
	var slide = slides[whoid]; // get the slide element at index whoid
	var completed; // so we know when the fade is done
	var opac = parseFloat(slide.style.opacity,10); // get a reference value
	// increment if fading in, decrement if fading out
	if(dir > 0) { 
		opac += .1; // more opaque
		if(opac >= 1) {
			// fade is at max! fade done!
			completed = true;
		}
	} else {
		opac -= .1; // less opaque
		if(opac <= 0) {
			// fade is at min! fade done!
			completed = true;
		}
	}

	slide.style.opacity = opac; // set opacity (CSS2)
	slide.style.filter = 'alpha(opacity:'+(opac*100)+')'; // set opacity (MSIE)
	if(!completed) {
		// as long as the fade is not complete, keep doing this in 1/10 increments within fadeTimer seconds
		setTimeout("fade("+whoid+","+dir+")",parseInt(fadeTimer/10,10));
	}
}

// start it up when the page loads!
// ideally you want to place this in an onload appender or manager - if you use 
// a lot of JS you may end up overriding your onload
onload = initSwap;