var timer;

var duration = 5000;

var cur = 1;

var total = 0;

$(document).ready(function(){
	
	total = $('#carousel div.item').length;
	
	timer = setInterval(rotate,duration);
	
	$('#fade-image').hide();
	
});

function rotate() {
	
	cur++;
	
	if (cur > total) {
		
		cur = 1;
		
	}
	
	//show the image for that one... and apply the correct class!

	$('#carousel div.item').each(function(index) {
		
		var slide = $(this);
		
		
		
		if (index == (cur-1)) {
					
			//slide in the new image!
			
			slide.addClass('selected');
			
			var img = slide.find('img').attr('src');
			
			$('#fade-image').attr('src',img);
			//$(this).animate({ opacity: 'show', height: 'show' }, 500);
			
			$('#fade-image').fadeIn(1750, function () {
				
				$('#banner-image').attr('src',img);
				$('#fade-image').addClass('hidden');
				$('#fade-image').hide();
				
	         });			
			
		} else {
			
			slide.removeClass('selected');
			
		}
		
	});
	
}