/********************************************
* Name: Classy Slideshow
* Version: 1.0
* Created by: Kevin Kirchner
* Created on: 11.21.2009
* Last Update: 11.24.2009 
*
* To get this to work, you need 4 element ID's
*	1. imageListId - set the style of this element to "display:none;" 
*		EXAMPLE: <ul id="my_imageListId_here" style="display:none;">
*					<li link="put_link_url_in_link_attribute">just_the_path_to_image_goes_here</li>
*					<li link="a_new_link_for_new_image">the_path_to_2nd_image</li>
*					...
*	
*	2. slideshowContainerId - this is the element the images will be placed 
*		(set width and height if you don't want it to be collapsed before 1st image loads)
*	
*	3. imageDurationId - set this style to "display:none;" also, then set how long each slide displays (in seconds)
*		EXAMPLE: <span id="image_duration" style="display:none;" title="in seconds">4</span>
*		NOTE: if you don't want this element, set imageDurationId = '', it defaults to 4000 milliseconds (4 seconds). 
*		You can change the default value in the getDuration() function
*	
*	4. slideNumbersId - for page functionality, this will list out the number of images, 
*		add an ID to each link "number_link_x" where "x" is the number,
*		and add "active" class to the number that correlates to the image showing
*		NOTE: If you don't have this ID, the slideshow won't work! (I could edit it so it works but no time now) 
*			If you really don't want to show the image numbers, "display:none;" this element too.
*
**********************************************/

//element IDs
var imageListId='home_slideshow_images';
var slideshowContainerId='slideshow_container';
var imageDurationId='image_duration'; // defaults to 4000 milliseconds (4 seconds) if set = ''
var slideNumbersId='slideshow_numbers';
var theFade;

//slideshow config
var transitionDuration=.5; // in seconds
var fadeToOpacity=.01; // between 0 and 1
var timeBetweenTransition=0; // in seconds

//----------------- You can stop editing here! Thanks! ----------------//

//slideshow vars
var counter=0;
var currentImage=1;
var timeDelay=transitionDuration*1000+1+(timeBetweenTransition*1000);

function trim(str){
	var theStr = str.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 	//trim off any whitespaces
	return theStr;
}
function getDuration(){
	if($(imageDurationId)){
		var imageTimeHtml=trim($(imageDurationId).innerHTML);		//pull imageDurationId content and trim it
		var imageTime = 1000*(parseFloat(imageTimeHtml)); 	//make into integer
	} else {
		var imageTime = 4000;
	}
	return imageTime;
}
function getImageArray(){
	var images = $(imageListId).childElements();
	return images;
}
function getNumImages(){
	var images=getImageArray();
	var num_images=images.length;
	return num_images;
}
function startSlideshow(){
	var images = getImageArray();
	var num_images = getNumImages();
	var imageUrl = trim(images[counter].innerHTML);
	link=images[counter].readAttribute('link');
	if(link==null){link='#'}
	
	$(slideshowContainerId).update('<a href="'+link+'"><img src="'+imageUrl+'"/></a>');
	
	var theNumbers = ''
	for(i=1;i<=num_images;i++){
		theNumbers += '<a id="number_link_'+i+'" href="#" onclick="restartSlideshow('+i+'); return false;">'+i+'</a>';
	}
	$(slideNumbersId).update(theNumbers);
	$('number_link_'+currentImage).addClassName('active');

	var imageTime = getDuration();
	theFade = setTimeout('fadeOut()',imageTime);
	return;
}
function restartSlideshow(imageNumber){
	clearTimeout(theFade);
	new Effect.Opacity(slideshowContainerId, {to:fadeToOpacity, duration:0});
	
	$$('.active').each(function(el){
	    $(el).removeClassName('active')
	});
	
	counter=imageNumber-2;
	currentImage=imageNumber-1;
    theFade=setTimeout("fadeIn()", 1);
}

function fadeOut() {
    Effect.Fade(slideshowContainerId, { duration: transitionDuration, from:1, to:fadeToOpacity });
    theFade=setTimeout("fadeIn()", timeDelay);
}
function fadeIn() {
    //set vars
	images = getImageArray();
	num_images = getNumImages();
	imageTime = getDuration();

	counter++;
	if($('number_link_'+currentImage)){
		$('number_link_'+currentImage).removeClassName('active');
	}
	if(counter==num_images){ counter=0; currentImage=0; }
	currentImage++;
	$('number_link_'+currentImage).addClassName('active');
	
	
	imageUrl=trim(images[counter].innerHTML);
	link=images[counter].readAttribute('link');
	if(!link){
		$(slideshowContainerId).update('<img src="'+imageUrl+'"/>');
	}else{
		$(slideshowContainerId).update('<a href="'+link+'"><img src="'+imageUrl+'"/></a>');
	}
	
	Effect.Fade(slideshowContainerId, { duration: transitionDuration, from:fadeToOpacity, to:1 });

    theFade=setTimeout("fadeOut()", imageTime);
}
// --- End Slideshow --- //

document.observe('dom:loaded',function(){

	if($('home_slideshow_images')){
		
		//home_slideshow	
		startSlideshow();
		var imageTime = getDuration();
	
		// pause slideshow on hover
		$(slideshowContainerId).observe('mouseover', function() {
			clearTimeout(theFade);
			new Effect.Opacity(this, {to:1, duration:.25});
		});
		$(slideshowContainerId).observe('mouseout', function() {
			theFade=setTimeout("fadeOut()", imageTime);
		});
	}
});