$(document).ready(function(){
	
	// An Array of our Background Colors in Order
	var bgColor = ['#001A42', '#609F0A', '#000000'];
	
	// For readability I have put the controls in a variable
	var controls = '<div id="controls"><div class="control" id="next"></div><div class="control" id="prev"></div></div>';
	
	// Set which item will be visible on load
	var position = 0;
	var endPostion = $('.feature').size()-1;
	var timer = 10000;
	var featureTimer = setInterval(featureSwitch, 10000);
	
	// Onload Show Prev & Next Buttons
	$('#featureWrapper').after('<div id="control_wrapper">'+controls+'</div>');
	changeFeature(position, bgColor[position]);
	
	// OnClick li, if already visible do nothing, else show the featured div and change active state
	$('.featureTabs li').click(function(){	
		position = $(this).index('.featureTabs li');
		if ( $('.feature').eq(position).is(':visible') ) {
			return false;
		} else {			
			changeFeature(position, bgColor[position]);
			clearInterval(featureTimer);
			featureTimer = setInterval(featureSwitch, 30000);
			return false;
		}
	});
	
	function featureSwitch(){
		if (position == endPostion){
			position = 0
		} else {
			position++;
		}
		changeFeature(position, bgColor[position])	
	}

	
	// OnClick Contorls
	$('.control').click(function(){
		position = $('.feature:visible').index('.feature');
		if ( $(this).attr('id') == 'next' ) {
			if (position == endPostion) {
				position = 0;
			} else {
				position++;
			}
		} else {
			if (position == 0) {
				position >= endPostion;
			} else {
				position--;
			}
		}
		clearInterval(featureTimer);
		featureTimer = setInterval(featureSwitch, 30000);
		changeFeature(position, bgColor[position]);
	});
	
	
});

function changeFeature (position, bgColor) {
	$('.feature').fadeOut(200);			
	$('#featureWrapper').delay(200).animate({ backgroundColor: bgColor }, 200);
	$('.feature').eq(position).delay(400).fadeIn(200);
	$('.featureTabs li').eq(position).addClass('active').siblings().removeClass('active');
}