var bigbannerIndex = 0;
var bigBannerTimeout = null;

$(document).ready(function () {
	var a = $("#bigbanner .container .banner");
	a.each(function (i, o) {
		var banner = $(o);

		banner.css({
			"left": ((i * 750) + "px"),
			"position": "absolute",
			"top": "0px"
		});

		banner.removeClass("hidden");

		var button = $("<div></div>")
			.addClass("bigBannerButton")
			.hide()
			.html(i + 1)
			.css({ "left": ((750 - ((a.length + 1 - i) * 18 + 3)) + "px") })
		;

		if (i == 0)
			button.addClass("active");

		banner.parents("#bigbanner").find(".bigBannerButtons").append(button);
	});

	if (a.length > 1) {
		$("#bigbanner .bigBannerButtons").show();

		$("<div></div>")
			.attr("id", "playpausebutton")
			.html("<img src='/Graphics/bigbanner-pause.gif'/>")
			.css({ "left": ((750 - 21) + "px") })
			.appendTo("#bigbanner");
		;

		$(".bigBannerButton").click(function () { setBigBannerIndex($(this).index()) });
		$("#playpausebutton").click(function () { bigBannerPlayPause() });

		$("#bigbanner .bigBannerButton").show();

		var progressBg = $("<div></div>")
			.addClass("progressBg")
			.attr("id", "progressBg")
			.appendTo("#bigbanner");

		var progress = $("<div></div>")
			.addClass("progress")
			.attr("id", "progress")
			.appendTo("#bigbanner");

		resetTimer();
	}
});

function resetTimer() {
	if(bigBannerPlaying)
	{
		if (bigBannerTimeout != null)
			clearTimeout(bigBannerTimeout);

		var timerTimeout = 7000;
		
		bigBannerTimeout = setTimeout("timerNextBigBanner()", timerTimeout);
		
		$("#bigbanner #progress").stop().css({ "width": "1px" });
		
		var numberOfBanners = $("#bigbanner .container .banner").length;

		if (numberOfBanners > 1) {
			var x = 750 - (((numberOfBanners+1) * 18) + 3);
			var maxW = ((numberOfBanners+1) * 18) - 3;

			$("#bigbanner #progressBg").css({ "left": x + "px", "width": maxW + "px" });

			$("#bigbanner #progress").css({ "left": x + "px" });
			$("#bigbanner #progress").animate({ "width": [maxW + "px", "linear"] }, timerTimeout);
		}
	}
}


function timerNextBigBanner() {
	var index = bigbannerIndex + 1;
	
	if (index >= $("#bigbanner .container .banner").length)
		index = 0;
	
	setBigBannerIndex(index);
}
	

var bigBannerPlaying = true;
function bigBannerPlayPause()
{
	var imgButton = $("#playpausebutton img");

	if(bigBannerPlaying)
	{
		clearTimeout(bigBannerTimeout);
		$("#bigbanner #progress").stop().css({ "width": "0px" });
		imgButton.attr("src", "/Graphics/bigbanner-play.gif");
		
		bigBannerPlaying = false;
	}
	else
	{
		imgButton.attr("src", "/Graphics/bigbanner-pause.gif");
		bigBannerPlaying = true;
		setBigBannerIndex(bigbannerIndex);
	}
}

function setBigBannerIndex(index) {
	var moveBy = index - bigbannerIndex;
	
	bigbannerIndex = index;
	
	resetTimer();

	$("#bigbanner .container .banner").each(function(i, o) {
		var moveBy = i - index;
		var banner = $(o);
		banner.animate({ "left": "" + (moveBy * 750) + "px" }, { queue: false, duration: 400 });
	});
	
	$("#bigbanner .background").animate({ "left": "" + (index * -120) + "px" }, { queue: false, duration: 400 });
	
	$("#bigbanner .bigBannerButtons .active").removeClass("active");
	$("#bigbanner .bigBannerButtons .bigBannerButton:eq(" + index + ")").addClass("active");
}