$(function() {
	var posters = $('#stage .posters li');
	var links = $('#stage .links li');

	var pendingMouseover;
	var pendingMouseout;

	posters.eq(0).css({
		zIndex: 1000
	});

	links.mouseover(function() {
		var nativeLinkLi = this;
		var link = $(nativeLinkLi);
		var index = links.index(nativeLinkLi);
		var poster = posters.eq(index);

		if (pendingMouseover) window.clearTimeout(pendingMouseover);
		if (pendingMouseout) window.clearTimeout(pendingMouseout);

		if (link.hasClass('active')) return;

		pendingMouseover = window.setTimeout(function() {
			links.removeClass('active');
			link.addClass('active');

			posters.animate({
				opacity: 0
			}, {
				queue: false,
				duration: 700
			});
			poster.animate({
				opacity: 1
			}, {
				duration: 700
			});
		}, 100);
	});
	links.mouseout(function() {
		var nativeLinkLi = this;
		var link = $(nativeLinkLi);

		if (pendingMouseout) window.clearTimeout(pendingMouseout);

		pendingMouseout = window.setTimeout(function() {
			var next = link.next();
			if (!next.size()) next = links.eq(0);
			next.mouseover().mouseout();
		}, 6000);
	});
	links.eq(0).mouseover().mouseout();
})