var 
	LONG_WAIT = 5000,
	FADE_TIME = 1000,
	MAX_WIDTH = 234,
	MAX_HEIGHT = 221;

var imgIdx = 3;

var nextColumnPrototype;

/** 
 *	This function resets the next column to its
 *  original pre-fade state. 
 */
function resetNextColumn() {

	$("#waves .next").animate({opacity : 0}, 0).css({top : "50px"});
				
}

/** 
 *	This function does the animation for the next row
 *  of picture elements
 */
function doNextAnimation() {

	$(".next", "#waves").delay(LONG_WAIT);

	$(".next", "#waves")
		.animate(
			{
				opacity: 1.0,
				top: "-=50"
			}, FADE_TIME, "easeOutSine",
			function() {
				setupForNextRound(false);
			}
		);
		
}


/**
 *	Do setup for the next round
 */
function setupForNextRound(firstTime) {
	var next = $("#waves .next");
	var main = $("#waves .column:not(.next)");
	var queue = $("#waves ul.queue");
	var nQueueElements = $("li", queue).size();
	
	var nLoads = 0;
	
	if (!firstTime) {
		$(next).removeClass("next");
		$(main).remove();
		
		main = next;
		next = $(nextColumnPrototype).clone();
		
		$(main).after(next);
	}
	
	$(".first", next).html(nextImage(0));
	$(".second", next).html(nextImage(1));
	$(".third", next).html(nextImage(2));
	
	
	/**
	 *	Create a new image and hang a loader on it, when
	 *	the loader reaches 3 make it load the next.
	 */
	function nextImage(offset) {
		var idx = (imgIdx + offset) % nQueueElements;
		var li = $("li", queue).eq(idx);
		
		var imageUrl = $("a", li).attr("href");
		
		var img = new Image();
		$(img)
			.load(
				function() { 
					++nLoads; 
					if (nLoads == 3) {
						afterCompleteLoad();
					}
				})
			.attr("src", imageUrl);


		//.pngFix();
		
		return img;
	}

	/**
	 *	This function is called after all images are loaded
	 */
	function afterCompleteLoad() {
		imgIdx = (imgIdx + 3) % nQueueElements;
	
		if (firstTime) {
			
			$(main).fadeIn(1000, function() {$("#waves .overlay").fadeIn(500, "easeInSine"); });
			columnSetup(main);
		}
	
		resetNextColumn();
		columnSetup(next);	
		
		doNextAnimation();
	}

}


function columnSetup(col) {
	var wMax = MAX_WIDTH;
	var hMax = MAX_HEIGHT;
			
	$("div", col).each(
		function() {
			var img = $("img", $(this));
	
			var 
				wNew = 0, hNew = 0, 
				paddingX = 0, paddingY = 0;
				
			if (img.width() > img.height()) {
				hNew = hMax;
				wNew = (hMax / img.height()) * img.width();
				paddingY = 0;
				paddingX = -0.5 * (Math.abs(wNew - wMax));
			}
			else {
				wNew = wMax;
				hNew = (wMax / img.width()) * img.height();
				paddingX = 0;
				paddingY = -0.5 * (Math.abs(hNew - hMax));
			}
	
			img.css({
				width : wNew + "px",
				height : hNew + "px",
				"margin-left" : paddingX + "px",
				"margin-top" : paddingY + "px"
			});
		}
	)
}

$(document).ready(
	function() {
	
		var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
		var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);

		if (ie55 || ie6) {
			var mask = $("#waves .mask").clone();
			$(mask).attr("src", "/static/images/banner/ie6-replacement.png");
			$("#waves").html(mask);
			$("#waves").css("visibility", "visible");
		}
		else {
			$("#waves .column:not(.next)").hide();
			$("#waves .mask").attr("src", "/static/images/banner/mask.gif");
			$("#waves").css("visibility", "visible");
			nextColumnPrototype = $("#waves .next").clone();
			setupForNextRound(true);
		}
	}
);