$.imageSlideshow = {
	build : function(user_options)
	{
		var defaults = {
			show_captions: true,
			slide_enabled: true,
			auto_play: true,
			show_prev_next: true,
			slide_speed: 500,
			thumb_width: 5,
			thumb_height: 5,
			buttons_text: { play: "", stop: "", previous: "Previous", next: "Next" },
			delay_caption: true,
			user_thumbs: false
		};

		return $(this).each(
			function() {
				function LoadImages()
				{
					$(this).bind("load", function()
					{
						//had to make a seperate function so that the thumbnails wouldn't have problems
						//from beings resized before loaded, thus not h/w
						
						//delete hidden image to clean up things.
						$(this).parent('div').prev().remove();
						images = $(this).parents('ul').find('img');
						var w = $(this).width();
						var h = $(this).height();
						if(w===0){w = $(this).attr("width");}
						if(h===0){h = $(this).attr("height");}
						//grab a ratio for image to user defined settings
						var rw = options.thumb_width/w;
						var rh = options.thumb_height/h;
						
						//determine which has the smallest ratio (thus needing
						//to be the side we use to scale so our whole thumb is filled)
						var ratio;
						if(rw<rh){
							//we'll use ratio later to scale and not distort
							ratio = rh;
							var left = ((w*ratio-options.thumb_width)/2)*-1;
							left = Math.round(left);
							//set images left offset to match
							$(this).css({left:left});
						}else{
							ratio = rw;
							//you can uncoment this lines to have the vertical picture centered
							//but usually tall photos have the focal point at the top...
							//var top = ((h*ratio-options.thumb_height)/2)*-1;
							//var top = Math.round(top);
							var top = 0;
							$(this).css({top:top});
						}
						//use those ratios to calculate scale
						var width = Math.round(w*ratio);
						var height = Math.round(h*ratio);
						$(this).css("position","relative");
						$(this).width(width).height(height);
						var imgcss={
							width: width,
							height: height
						};
						$(this).css(imgcss);					
						$(this).hover(
							function(){$(this).fadeTo(250,1);},
							function(){if(!$(this).hasClass("imageSlideshow_selected")){$(this).fadeTo(250,0.4);}}
						);
						$(this).fadeTo(250,0.4);	
						
						if($(this).hasClass('imageSlideshow_first')){
							$(this).trigger("click",["auto"]);
						}
						
					});
				
					//clone so the on loads will fire correctly
					var newImage = $(this).clone(true).insertAfter(this);
					
					$(this).hide();
	
					//reset images to the clones
					images = ulist.children('li').children('img');
				}

				//bring in options
				var options = $.extend(defaults, user_options);
				// grab our images
				var images = $(this).children('li').children('img');
				//hide the images so the user doesn't see crap
				images.fadeOut(1);
				
				//save our list for future ref
				var ulist = $(this);
				images.each(LoadImages);
				//start building structure
				$(this).before("<div class='imageSlideshow_main'></div>");
				// houses eveything about the UL
				var main_div = $(this).prev(".imageSlideshow_main");
				
				//add in slideshow elements when appropriate
				if(options.slide_enabled){
					main_div.append("<div class='imageSlideshow_play'></div>");
					var play_div = $(this).prev(".imageSlideshow_main").children(".imageSlideshow_play");
					play_div.html("<a class='imageSlideshow_play_button'>" + options.buttons_text.play + "</a><a class='imageSlideshow_stop_button'>" + options.buttons_text.stop + "</a>");
					var play_anchor = play_div.children('a:first');
					var stop_anchor = play_div.children('a:last');
				}
				//this div is used to make image and caption fade together
				main_div.append("<div class='imageSlideshow_subdiv'></div>");
				var sub_div = main_div.children(".imageSlideshow_subdiv");
				
				//the main image we'll be using to load
				sub_div.append("<img class='imageSlideshow_back_img'/><img class='imageSlideshow_main_img' />");
				var main_img = sub_div.children("img:last");
				var back_img = sub_div.children("img:first");

				//build custom overlays. These will use navigation div
				main_div.append("<div class='imageSlideshow_prev_hover'></div><div class='imageSlideshow_next_hover'></div>");
				var prevHover = main_div.find('.imageSlideshow_prev_hover');
				var nextHover = main_div.find('.imageSlideshow_next_hover');

				//create the caption div when appropriate
				if(options.show_captions){
					main_div.append("<div class='imageSlideshow_caption'></div>");
					var caption_div = main_div.children(".imageSlideshow_caption");
				}
				
				//navigation div ALWAYS gets created, its refrenced a lot				
				$(this).after("<div class='imageSlideshow_navigation'></div>");
				var navigation_div = $(this).next(".imageSlideshow_navigation");
				//fill in sub elements
				navigation_div.prepend("<a>" + options.buttons_text.previous + "</a> :: <a>" + options.buttons_text.next + "</a>");
				var previous_image_anchor = navigation_div.children('a:first');
				var next_image_anchor = navigation_div.children('a:last');
				
				//hide the navigation if the user doesn't want it
				if(!options.show_prev_next){
					navigation_div.css("display","none");
				}
				
				//playing triggers the loop for the slideshow
				var playing = options.auto_play;
				
				main_img.wrap("<a></a>");
				var main_link = main_img.parent("a");
				
			function activate()
			{
				//sets the intial phase for everything
				
				//image_click is controls the fading
				images.bind("click",image_click);
				//hiding refrence to slide elements if slide is disabled
				if(options.slide_enabled){
					if(options.auto_play){
						playing = true;
						play_anchor.hide();
						stop_anchor.show();
					}else{
						play_anchor.show();
						stop_anchor.hide();
					}
				}
				
				ulist.children("li:last").children("img").addClass("imageSlideshow_last");
				ulist.children("li:first").children("img").addClass("imageSlideshow_first");
				ulist.children("li").each(function(){ $(this).children("span").hide(); });
				//css for the list
				var divcss = {
					width: options.thumb_width+"px",
					height: options.thumb_height+"px",
					"list-style": "none",
					overflow: "hidden"
				};
				var licss = {
					"list-style": "none",
					overflow: "hidden"
				};
				
				ulist.css({display:'none'});

				//previous link to go back an image
				previous_image_anchor.bind("click",previous_image);
				prevHover.bind("click",previous_image);
				
				//ditto for forward, also the item that gets auto clicked for slideshow
				next_image_anchor.bind("click",next_image);
				nextHover.bind("click",next_image);	
				
			}//end activate function

			function image_click(event, how){
					//catch when user clicks on an image Then cancel current slideshow
					if(how!="auto"){
						if(options.slide_enabled){
							stop_anchor.hide();
							play_anchor.show();
							playing=false;
						}
						main_img.stop();
						main_img.dequeue();
						if(options.show_captions)
						{
							caption_div.stop();
							caption_div.dequeue();
						}
					}
					//all our image variables
					if(options.user_thumbs)
					{		
						var image_source = $(this).attr("ref");
					}else
					{
						var image_source = this.src;
					}
					var image_link = $(this).attr("rel");
					var image_caption = $(this).parent().next("span").html();
					//fade out the old thumb
					images.filter(".imageSlideshow_selected").fadeTo(250,0.4); 
					images.filter(".imageSlideshow_selected").removeClass("imageSlideshow_selected"); 
					//fade in the new thumb
					$(this).fadeTo(250,1);
					$(this).addClass("imageSlideshow_selected");
					//fade the caption out
					if(options.show_captions)
					{
						if(options.delay_caption)
						{
							caption_div.fadeTo(800,0);
						}
						caption_div.fadeTo(500,0,function(){
							caption_div.html(image_caption);
							caption_div.fadeTo(800,1);
						});
					}
					//set back imge = main_img
					var delay = 100;
					if(main_img.attr('opacity') < 0.8)
					{
						delay = 500;
					}
					back_img.attr("src", main_img.attr("src"));
					main_img.fadeTo(delay,0.00,function(){
						//make the image fade in on load, which should hopefully get rid of any jumping
						main_img.unbind('load');
						main_img.bind('load',function()
 						{
							main_img.fadeTo(800,1,function(){
								if(playing){
									$(this).animate({opactiy:1},options.slide_speed, function(){
										//redudency needed here to catch the user clicking on an image during a change.
										if(playing){next_image_anchor.trigger("click",["auto"]);}
									});
								}
								//reset it here to catch initial load.
								back_img.attr("src", main_img.attr("src"));
							});
						});
						main_img.attr("src",image_source);

						main_link.attr("href", image_link);
						
					});
			}//end image_click function
			
			function next_image(event, how){
				if(images.filter(".imageSlideshow_selected").hasClass("imageSlideshow_last")){
					images.filter(":first").trigger("click",how);
				}else{
					images.filter(".imageSlideshow_selected").parents('li').next('li').find('img').trigger("click",how);
				}
			}//end next image function
			
			function previous_image(event, how){
				if(images.filter(".imageSlideshow_selected").hasClass("imageSlideshow_first")){
					images.filter(":last").trigger("click",how);
				}else{
					images.filter(".imageSlideshow_selected").parents('li').prev('li').find('img').trigger("click",how);
				}
			}//end previous image function
			
			function play_button(){
				play_anchor.bind("click", function(){
					main_img.stop();
					main_img.dequeue();
					if(options.show_captions)
					{
						caption_div.stop();
						caption_div.dequeue();
					}
					playing = true;
					next_image_anchor.trigger("click",["auto"]);
					$(this).hide();
					stop_anchor.show();
				});
				stop_anchor.bind("click", function(){
					playing = false;
					$(this).hide();
					play_anchor.show();
				});
			}
			if(options.slide_enabled){play_button();}
			activate();

		});//end return this.each
	}//end build function
	
	//activate applies the appropriate actions to all the different parts of the structure.
	//and loads the sets the first image
};//end $.imageSlideshow		
$.fn.imageSlideshow = $.imageSlideshow.build;