/**
 * EasyCarousel - A simple, animated image carousel, which links each image to a website
 * Author: Ryan Kinal
 * Requires: jQuery
 * Notes: This was written to pretty specific image standards. It expects
 *		images to be about 200px wide. I used base images of width 200px
 *		and mouseover images of width 210px for the original implementation.
 *		I also expected a total container size of around 850px to 900px.
 *		That's why there are some hard-coded margins in the mouseovers.
**/
var Carousel = function(p_items, p_delay)
{
	/** 
	 * The list of images that will be in the carousel. This is an
	 * array of objects, each having up to four attributes:
	 * 		image (required) - the URL (relative or absolute) of the base image
	 *		website (required) - the URL of the page the image links to
	 *		over (optional) - the URL of the mouseover image
	 *		alt (optional) - the image's alt text
	**/
	var items = p_items;
	
	var imageWidth = 125;
	var numImages = 7;
	
	// The time it takes to scroll the carousel by one image.
	var delay = (p_delay) ? p_delay : 1250;
	
	/** 
	 * Makes a mouseover function for the given image - used internally
	 * 		p_image - a jQuery object of an image ($(image))
	 * 		p_over - the URL of the mouseover image
	**/
	var makeMouseOver = function(p_image, p_over)
	{
		return function()
		{
			p_image.attr('src', p_over);
			p_image.parent().css({'margin-right': '5px', 'margin-top': '0px'});
		}
	}
	
	/** 
	 * Makes a mouseout function for the given image - used internally
	 *		p_image - a jQuery object of an image ($(image))
	 *		p_out - the URL of the mouseout image (usually the original image)
	**/
	var makeMouseOut = function(p_image, p_out)
	{
		return function()
		{
			p_image.attr('src', p_out);
			p_image.parent().css({'margin-right': '15px', 'margin-top': '10px'});
		}
	}
	
	/** 
	 * A list of the actual elements that make up the carousel
	 * Populated from the items array above
	**/
	var links = [];
	
	// Populate the list
	var i;
	for (i = 0; i < items.length; i++)
	{
		// variables information for easy access and testing
		var website = items[i].website;
		var imageURL = items[i].image;
		var overURL = (items[i].over) ? items[i].over : null;
		var alt = (items[i].alt) ? items[i].alt : null;
		
		// Create the link/anchor element, and give it the class 'carouselItem'
		var anchor = document.createElement('a');
			anchor.href = website;
			anchor.className = 'carouselItem';
			anchor.target = '_new';
		
		// Create the image element
		var image = document.createElement('img');
			image.src = imageURL;
			
		// Grab the image with jQuery
		var jImage = $(image);
		
		// If we have a mouseover URL, then we'll make the mouseover and mouseout
		if (overURL)
		{
			var preloadImage = new Image();
				preloadImage.src = overURL;
			jImage.mouseover(makeMouseOver($(image), overURL));
			jImage.mouseout(makeMouseOut($(image), imageURL));
		}
		
		// If we have alt text, then set the alt text
		if (alt)
		{
			jImage.attr('alt', alt);
		}
		
		// Put the image in the anchor
		anchor.appendChild(image);
		
		// Add it to the list
		links.push(anchor);
	}
	
	// Drives the animation; all the movement and fading - used internally
	var animate = function()
	{
		// Make a callback function, so when the animation finishes, we
		// can start it again
		var callback = function()
		{animate();}
	
		// Take the first item in line
		var e = links.shift();
		
		// Add it to the container - if it's already there, it will be moved to the end.
		$('.carouselContainer').append($(e));
		
		// Make sure the item we just added/moved is in the right place, 
		// with the right opacity (transparent)
		$('.carouselItem:last').css({marginLeft: 0, opacity: 0});
		
		// Fade the fifth element in
		$('.carouselItem:eq(5)').animate({marginLeft: 0, opacity: 1}, delay);
		
		// Reduce the margin of the first element (moving all of the elements)
		// and fadeit out
		$('.carouselItem:first').animate({marginLeft: '-140', opacity: 0}, delay, undefined, callback);
		links.push(e);
	}
	
	/**
	 * The sole public function. Takes a jQuery grab of any container element,
	 * though preferably a block-level element.
	 *		p_elem - A jQuery container
	**/
	this.draw = function(p_elem)
	{
		// Make sure some specific CSS is there, so the images don't wrap, and
		// we don't see anything outside of the container.
		p_elem.css({'overflow': 'hidden', 'whiteSpace' : 'nowrap'});
		
		// Give the container a class, so we can reference it later
		p_elem.addClass('carouselContainer');
		
		// Add images/links to the container
		var i = 0;
		while (i < links.length)
		{
			// If it's one of the first 5, push them to the bottom of the list,
			// so we display the next one correctly
			if (i < 7)
			{
				var e = links.shift();
				links.push(e);
			}
			
			p_elem.append($(e));
			i++;
		}
		
		// Fade out all the items, then fade the others back in
		$('.carouselItem').fadeOut(0);
		$('.carouselItem:lt(5)').fadeIn(delay);
		
		// Call the initial animation
		animate();
	}
}