var imgs;
var $links;
var current = 0;

function changeImage() {
	var next = current + 1;
	if (next >= imgs.length) {
		next = 0;
	}
	$(imgs).fadeOut(1000);
	$(imgs[next]).fadeIn(1000);
	$($links).removeClass('active');
	$($links[next]).addClass('active');
	current = next;
}

$(function() {
	var cinterval = 5000;
	var imgsContainer = $('.red-image');
	imgs = $('.white-image img');

	var links = '<ul>';
	imgs.each(function(index, item) {
		links = links + '<li';
		if ($(item).hasClass('active')) {
			links = links + ' class="active"';
		}
		links = links + '><a href="#">&nbsp;</a></li>';
	});
	links = links + '</ul>';

	imgsContainer.append(links);
	
	$links = $('ul li', imgsContainer);
	
	var interval = setInterval('changeImage()', cinterval);
	
	$links.each(function(index, item) {
		$(item).click(function(e) {
			e.preventDefault();
			clearInterval(interval);
			current = index - 1;
			if (current == -1) {
				current = $links.length - 1;
			}
			changeImage();
			interval = setInterval('changeImage()', cinterval);
		});
	});
});