(function($){


$.fn.extend({


slideshow : function(options){

	var settings = {
		
		type: "slide",
		width: 500,
		height: 375,
		interval: 0,
		duration: 1000,
		slides: "li",
		image: "img",
		controls: true,
		change: function(){}
		
	}
	
	if(options == "next") return this.transition("next");
	if(options == "prev") return this.transition("prev");
	if(!isNaN(parseInt(options))) return this.transition(options);
	
	var $this = this, $prev, slideIndex = 0,
		options = $.extend(settings, options), 
		$container = $("<div></div>")
			.addClass("slideshow " + options.type)
			.css({
					width: options.width,
					height: options.height
				}),
		$slides = $this.find(options.slides)
			.each(function(){
				$(this).attr("index", slideIndex++);
			}), 
		$current = $slides.filter(":first").fadeIn(options.duration);;
	
	this.transition = function(direction){
		if(!isNaN(parseInt(direction))){
			if(options.type == "slide") $this.scrollTo($current = $slides.filter("[index=" + direction + "]"), options.duration, { axis: "x" });
			else {
				$current.fadeOut(options.duration);
				$current = $slides.filter("[index=" + direction + "]").fadeIn(options.duration);
			}
			options.change($current.attr("index"), $current.get(0));
			return this;
		}
		var pend = (direction == "next") ? "append" : "prepend";
		if($current[direction](options.slides).length == 0){
			$this[pend]($this.find(options.slides).not($current));
			if(options.type == "slide")	$this.scrollTo($current, { axis: "x" });
		}
		if(options.type == "slide") $this.scrollTo($current = $current[direction](options.slides), options.duration, { axis: "x" });
		else $current = $current.fadeOut(options.duration)[direction](options.slides).fadeIn(options.duration);
		options.change($current.attr("index"), $current.get(0));
		return this;
	}
	
	
	if(options.type == "slide") $this.scrollTo(0, { axis: "x" });
	
	$slides
		.addClass("slideshow-slide")
		.css({
				width: options.width,
				height: options.height
			})
		.each(function(){
			$(this).css("background-image", "url(" + $(this).find(options.image).remove().attr("src") + ")");
		})
		.show()
		.appendTo($this)
		.find(options.titleClass);
		
	
	$next = $("<div></div>")
		.slideshowControl("next")
		.click(function(){
			$this.interval("clear")
			$this.transition("next");
		});
	$prev = $("<div></div>")
		.slideshowControl("prev")
		.click(function(){
			$this.interval("clear");
			$this.transition("prev");
		});
	
	
	
	$controls = $("<div></div>")
		.addClass("slideshow-controls")
		.append($prev)
		.append($next)
		.css({
				width: options.width,
				height: options.height
			});
		
	this
		.hide()
		.wrap( $container )
	if(options.controls) this.before($controls);
	if(options.interval) this.interval(function(){ $this.transition("next"); }, options.interval)

	if(options.type == "fade") $slides.not(":first").hide();
	
	
	return this.show();
	
	
},

slideshowControl : function(type){
	this
		.addClass("slideshow-" + type)
		.mouseover(function(){
			$(this).css("opacity", 1);
		})
		.mouseout(function(){
			$(this).css("opacity", 0);
		})
		.css("opacity", 0);
	return this;
}




})





})(jQuery);