jQuery(function($) {
	
	// Global variables for configuration of image annimation
	var timeBetween = 5000; // how long between each fade
	var fadeLength = 2000; // the time it takes to start fading to finish fading
	
	var currentItem = 0;
	var nextItem = 1;
	
	$($('#headerNewsWrapper li')[0]).css({'z-index': '5', 'opacity': '100'});
	
	function loopNews() {
		var lookingAt = 0;
		$('#headerNewsWrapper li').each(function(){
			if (lookingAt != currentItem) {
				$(this).css('z-index', '1');
				if (lookingAt == nextItem) {
					$(this).css({'z-index': '4', 'opacity': '100'});
				}
			}
			lookingAt++;
		});
		// setting it to z-index 5 and then animating
		$($('#headerNewsWrapper li')[currentItem]).css('z-index', '5').animate({opacity:0}, fadeLength, function() {
			currentItem = nextItem;
			if((nextItem +1) < $('#headerNewsWrapper li').length) {
				nextItem ++
			} else {
				nextItem = 0
			}
			// I am done
			lookingAt = 0;
		}); 
	
	}

	setInterval(loopNews, timeBetween);
});