(function($) {

$.fn.innerfade = function(options) {

	this.each(function(){ 	
		
		var settings = {
			animationtype: 'fade',
			speed: 'normal',
			timeout: 2000,
			type: 'random',
			containerheight: 'auto',
			runningclass: 'innerfade'
		};
		
		if(options)
			$.extend(settings, options);
		
		var container = this;
		var slideCount = settings.slideContents.length;
		slideArray = new Array();
		for( var i = 0; i < settings.slideContents.length; i++ )
		{
			var tmpArray = new Array( settings.slideContents[i], 0 );
			slideArray.push( tmpArray );
		}
		
		//should contain only one element, the default which would show if no javascript was present...
		elements = $(this).children();
		if( slideArray.length > 1 )
		{
			$.innerfade.chainload( container, slideArray, 1 );
		}
		
	
		if( settings.slideContents.length > 1 )
		{
		
			$(container).css('position', 'relative');
	
			$(container).css('height', settings.containerheight);
			$(container).addClass(settings.runningclass);
			
			for ( var i = 0; i < elements.length; i++ ) {
				$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute');
				$(elements[i]).hide();
			};
		
			
			if ( settings.type == 'sequence' ) {
				setTimeout(function(){
					$.innerfade.next( container, settings, 1, 0);
				}, settings.timeout);
				$(elements[0]).show();
			} else if ( settings.type == 'random' ) {
				setTimeout(function(){
					do { current = Math.floor ( Math.random ( ) * ( elements.length ) ); } while ( current == 0 )
					$.innerfade.next(elements, settings, current, 0);
				}, settings.timeout);
				$(elements[0]).show();
			}	else {
				alert('type must either be \'sequence\' or \'random\'');
			}
			
		}
		
	});
};


$.innerfade = function() {}

$.innerfade.chainload = function( container, slideArray, current )
{
	if( current <= slideArray.length-1 )
	{
		$(container).append("<li></li>");
		els = $(container).children();
		$(els[els.length-1]).html( slideArray[current][0] );
		
		//if an image is found in the current slide, defer adding the next slide until this slide is loaded. Otherwise, load the next
		if( $(els[els.length-1]).find( "img" ) )
		{		
			$(els[els.length-1]).find( "img" ).load( function() { $.innerfade.chainload( container, slideArray, current + 1) } );
		}
		else
		{
			$.innerfade.chainload( container, slideArray, current + 1);
		}
	}
}
$.innerfade.next = function ( slideshowContainer, settings, current, last) {

	var elements = $(slideshowContainer).children();
	for ( var i = 0; i < elements.length; i++ ) {
				$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute');
				$(elements[i]).hide();
			};

	if( elements.length > 1 )
	{
		if ( settings.animationtype == 'slide' ) {
			$(elements[last]).slideUp(settings.speed, $(elements[current]).slideDown(settings.speed));
		} else if ( settings.animationtype == 'fade' ) {
			$(elements[last]).fadeOut(settings.speed);
			$(elements[current]).fadeIn(settings.speed);
		} else {
			alert('animationtype must either be \'slide\' or \'fade\'');
		};
		
		if ( settings.type == 'sequence' ) {
			if ( ( current + 1 ) < elements.length ) {
				current = current + 1;
				last = current - 1;
			} else {
				current = 0;
				last = elements.length - 1;
			};

		}	else if ( settings.type == 'random' ) {
			last = current;
			
			while (	current == last ) {
				current = Math.floor ( Math.random ( ) * ( elements.length ) );
			};
		}	else {
			alert('type must either be \'sequence\' or \'random\'');
		};
		setTimeout((function(){$.innerfade.next(slideshowContainer, settings, current, last);}), settings.timeout);
		
	}
	else
		{
			
			setTimeout(function(){
					$.innerfade.next( slideshowContainer, settings, 1, 0);
				}, 1000);
		}
};
})(jQuery);

//the first element in this list needs to be included explicitly in the HTML, for more graceful degrading...
var contents = new Array(
"<a href=\"fred.html\"><img src=\"./image/front1.jpg\" width=\"569\" height=\"242\" alt=\"Webster's on Aaron\"></a>",
"<a href=\"fred.html\"><img src=\"./image/front2.jpg\" width=\"569\" height=\"242\" alt=\"Webster's Tea Selection\"></a>",
"<img src=\"./image/front3.jpg\" width=\"569\" height=\"242\" alt=\"Gretchen at Webster's Bookstore Café\">",
"<img src=\"./image/front4.jpg\" width=\"569\" height=\"242\" alt=\"Webster's Bookstore Café\">",
"<img src=\"./image/front8.jpg\" width=\"569\" height=\"242\" alt=\"Stax of Trax\">",
"<img src=\"./image/front6.jpg\" width=\"569\" height=\"242\" alt=\"Muffin, coffee, and a good book at Webster's\">",
"<img src=\"./image/front7.jpg\" width=\"569\" height=\"242\" alt=\"Dads and daughters at Webster's Bookstore Café\">"
);
$(document).ready(
				function(){

					$('ul#frontimg').innerfade({
						speed: 2000,
						timeout: 10000,
						type: 'sequence',
						containerheight: '242px',
						slideContents: contents
					});


			});