// SET UP SOME VARIABLE WE NEED
var aSlides = new Array();
var iPos = 0;
var	oTimer = null;
var iDisplayTime = 6000;
var iFadeSpeed = 1000;

function initZoomShow(){
// GET ALL THE SLIDES IN THE SHOW CASE
	aSlides = $('#zoomShow .slide');
// IF WE HAVE MORE THAN ONE SLIDE
	if (aSlides.length > 1) {
// SET UP SOME HTML TO PLUG BACK IN WITH ALL THE BITS WE NEED
		sHTML = '';
		sHTML += '<div id="slideWrapper">';
		sHTML += '<div id="effectSlide" class="slide"></div>';		
		sHTML += '<div id="currentSlide" class="slide">';		
// FIRST TIME AROUND SET THE CURRENT SLIDE HTML AS THE FIRST SLIDE HTML		
		sHTML += aSlides[0].innerHTML;
		sHTML += '</div>';
// WRITE IN THE CONTROL NAVIGATION
//		sHTML += '<ul>';
//		for (i=0;i<aSlides.length;i++) {
//			sHTML += '<li onclick="swapSlide(' + i + ');" id="imgControl' + i + '">' + (i + 1) + '</li>';				
//		}
//		sHTML += '</ul>';
		sHTML += '</div>';
// APPENDS THE HTML TO THE SHOW CASE
		$('#zoomShow').append(sHTML);
// SET THE FIRST NAVIGATION OPTION TO CURRENT
		$('#imgControl' + iPos).attr("class", 'current');				
// SET THE SLIDE SHOW IN MOTION		
		oTimer = setTimeout('swapSlide()',iDisplayTime);		
// IF WE ONLY HAVE ONE SLIDE
	} else if (aSlides.length == 1) {
// SET UP SOME HTML TO PLUG BACK IN WITH ALL THE BITS WE NEED
		sHTML = '';
		sHTML += '<div id="slideWrapper">';
// JUST WRITE IN THE FIRST SLIDE AND WE ARE DONE
		sHTML += '<div id="currentSlide" class="slide">';		
		sHTML += aSlides[0].innerHTML;
		sHTML += '</div>';
		sHTML += '</div>';
// APPENDS THE HTML TO THE SHOW CASE
		$('#zoomShow').append(sHTML);
	}
}

// FUNCTION TO SWAP THE SLIDES
function swapSlide(iSlidePos) {
// STOP ANY PREVIOUS SWAP OVER WE ARE DOING
	clearTimeout(oTimer);
// CHECK WHICH SLIDE WE ARE CHANGING TO
	if(!iSlidePos) {
		iPos++;		
	} else {
		iPos = iSlidePos;
	}
// THE OLD IF WE ARE PAST THE END GO BACK TO THE BEGINNING TRICK
	if(iPos>=aSlides.length) iPos = 0;	
	iUsePos = iPos;
// SET ALL NAVIGATION OPTIONS TO NOT SELECTED	
	$('#zoomShow li').attr("class", '');
// POPULATE THE EFFECT SLIDE WITH THE CURRENT LIVE SLIDE CONTENT
	$('#zoomShow #effectSlide').html($('#zoomShow #currentSlide').html());
// DISABLE ALL THE LINKS	
	$('#zoomShow #effectSlide a').removeAttr("href"); 
// SET THE EFFECT SLIDE TO 100% VISIBLE (REMEMBER IT IS NOW OVER THE TOP OF THE CURRENT SLIDE)
	$('#zoomShow #effectSlide').css('opacity', 1);
//	CHANGE THE CURRENT SLIDE TO THE NEW CONTENT	
	$('#zoomShow #currentSlide').html(aSlides[iUsePos].innerHTML);	
// FADE THE EFFECT SLIDE DOWN TO REVEAL THE NEW SLIDE THEN EMPTY IT
	$('#zoomShow #effectSlide').animate({ "opacity": 0 }, iFadeSpeed, function(){emptySlide()});
// CHANGE THE NAVIGATION OPTION TO CURRENT
	$('#imgControl' + iUsePos).attr("class", 'current');
// SET IT TO GO OFF AGAIN IN A LITTLE WHILE
	oTimer = setTimeout('swapSlide()',iDisplayTime);
}	

// FUNCTION TO EMPTY THE EFFECT SLIDE WHEN WE ARE FINISHED FADING
function emptySlide() {
	$('#zoomShow #effectSlide').html('');
}

// ON LOAD OF THE DOM KICK THINGS OFF!
$(function(){
	initZoomShow();
});