/*
 * 	tab切换代码,基于jquery
 *	许峰编写，	
 *	http://www.online.sh.cn
 *
 *
 */
 
/*
 *	使用范例 $("#pic").switchtab();
 *	
 *	设计思路：
 *	算出显示图片区的高度和宽度
 *	在图片区的下方先添加一个层，做遮罩效果
 *	在遮罩效果层的下方再添加一个层，在<p></p>区域放置文字内容，在<UL></UL>区域显示数字
 *	用程序显示滚动效果
 */

(function($) {
	$.fn.switchtab = function(options){
	  
		// 缺省设置
		var defaults = {			
				auto: true,
				speed:800,
				tab:'tc1',
				divclass:'subtab',
				tabnormal:'tabnormal',
				tabhover:'tabhover'
		}; 
	var opts = $.extend({},$.fn.switchtab.defaults, options);  
	this.each(function() {  
			var obj=$(this);										//获取层对象
			var total_tab=$("#"+opts.tab+" li").length;				//有几个tab
			var imglayer=$("."+opts.divclass);						//获取切换层的名字
			var total_layer = $(imglayer).length;				//要轮转的图像总共有几张
			if (total_tab!=total_layer)return false;			//如果tab数和切换的层数不同，则错误返回	
			var normalstate=opts.tabnormal;
			var hoverstate=opts.tabhover;
			var j=1;
			var myroll;
			
			function scrollstart(){
				myroll=setInterval(function(){
				if (j>=total_tab)j=0;
				loadpic(j);
				j++;
				},opts.speed) ;
			};
			
			function loadpic(num){
					var i=parseInt(num);
					$("#"+opts.tab+" li").removeClass(hoverstate).addClass(normalstate);
					$("li:eq("+i+")",obj).removeClass(normalstate).addClass(hoverstate);
					$("."+opts.divclass).removeClass("show").addClass("hide");
					$("."+opts.divclass+":eq("+i+")").removeClass("hide").addClass("show");
			};
			
			$("#"+opts.tab+" li").hover(function(){
					j=$("#"+opts.tab+" li").index(this);
					clearInterval(myroll);
					loadpic(j);
			},function(){
				j++;
				scrollstart();
			});
			$("."+opts.divclass).hover(function(){
					j=$("."+opts.divclass).index(this);
					clearInterval(myroll);
			},function(){
				j++;
				scrollstart();
			});
			scrollstart();
		});
	};

})(jQuery);