$(document).ready( function() {
	
	// hide all slides except the first one initially
	$("#slides a:eq(0)").addClass("showSlide");
	$("#slides a:gt(0)").addClass("hideSlide");
	
	// create the slide nav based on the number of slides
	var numberOfSlides = $("#slides .slide").length;
	var navNumber = 1;
	for ( i=0; i<numberOfSlides; i++ ) {
		$("#slideNav").append("<a href='"+i+"'>"+navNumber+"</a>");
		navNumber = navNumber + 1;
	}
	
	// show the slides as the nav is clicked
	$("#slideNav a").click( function() {
		$("#slideNav a").removeClass("slideNavSelected");
		var target = Number($(this).text()) - 1;
		$("#slides .showSlide").toggleClass("showSlide").fadeOut( function() {
			$("#slides .slide:eq("+target+")").fadeIn().toggleClass("showSlide");
		});
		$(this).toggleClass("slideNavSelected");
		return false;
	});
	
	// rotate the slides
	var rotateInterval = 3000;
	var currentSlide = 1;
	
	function showSlides() {
		$("#slides").everyTime(rotateInterval,"rotateSlides", function() {
			$("#slideNav a:eq("+currentSlide+")").click();
			currentSlide = ( currentSlide < numberOfSlides - 1 ) ? currentSlide+1 : 0;
		});
	}
	
	showSlides();
	
	// stop the rotation on mouseover
	$("#slideContainer").mouseover( function() {
		$("#slides").stopTime("rotateSlides");
	}).mouseout( function() {
		showSlides();
	});
	
	// highlight the first slide nav item initially
	$("#slideNav a:eq(0)").addClass("slideNavSelected");
	
});