/*******************************************************************************
SLIDESHOW (non-OOP version)
To implement the slideshow, do this:
-- include this JS file
-- in the document JS, you MUST define a slides array and add an onload event handler,
	and you MAY override defaults. Example:	

		// array of slides, with paths to images
		var slides = new Array();
		slides.push("images/frontpage/NavajoPrep_1.jpg");
		slides.push("images/frontpage/NavajoPrep_2.jpg");
		slides.push("images/frontpage/NavajoPrep_3.jpg");
		slides.push("images/frontpage/NavajoPrep_4.jpg");

		// override defaults if desired
		autorun = true;
		speed = 8;

		// start the slideshow! 
		Event.observe(window, 'load', initSlideShow, false);
	
-- in the HTML page, you MUST HAVE a relatively positioned div with id="slideShow",
	and if you want manual navigation you MUST HAVE links with id="prevNav" and id="nextNav"
	Example:
	<div id="slideShow">
		<!-- images will go here -->	
	</div>

	<div id="slideShowNav"> 
		<a id="prevNav" href="javascript:;">&lt;&lt; prev</a>
		<a id="nextNav" href="javascript:;">next &gt;&gt;</a>
	</div>

-- in your CSS, you MUST define #slideShow as relative positioned, assigned the width
	and height of the images, and you must define #slideShow img as absolute position
	Example:

		#slideShow {
			height:400px;
			position:relative;
			width:575px;
		}

		#slideShow img {
			position:absolute;
			top:0px;
			left:0px;
		}
		
*******************************************************************************/
var prev = 0;
var next = 0;
var fadeSpeed = 1;
var autorun = false;
var speed = 5;
var anim;

/******************************************************************************/
function initSlideShow(){

	if ($('prevNav') != null) Event.observe('prevNav','click', prevSlide, false);
	if ($('nextNav') != null) Event.observe('nextNav','click', nextSlide, false);
	
	slides.each(function(slide){
		//$('slideShow').insert('<img src="' + slide + '" id="slide_' + next + '" style="display:none;" />');
		var a = new Element('img', { src: slide, id: 'slide_' +  next, style:'display:none;' });
		$('slideShow').insert(a);
		next++;		
	});

	next = -1;
	runSlideShow();

}

/******************************************************************************/
function runSlideShow(){

	// if there are no slides loaded, stop the show!
	if ($('slide_0') == null){
		clearTimeout(anim);
		return;
	}

	if (autorun) anim = setTimeout("runSlideShow()",(speed * 1000));
	nextSlide();

}

/******************************************************************************/
function nextSlide(){

	prev = next;
	next = ((next + 1) < (slides.length)) ? next + 1 : 0 ;
	
	if (prev >= 0) $('slide_' + prev).fade({  duration:fadeSpeed, from: 1, to: 0 });
	$('slide_' + next).appear({  duration:fadeSpeed, from: 0, to: 1 });

}

/******************************************************************************/
function prevSlide(){

	prev = next;
	next = ((next - 1) >= 0) ? next - 1 : (slides.length - 1) ;
	
	$('slide_' + prev).fade({  duration:fadeSpeed, from: 1, to: 0 });
	$('slide_' + next).appear({  duration:fadeSpeed, from: 0, to: 1 });

}

/******************************************************************************/