$(document).ready(function(){
	var prev;
	var offset; 
	var $tab = $("#tab");
	var searchText = "";
	var hov = false;
	var activeLink = $("#navi a").eq($("#activesav").val());

	/*For the default showing $tab on the page*/
	if(activeLink == 0)
		$tab.css({left: activeLink.offset().left + 10});
	else
		$tab.css({left: activeLink.offset().left});
	
	$tab.html(activeLink.next().html()).stop().fadeIn(0).animate({opacity: 1.0, top: "85px"}, 400);
	var first = true;
	

	$("#navi a.extend, #navi li.navi_extend a, #navi_first").hover(function()
	
	{
		if($(this).is(".navi_last"))
		{
			hov = true;
			offset = $(this).offset().left - 90;
		}
		else if($(this).is("#navi_first"))
			offset = $(this).offset().left + 10;
		else
			offset = $(this).offset().left;

		if(!$tab.is(":visible"))
			$tab.css({left: offset});
		else
			$tab.animate({left: offset}, 350);
		
		if(first)
		{
			$tab.animate({left: offset}, 350);
			first = false;
		}
		
		$tab.html($(this).next().html()).stop().fadeIn(0).animate({opacity: 1.0, top: "85px"}, 400);

		$("#tab input.tb").val(searchText);
		
	
	}, function()
	{
		$tab.dequeue();
		$tab.stop().animate({opacity: 0.0, top: "15px"}, 400, function(){$tab.hide();});
		if($(this).is(".navi_last"))
			searchText = $("#tab input.tb").val();
	});

	$tab.hover(function()
	{
		$tab.stop().animate({opacity: 1, top: "85px"}, 400);
		
	}, function()
	{
		$(this).stop().animate({opacity: 0.0, top: "15px"}, 400, function(){$tab.hide();});
		searchText = $("#tab input.tb").val();
	});
});