//---------------------------------------------------------------------------
//  you may want to change the 2 variables below
//---------------------------------------------------------------------------
var maxImgs = 5;   // This is the number of images in the slide show
var slideShowInterval = 5000;  // This is the pause time for each image

//---------------------------------------------------------------------------
//  shouldn't have to change anything below here
//---------------------------------------------------------------------------
var imgsInSlideShow, slideShowTimer;
var slideShowOn = true;
var imgCounter = 0;
var currImg = 0;


//---------------------------------------------------------------------------
//  FUNCTION: Preload the images and build the thumbnails and prev/next 
//            links for the slideshow
//---------------------------------------------------------------------------
function preShowSetup() {
	
	// Preload the images 
	var images = [];
	for (var i = 1 ; i <= maxImgs; i++)	{
		if( $E(".slideShowContent .projInfo span#projImg_"+i) != null)
			images.push($E(".slideShowContent .projInfo span#projImg_"+i).innerHTML);
	}
	imgsInSlideShow = new Asset.images(images,{
		onProgress: function(){this.setStyle("opacity",0);}
	});
    
	
	// Build the thumbnails for the project slideshow
	
	// the thumbs will be in a <ul> tag
	var ul = new Element("ul");
	var thumbContainer = $E(".slideShowThumbs");
	
	//  build <li><a> tags for each thumb
	for (var i=0; i<maxImgs; i++) {
		if ($$(".slideShowContent .projInfo")[i] != null) {
			
			var a = new Element("a");
			a.setProperty("href","#");
			a.setHTML(i+1);
			if (i == currImg)
				a.addClass("active");
			a.addEvent("click",function(e){ 
				new Event(e).stop();
				stopSlideShow();
				showImage(this.innerHTML - 1); 
			});

			var li = new Element("li");
			li.adopt(a);
			ul.adopt(li);
		}
	}
	
	//  build the "prev" tag
	var prev = new Element("a");
		prev.href = "#";
		prev.addClass("prevImg");
		prev.addEvent("click",function(e){ 
			new Event(e).preventDefault();
			stopSlideShow();
			prevImage();
		});
		
	//  build the "next" tag
	var next = new Element("a");
	next.addClass("nextImg");
	next.href = "#";
	next.addEvent("click",function(e){ 
		new Event(e).preventDefault();
		stopSlideShow();
		nextImage();
	});
		
			
	thumbContainer.adopt(prev);
	thumbContainer.adopt(ul);
	thumbContainer.adopt(next);
}


//---------------------------------------------------------------------------
//  Define the actual slideshow function that transitions to the next image
//---------------------------------------------------------------------------
var slideshowFunction = function() {
	nextImage();
	imgCounter++;
	if (slideShowOn && imgCounter == maxImgs-1)  //  only run thru the show once
		stopSlideShow();
};


//---------------------------------------------------------------------------
//  FUNCTION: stop the slideshow 
//---------------------------------------------------------------------------
function stopSlideShow() {
	$clear(slideShowTimer);	
	imgCounter = 1;
	slideShowOn = false;
}

//---------------------------------------------------------------------------
//  FUNCTION: display the current image
//---------------------------------------------------------------------------
function showImage(imgNum) {
	
	var imgNumValid = false;
	if (imgNum >= 0 && imgNum < imgsInSlideShow.length)
		imgNumValid = true;
		
	if (imgNum != currImg && imgNumValid) {
		currImg = imgNum;
		
		// change which thumb has the "on" (active) state
		active = $E(".slideShowThumbs ul li a.active");
		if (active) 
		    active.removeClass("active");
		$$(".slideShowThumbs ul li a")[currImg].addClass("active");
		
		// apply image transition effects
		var fadeInEffect = new Fx.Style(imgsInSlideShow[currImg],'opacity',{duration:500});
		var fadeOutEffect =   new Fx.Style($E(".slideShowImage img"),'opacity',
										   {duration:500, wait:false,onComplete: function()
										   	   {
											       $E(".slideShowImage img").remove();
													var a = new Element("a");
													a.href = $E(".slideShowContent .projInfo span#projLink_"+Number(currImg+1)).innerHTML;
													a.adopt(imgsInSlideShow[currImg]);
													$E(".slideShowImage").adopt(a);
													$E(".projectBox h2").setHTML($E(".slideShowContent .projInfo span#projName_"+Number(currImg+1)).innerHTML);
													$E(".projectBox p").setHTML($E(".slideShowContent .projInfo span#projText_"+Number(currImg+1)).innerHTML);
													$E(".projectBox a").href = $E(".slideShowContent .projInfo span#projLink_"+Number(currImg+1)).innerHTML;
													fadeInEffect.start(1);
												}
										 	});
		fadeOutEffect.start(0);
		
	}
}

//---------------------------------------------------------------------------
//  FUNCTION: "previous" button pressed - go to the previous image, or if at the 
//  first one, go back to the last image
//---------------------------------------------------------------------------
function prevImage() {
	var prevImg = (currImg-1 < 0 ) ? imgsInSlideShow.length - 1 : currImg-1;
	showImage(prevImg);
	currImg = prevImg;
}


//---------------------------------------------------------------------------
//  FUNCTION: "next" button pressed - advance to the next image, or if at the 
//  last one, go back to the first image
//---------------------------------------------------------------------------
function nextImage() {
	var nextImg = (currImg+1 == imgsInSlideShow.length ) ? 0 : currImg+1;
	showImage(nextImg);
	currImg = nextImg;
}


//---------------------------------------------------------------------------
//  FUNCTION: Load the slideshow
//---------------------------------------------------------------------------
function slideShowLoad() {
	if( $$(".slideShowContent .projInfo").length > 1 ) 	{
		if ($E(".slideShowContent .projInfo") != null) 	    
			preShowSetup();
		currImg = 0;
		slideShowTimer = slideshowFunction.periodical(slideShowInterval);
	}
}

window.addEvent("load",slideShowLoad);