var i = 1;
var interval;

jQuery(function($){ // run after DOM ready
	
	$(".thumbs a").click(function(){
		var id = $(this).attr('id');
		fadeImage(id);
		clearInterval(interval);
		return false;
	});
	
	interval = setInterval(function(){
		var id = 'feature-' + (i % 3 + 1);
		fadeImage(id);
		i++;
	}, 5000);
	
	var tabs = $("#tabs");
	tabs.find("li a").click(function(){
		tabs.attr('class','').addClass(this.id);
		var tabIndex = $("#tabs a").index(this);
		tabs.find(".tab-content:visible").hide();
		tabs.find(".tab-content:eq(" + tabIndex + ")").fadeIn();
		return false;
	});
	
});

function fadeImage(id) {
	var headerId = id.replace(/feature-/, '');
	var headerText = $("#headerScrollFeature #header-" + headerId).clone();
	$('<div class="feature-overlay" />').addClass(id).append(headerText).hide().insertBefore(".thumbs").fadeIn(function(){
		$("#headerScrollFeature").attr('class', '').addClass(id);
		$(this).remove();
	});
}