/*
slideshow layout example:

<div id="testSlideshow">
	<div style="background-image:url(image1); width:800px; height:315px;">
		<span>credit info for image 1</span>
		<p>caption for image 1</p>
	</div>
	<div style="background-image:url(image2); width:800px; height:315px;">
		<span>credit info for image 2</span>
		<p>caption for image 2</p>
	</div>
</div>

each of these is required for a slide
div = the actual slide images. background-image, width and height style are required.
span = credit
p = caption

usage:

<script type="text/javascript">
    $(document).ready(function(){
            $.slideshow('#testSlideshow', {'imageHeight':'315px','fadeSpeed':600} );
    });
</script> 

required settings:

imageHeight - sets the height for slideWrapper div, this prevents the slide area from collapsing.

optional settings:

fadeSpeed - how fast/slow in miliseconds the image will fade in.
*/

(function($){
    $.slideshow = function(selector, settings){
        
		var config = {
			'imageHeight': '350px',
            'fadeSpeed': 600
        };

		if (settings){$.extend(config, settings);}
		
		//root div
		var $obj = $(selector);
		$obj.addClass("slideshow");
		
		//create slideshowWrapper
		var $slideWrapper = $('<div class="slideWrapper" style="height:' + config.imageHeight + ';" />');
		$(selector + " div").wrapAll($slideWrapper);
		
		//create buttonBar div
		var slideCount = $(selector + " .slideWrapper div").size();
		var $buttonBar = $('<div class="buttonBar" />').append("<ul />")
		for (i=1; i<=slideCount; i++){
			$buttonBar.children("ul").append('<li><a href="#">' + i + '</a></li>');
		}
		$obj.children(".slideWrapper").after($buttonBar);
		
		//create caption
		var $caption = $('<div class="caption" />');
		$obj.children(".buttonBar").after($caption)

		//move captions to caption div
		$(selector + " .slideWrapper div p").appendTo($(".caption"));
		
		//set first items to active
		$(selector + " .slideWrapper div").eq(0).addClass("active");
		$(selector + " .buttonBar li").eq(0).addClass("active");
		$(selector + " .caption p").eq(0).addClass("active");

		//bind click event to buttons
		$(selector + " .buttonBar a").click(function(event){
			var index = $(selector + " .buttonBar a").index(this);
			
			var $lastActive = $(selector + " .slideWrapper div.active");
			$lastActive.addClass("lastActive").removeClass("active");
			
			var $slide = $(selector + " .slideWrapper div").eq(index);
			$slide.css({opacity: 0.0}).addClass("active").animate({opacity: 1.0}, config.fadeSpeed, function() {
				$lastActive.removeClass("lastActive");
			});
		
			$(selector + " .buttonBar li").removeClass("active");
			$(this).parent().addClass("active");

			$(selector + " .caption p").removeClass("active").eq(index).addClass("active");

			event.preventDefault();			
		});
 
        return this;
    };
})(jQuery);