jquery.fn.extend({
	
	slidefocus: function(){
		var this = $(this);
		var swidth = $(this).width(),
			len    =$(this).find('ul li').length,
			index  = 0,
			timer;

		// btn event
		var btn = "<div class='btn'>";
		for(var i=0; i < len; i++) {
			btn += "<span></span>";
		};
		btn += "</div><div class='prenext pre'></div><div class='prenext next'></div>";
		$(this).append(btn);
		$(this).find('.btn span').eq(0).addclass('on');


		$(this).find('.btn span').mouseover(function(){
			index = $(this).find('.btn span').index(this);
			tony(index);
		});

		$(this).find('.next').click(function(){
			index++;
			if(index == len){index = 0;}
			tony(index);
		});

		$(this).find('.pre').click(function(){
			index--;
			if(index == -1){index = len - 1;}
			tony(index);
		});


		// start setinterval		
		$(this).find('ul').css("width",swidth * (len));
		$(this).hover(function(){
			clearinterval(timer);
			show($(this).find('.prenext'));
		},function(){
			hide($(this).find('.prenext'));
			timer=setinterval(function(){
				tony(index);
				index++;
				if(len == index){index = 0;}
			}, 4000)
		}).trigger("mouseleave");

		function tony(index){
			var new_width = -index * swidth;
			$(this).find('ul').stop(true,false).animate({'left' : new_width},300);
			$(this).find('.btn span').stop(true,false).eq(index).addclass('on').siblings().removeclass('on');
		};

		
		// show hide
		function show(obj){ $(obj).stop(true,false).fadein();}
		function hide(obj){ $(obj).stop(true,false).fadeout();}
	}
});