var scrollApi;

//Hide the features, otherwise the fiirst one will be visible a short while before the rendom first feature is shown
var sCss = "<style>.feature-box .items { visibility:hidden; } </style>";
document.write(sCss);

function initHome() {
	scrollApi = $("div.feature-box").scrollable( {
		clickable:false,
		size:1
	} );
	scrollApi = $("div.feature-box").scrollable();
	var numFeatures = $("div.feature-box .items div[class^=featureItem]").length;
	var randStartFeature = Math.floor(numFeatures * Math.random());
	var elmFeatureTd = $(".feature-table tr td").get(randStartFeature);
	scrollFeature(randStartFeature, elmFeatureTd, true);
	
	//Show the features that we did hide before
	setTimeout('$(".feature-box .items").css( { visibility:"visible" } );', 10);
	
	if (numFeatures < 2)
		$(".feature-table").css( { display:"none" } );
}

function scrollFeature(i, elmTd, bNoAnim) {	
	$(elmTd).siblings().removeClass("active");
	$(elmTd).addClass("active");
	var time = bNoAnim ? 1 : 700; // First feature is not animated
	scrollApi.seekTo(i, time);
}

$(document).bind("ready", initHome);