// execute when the DOM is ready
$(function() { 

	// initialize scrollable
	var scrollable = $("div.scrollable");
	var pageSize = 4; // number of visible nav items (configurable)
	scrollable.attr("pageSize", pageSize);
	$("div.scrollable").scrollable({ 
		size: pageSize, 
		items: ".scrollable div.items",
		item: ".navbar_btn"
	}); 

	// set hover event handlers
	$(".navbar_btn").hover(function() {
		if($(this).hasClass("rrSWnavBtnOn")) {
			// this is an active button
			return;
		}
		
		// set the current nav button
		$(".navbar_btn").removeClass("rrSWnavBtnOn");
		$(this).addClass("rrSWnavBtnOn");
		
		// switch description and slide items		
		var selectedItem = ".search" + $(this).attr("id").substring(6);		
		$(".item").hide();
		$(selectedItem).fadeIn();			
	});

	// select the first item
	$("div.scrollable .items #search1").trigger("mouseover");
	
	var autoSlidingTimePeriod = 5; // in seconds
	setInterval("SelectNextItem()", autoSlidingTimePeriod * 1000);
});

function SelectNextItem()
{
	var scrollable = $("div.scrollable");
	var activeNavbtn = scrollable.attr("activeNavbtn");
	if(activeNavbtn == undefined) {		
		activeNavbtn = 0;
	}
	else activeNavbtn = Number(activeNavbtn);
	
	var api = $("div.scrollable").scrollable({api: true});			
	var pageCount = api.getPageAmount();
	var pageIndex = api.getPageIndex();
	var pageSize = Number(scrollable.attr("pageSize"));
	var currItemInPage = api.getIndex();	
	
	if(activeNavbtn != 0 && activeNavbtn % pageSize == 0) {
		// got to the end of the page
		if(pageIndex < pageCount-1) api.nextPage();
		else {
			// got the end of items; start over
			api.setPage(0);
			activeNavbtn = 0;
		}
	}
	$("div.scrollable .items #search" + (activeNavbtn + 1)).trigger("mouseover");
	activeNavbtn++;	
	scrollable.attr("activeNavbtn", activeNavbtn);		
}