var interval;
var animation = false;

$(document).ready(function() {
	numbers = '';
	c = 0;
	$('#header-pics li').each(function(i){
		if ($(this).hasClass("active"))
			numbers += '<li id="number-'+c+'" class="active" rel="image-'+c+'" onclick="thisSlide(this);">'+(c+1)+'</li>';
		else
			numbers += '<li id="number-'+c+'" rel="image-'+c+'" onclick="thisSlide(this);">'+(c+1)+'</li>';
		c++;
	});
	numbers = '<ul id="header-numbers">' + numbers + '</div>';
	main = $('#hbig_right').html();
	$('#hbig_right').html(main + numbers);
	
	interval = setInterval( "nextSlide()", 5000 );
});

function thisSlide(tli) {
	if (!animation && !$(tli).hasClass('active')) {
		clearInterval(interval);
		animation = true;
		$('#header-pics li.active').fadeOut(function(){
				$('#'+$(tli).attr('rel')).fadeIn( function(){
						$('#'+$('#header-pics li.active').attr('rel')).removeClass('active');
						$(tli).addClass('active');
						
						$('#header-pics li.active').removeClass('active');
						$('#'+$(tli).attr('rel')).addClass('active');
						interval = setInterval( "nextSlide()", 5000 );
						animation = false;
					});
			});
	}
}

function nextSlide() {
	if (!animation) {
		animation = true;
		current = $('#header-pics li.active').attr('id');
		next_id = parseInt(current.replace('image-', ''))+1;
		
		if ($('#image-'+next_id).length == 0) {
			next_id = 0;
		}
		clearInterval(interval);
		$('#header-pics li.active').fadeOut(function(){
			$('#image-'+next_id).fadeIn( function(){
					$('#'+$('#header-pics li.active').attr('rel')).removeClass('active');
					$('#number-'+next_id).addClass('active');
					
					$('#header-pics li.active').removeClass('active');
					$('#image-'+next_id).addClass('active');
					interval = setInterval( "nextSlide()", 5000 );
					animation = false;
				});
		});
	}
}