(function($){
	jQuery.fn.slideshow = function(){
		var pause = 4000;
		var speed = 900;
		var cur = 0;
			
		this.each(function() {
			
			var slideshow = $(this);
			var timeoutId;
			var nombre = $(this).find("li").length;
			var w = $(this).find("li").width(); 
			var h = $(this).find("li").height(); 
			$(this).width(w); 
			$(this).height(h); 
			$(this).css("overflow","hidden");
			$(this).find("ul").css('width',nombre*w);
			
			
			html = '<ul class="control">';
			for(i=0; i<nombre; i++){
				html += '<li>' + (i + 1) + '</li>';
			}
			html += '</ul>';
			$(this).append(html);
		
			$(this).find("ul.control li").mouseover(function(){
				$(this).css("cursor","pointer");
			})
					
			$(this).find("ul.control li").bind("click", function(){
				var index = $(slideshow).find("ul.control li").index(this);
				$(slideshow).find("ul.control li").removeClass("highlight");
				$(this).addClass("highlight");
				clearTimeout (timeoutId);
				move(index);
			})
			
			function move(id){
				if (id != cur){
					$(slideshow).find("ul").animate(
						{ marginLeft: -id*w }, 
						speed
					);
					cur = id;
				}
				timeoutId = setTimeout(function(){
					$(slideshow).find('ul.control li').eq((id == nombre-1)?0:cur+1).trigger("click");
				}, pause);
			}
			
			// init
			$(this).find("ul.control li").eq(cur).trigger("click");
		})
	};
})(jQuery);