$(function(){
	// align all the content ine one horizontal row
	var left = 0
	var tabMargin = 30;
	var tabSlider = $('<div id="featuredbox-tab-slider" style="position:absolute;left:0px"><div id="featuredbox-activetab"><div class="left"></div><div class="mid"></div><div class="right"></div></div></div>').appendTo($("#featuredbox-tabs"))
	var activeTab = $('#featuredbox-activetab')
	var tabWidth = $("#featuredbox-tabs").width()
	var tabPages = []
	var content = []
	var currentContentIx=0;
	$(".featuredbox-content").wrapAll("<div id=\"featuredbox-content-slider\" style=\"position:absolute;left:20px;\"></div>").each(function(ix){
		// position horizontally and show
		left += $(this).css({top:'0px',left:left+'px'}).show().width()
		
		// create tabs
		var tabParts = $(this).attr('title').split("|")
		var tab = $('<a class="featuredbox-tab">'+unescape(tabParts[0])+'<span>'+unescape(tabParts[1])+'</span> </a>').appendTo(tabSlider);
		var page = tabPages[tabPages.length-1]
		if( typeof(page)=='undefined' || page.width + tab.width()+tabMargin > 700){
			page = tabPages[tabPages.length] = {width:0, tabs:[], index:tabPages.length}// start a new tabpage
		}
		page.tabs[page.tabs.length] = tab;
		page.width += tab.width()+tabMargin;
		tab.click(function(){
			setContent(ix)
			clicked = true; 
			return false;
		})
		
		// save content for later
		content[content.length] = {page:page, content:$(this), tab:tab}
		
	});
	
	// layout tabs
	for(var p=0;p!=tabPages.length;p++){
		var page = tabPages[p];
		var l = p*800+(800-page.width)/2;
		for(var t=0;t!=page.tabs.length;t++){
			var tab = page.tabs[t];
			tab.css('left',l+(tabMargin/2) + 'px')
			l+= tab.width()+tabMargin
		}
	}
	
	var slider = $("#featuredbox-content-slider").css("left",'960px')
	var previousButton = $("a.featuredbox-previous").click(function(){return moveTabPage(parseInt(tabSlider.css('left'))+tabWidth)})
	var nextButton = $("a.featuredbox-next").click(function(){return moveTabPage(parseInt(tabSlider.css('left'))-tabWidth)})
	
	// introduction animation
	tabSlider.css("left",tabWidth+'0px')
	activeTab.hide()
	tabSlider.hide()
	setContent(0);
	tabSlider.fadeIn('normal',function(){
		activeTab.show().css('left',tabWidth + 'px')
		setContent(0)
	})
	
	// auto switching
	var clicked = false, hover=false;
	$("#featurebox-main").hover(function(){ hover = true; }, function(){ hover = false; }).click(function(){clicked=true;})
	setInterval(function(){
		if( !clicked && !hover ){
			setContent((currentContentIx+1)%content.length)
		}
	},5000);
	
	function setContent(ix){
		currentContentIx = ix;
		slider.animate({left:'-' + (ix*960) +'px'},'500')
		activeTab.animate({left:content[ix].tab.css('left')}, 500);//, width:content[ix].tab.css('width')},9000)
		activeTab.find(".mid").animate({width:content[ix].tab.width()},500)
		moveTabPage(-content[ix].page.index*tabWidth)
	}
	function moveTabPage(position){
		var l = Math.max(-((tabPages.length-1)*tabWidth), Math.min(0,position))
		tabSlider.animate({left: (l) +'px'},'500')
		if( document.all){ 
			previousButton[l==0?'hide':'show']()
			nextButton[l==-(tabPages.length-1)*tabWidth?'hide':'show']()
		}else{
			previousButton.fadeTo('slow', l==0?0.25:1)
			nextButton.fadeTo('slow', l==-(tabPages.length-1)*tabWidth?0.25:1)
		}
		return false;
	}
})