// Homepage Feature JavaScript Document

var featureDelay = 11000;
var firstCall = true;

init();

function init() {
	//store feature links in arrays
	feature1 = new Array(1);
	feature1[0] = 'feature1';
	feature2 = new Array(1);
	feature2[0] = 'feature2';
	feature3 = new Array(1);
	feature3[0] = 'feature3';
	feature4 = new Array(1);
	feature4[0] = 'feature4';
	
	//calculate a random link for each
	index1 = Math.floor(Math.random() * feature1.length);
	index2 = Math.floor(Math.random() * feature2.length);
	index3 = Math.floor(Math.random() * feature3.length);
	index4 = Math.floor(Math.random() * feature4.length);
	
	featurelinks = "<a href=\"#\" id=\"jcarousel-thumb1\" onclick=\"loadfeature('" + feature1[index1] + "');togglebackground('jcarousel-thumb1', '01');\"></a><a href=\"#\" id=\"jcarousel-thumb2\" onclick=\"loadfeature('" + feature2[index2] + "');;togglebackground('jcarousel-thumb2', '02');\"></a><a href=\"#\" id=\"jcarousel-thumb3\" onclick=\"loadfeature('" + feature3[index3] + "');togglebackground('jcarousel-thumb3', '03');\"></a><a href=\"#\" id=\"jcarousel-thumb4\" onclick=\"loadfeature('" + feature4[index4] + "');togglebackground('jcarousel-thumb4', '04');\"></a>";

}

function loadfeature (featurecontent) {
	document.getElementById('feature1').setAttribute("class","hiddenfeature");
	document.getElementById('feature1').setAttribute("className","hiddenfeature");
	document.getElementById('feature2').setAttribute("class","hiddenfeature");
	document.getElementById('feature2').setAttribute("className","hiddenfeature");
	document.getElementById('feature3').setAttribute("class","hiddenfeature");
	document.getElementById('feature3').setAttribute("className","hiddenfeature");
	document.getElementById('feature4').setAttribute("class","hiddenfeature");
	document.getElementById('feature4').setAttribute("className","hiddenfeature");

	document.getElementById(featurecontent).setAttribute("class","visiblefeature");
	document.getElementById(featurecontent).setAttribute("className","visiblefeature");
}


function togglebackground(selected, image) {
	//clear all pictures to default
	document.getElementById('jcarousel-thumb1').style.backgroundImage='url(img/features/button-bg01.png)';
	document.getElementById('jcarousel-thumb2').style.backgroundImage='url(img/features/button-bg02.png)';
	document.getElementById('jcarousel-thumb3').style.backgroundImage='url(img/features/button-bg03.png)';
	document.getElementById('jcarousel-thumb4').style.backgroundImage='url(img/features/button-bg04.png)';
	//set background as selected for the link that was just clicked.
	document.getElementById(selected).style.backgroundImage='url(img/features/button-bg-select' + image + '.png)';
}
	
function randomfeature () {
	//select a random feature to show on load.
	randfeature = new Array(4);
	randcat = new Array(4);
	randselect = new Array(4);
	randcat[0] = '01';
	randfeature[0] = 'feature1';
	randselect[0] = 'jcarousel-thumb1';
	randcat[1] = '02';	
	randfeature[1] = 'feature2';
	randselect[1] = 'jcarousel-thumb2';
	randcat[2] = '03';
	randfeature[2] = 'feature3';
	randselect[2] = 'jcarousel-thumb3';
	randcat[3] = '04';
	randfeature[3] = 'feature4';
	randselect[3] = 'jcarousel-thumb4';

	index = 0;
	if (firstCall == true) {
		firstCall = false;			
	}
	else {
		for(i=1;i<5;i++) {
			id = 'feature' + i;
			el = document.getElementById(id);
			if (el.getAttribute("class")=="visiblefeature" || el.getAttribute("className")=="visiblefeature") {
			index = i % 4;
			break;
			}
		}
	}
	loadfeature(randfeature[index]);
	togglebackground(randselect[index], randcat[index]);
	setTimeout(randomfeature, featureDelay);
}