var cycler;
var timer;

$(document).ready(function(e) {
	$('.feature_name').bind('click keydown', showFeature);
	
	// automatically start cycling through screenshots every 6 sec
	cycler = setInterval(function() {
		showNext();
	}, 8000);
});

function showFeature(e) {
	if (e.type === 'keydown' && e.keyCode != 13)
		return;
	$target = $(e.target);
	$('.selected').removeClass('selected');
	$target.addClass('selected');
	
	var f_id = $target.attr('id');
	var fc_id = f_id + '_c';

	$('.feature:visible').fadeOut(1000);
	$('#' + fc_id).fadeIn(1000);
	
	// reset interval and timer
	clearInterval(cycler);
	clearTimeout(timer);
	
	// if user doesn't do anything for the next 15 sec, set cycler in motion
	timer = setTimeout(function() {
		cycler = setInterval(function() {
			showNext();
		}, 5000);
	}, 8000);
}

function showNext() {
	$selected = $('.selected');
	selected_id = parseInt( $selected.attr('id').substring(2) );
	
	if (selected_id === 6)
		next_id = 1;
	else
		next_id = selected_id + 1;
	
	$selected.removeClass('selected');
	$('#f_' + next_id).addClass('selected');
	
	$('.feature:visible').fadeOut(1000);	
	$('#f_' + next_id + '_c').fadeIn(1000);
}