/**
 * Begins the slideshow once the entire page is done loading
 */
Event.observe(window, 'load', function() {
	initializeFlickr();
}); 

/**
 * Initializes the flickr slideshow (resizes images, makes the block visible and begins the rotations)
 */
function initializeFlickr() {
	//Foreach flicker group
	$$(".flickr").each(function(flickrGroup) {
		//Make the flickr goup container visible
		flickrGroup.setStyle({display:"block"});
		var flickrGroupId = flickrGroup.identify();
		//Foreach image within the flickr group
		$$("#"+flickrGroupId+" img").each(function (img){
			//Set their max heights and widths first so we can get their new calculated sizes
			img.setStyle({
				maxHeight:flickrGroup.getHeight()+"px",
				maxWidth:flickrGroup.getWidth()+"px"
			});
			//Figure out the offset we need to have on them so the images can be centered in the container
			//We take the width of the flickr group container, subtract the width of the current image and divide that by 2 so we can add padding to center it
			var widthPadding =(flickrGroup.getWidth()-img.getWidth())/2;
			var heightPadding =(flickrGroup.getHeight()-img.getHeight())/2;
			//Set said offset and make the image invisible for preperation for rotations because the container is now visible!
			img.setStyle({
				display:"none",
				marginTop:heightPadding+"px",
				marginLeft:widthPadding+"px"
			});
		});
		//Begin rotation loop
		rotateImage(flickrGroupId);
	});
}

/**
 * Preforms the fade from one image to the next
 * @param groupId - the id of the group to rotate to the next image
 * @Self referencing
 */
function rotateImage(groupId) {
	var displayedImages = $$("#"+groupId + " img.displayed");
	if(displayedImages.size() == 0){//If there are no displayed images, grab the first one!
		currentImage = $$("#"+groupId + " img")[0];
	}else{
		currentImage = displayedImages[0];
	}
	
	var nextImage = currentImage.next();
	if(nextImage == undefined){//If there is no next image
		//Navigate to the top (loop), (we are at the bottom)
		nextImage = currentImage.up().down();
	}
	
	Effect.Fade(currentImage.identify());
	Effect.Appear(nextImage.identify());
	
	//Mark the current image as displayed
	nextImage.addClassName("displayed");
	//Remove displayed classname
	currentImage.removeClassName('displayed');
	//Rotate to the next image in 5000 ms (5 seconds)
	setTimeout("rotateImage('"+groupId+"');", 5000);
}