// Below call -> jquery.cycle
$(function() {
	$('#imgSet')
	.cycle({
		fx: 'fade',
		speed: 1000,
		timeout: 8000,
		fastOnEvent: 500,
		pause: 1,
		pager: '#heroNav',
		pauseOnPagerHover: 1,
		before: onBefore,
		pagerAnchorBuilder: function(idx, slide) {
		    return '<li onmouseover="dispHeroNav(' + [idx + 1] + ',0);" onclick="dispHeroNav(' + [idx + 1] + ',2);" title="Go to slide ' + [idx + 1] + '"><a href="#">' + [idx + 1] + '</a></li>';
		}
	});
});

function onBefore(curr, next, opts) {
	// Detect if init state & fix first BG to load
	if (document.getElementById('btnBG').className == 'btnBG0') {
		document.getElementById('btnBG').className = 'btnBG1';
	}
	else {
		var index = opts.currSlide;
		var nxt = opts.nextSlide + 1;
		document.getElementById('btnBG').className = 'btnBG' + nxt;
	}
}

function dispHeroNav(item, state) {
	switch (state) {
		case 0:
			document.getElementById('hfSetBG').value = document.getElementById('btnBG').className;
			document.getElementById('btnBG').className = "btnBG" + item;
			break;
		case 1:
			document.getElementById('btnBG').className = document.getElementById('hfSetBG').value;
			break;
		case 2:
			document.getElementById('btnBG').className = "btnBG" + item;
			document.getElementById('hfSetBG').value = document.getElementById('btnBG').className;
			break;
	}
}