$(function(){
	$t=null;
	$t2=null;
	$("#navContent > li > a").mouseover(function(){
		if($t){clearTimeout($t);}
		$(this).parent().siblings("li").not(":last").children("div").hide();
		$height=$(this).parent().children(".yizin").stop(true,true).height();
		$(this).parent().children(".yizin").stop(true,true).show().css({height:0,top:0,opacity:""}).animate({height:$height,top:(-$height-30)});
	});
	$("#navContent > li > a").mouseout(function(){
		var obj=this;
		$t=setTimeout(
			function(){
				$(obj).parent().children(".yizin").stop(true,true).animate({opacity:"0"});
			}
			,1000
		)
	});
	$("#navContent .yizin").hover(function(){
			if($t){
				clearInterval($t);
				$t=null;
			}
			if($t2){clearInterval($t2);$t2=null;}
		},
		function(){
			var obj=this;
			$t=setTimeout(
				function(){
					$(obj).animate({opacity:"0"});
				}
				,1000
			)
		}
	);

	$(".canhover").mouseover(function(){
		if($t2){clearInterval($t2);}
		var $iIndex=$(this).parent().index();
		var $width=$(this).parent().parent().siblings(".content_"+$iIndex).stop(true,true).width();
		$(this).parent().parent().siblings(".content_"+$iIndex).siblings("div").stop(true,true).hide();
		$(this).parent().parent().siblings(".content_"+$iIndex).stop(true,true).css({width:0,right:0}).animate({width:$width,right:-$width+10});
	});
	$(".canhover").mouseout(function(){
		var obj=this;
		
		var $iIndex=$(this).parent().index();
		$t2=setTimeout(function(){
		$(obj).parent().parent().siblings(".content_"+$iIndex).fadeOut();},30);
	});
	$(".content_third > div").mouseover(function(){//m_r
		if($t2){
			clearTimeout($t2);
		}
	});

})


$(function(){
	var oUl=document.getElementById("tabs");
	if(oUl){
		new Tabs(oUl);
	}
});



var oJson=[
	{title:"第一张图",content:"嗯，是第一张图"},
	{title:"第二张图",content:"嗯，是第二张图"},
	{title:"第三张图",content:"嗯，是第三张图"},
	{title:"第四张图",content:"嗯，是第四张图"},
];
var Tabs=function(oEle){
	var obj=this;
	this.oTimer=null;
	this.speed=0;
	this.oEle=oEle;
	this.goIndex=0;
	this.oJson=oJson;
	this.oUl=this.oEle.getElementsByTagName("ul")[0];
	this.aLi=this.oUl.getElementsByTagName("li");
	this.pre=document.getElementById("btn_left");
	this.next=document.getElementById("btn_right");
	this.oOl=document.getElementById("tabs_ul");
	this.aLi2=this.oOl.getElementsByTagName("li");
	this.tit=document.getElementById("feizhezhao").getElementsByTagName("div")[0];
	this.content=document.getElementById("feizhezhao").getElementsByTagName("div")[1];
	this.pre.onmousedown=function(){
		obj.imgShow(((obj.goIndex+obj.aLi.length-1)%obj.aLi.length));
	};
	this.next.onmousedown=function(){
		obj.imgShow((obj.goIndex+1)%obj.aLi.length);
	};
	for(var j=0;j<this.aLi2.length;j++){
		this.aLi2[j].iIndex=j;
		this.aLi2[j].onmousedown=function(){
			obj.imgShow(this.iIndex);
		};
	}
};
Tabs.prototype.startMove=function(tags,iTarget){
	var obj=this;
	for(var i=0;i<this.aLi2.length;i++){
		this.aLi2[i].className="";
	}
	this.aLi2[this.goIndex].className="hover";
	if(this.oTimer){
		clearInterval(this.oTimer);
	}
	this.oTimer=setInterval(
		function(){
			obj.doMove(tags,iTarget);
		}
		,30);
};
Tabs.prototype.doMove=function(tags,iTarget){
	if(Math.abs(tags.offsetLeft-iTarget)<25){
		clearInterval(this.oTimer);
		this.oTimer=null;
		tags.style.left=iTarget+'px';
		//这里提供一个接口让其content变化
	}
	else{
		if(tags.offsetLeft<iTarget){
			this.speed=20;
		}
		else{
			this.speed=-20;
		}
		tags.style.left=tags.offsetLeft+this.speed+"px";
	}
};
Tabs.prototype.imgShow=function(index){
	for(var i=0;i<this.aLi2.length;i++){
		this.aLi[i].className="";
	}
	this.aLi[index].className="hover";
	this.goIndex=index;
	this.tit.innerHTML=this.oJson[this.goIndex].title;
	this.content.innerHTML=this.oJson[this.goIndex].content;
	this.startMove(this.oUl,-this.goIndex*this.oUl.getElementsByTagName("li")[0].offsetWidth);
};