var LatestGamesShow = {
	'games': new Array(), 

	'disappearingIndex': 0,
	'appearingIndex': 0, 

	'timeout': 4000,

	'highlighter': null,
	'highlightPosX': 0,
	'highlightPosY': -1,

	'timeoutObj': null,
	
	'isMouseOverImage': false,
	'mouseOverImageTimer': null,  

	'init': function() {
		LatestGamesShow.highlighter = document.getElementById('gameHighlighter');

		for (var i=0; i<6; i++) {
			LatestGamesShow.games[i] = 'gameBanner' + (i+1);
		}
		
		LatestGamesShow.disappearingIndex = 0;
		LatestGamesShow.appearingIndex = 1;

		// Number of milliseconds before changing to a new slide 
		LatestGamesShow.timeoutObj = window.setTimeout('LatestGamesShow.slide()', LatestGamesShow.timeout);
	}, 

	'slide': function() {	
		if (LatestGamesShow.isMouseOverImage) return;
		

		LatestGamesShow.disappear(LatestGamesShow.games[LatestGamesShow.disappearingIndex], 10);
		LatestGamesShow.appear(LatestGamesShow.games[LatestGamesShow.appearingIndex], 0);
		

		if (LatestGamesShow.appearingIndex % 2 == 0) { 
			// The highlighter is positioned on the right side
			// Prepare to move diagonally downwards to the left side
			LatestGamesShow.highlightPosX = 0;
			LatestGamesShow.highlightPosY = Math.floor(LatestGamesShow.appearingIndex / 2) * 82;
		}
		else {
			// The highlighter is positioned on the left side
			// Prepare to move to the right side
			LatestGamesShow.highlightPosX = 93;
			LatestGamesShow.highlightPosY = Math.floor(LatestGamesShow.appearingIndex / 2) * 82;
		}
		
		LatestGamesShow.highlighter.style.left = LatestGamesShow.highlightPosX;
		LatestGamesShow.highlighter.style.top = LatestGamesShow.highlightPosY;


		LatestGamesShow.appearingIndex++;
		if (LatestGamesShow.appearingIndex == LatestGamesShow.games.length) {
			LatestGamesShow.appearingIndex = 0;
		}
		
		LatestGamesShow.disappearingIndex = LatestGamesShow.appearingIndex - 1;
		if (LatestGamesShow.disappearingIndex < 0) {
			LatestGamesShow.disappearingIndex = LatestGamesShow.games.length - 1;
		}
	},
	
	'opacityTimerAppear': null, 
	
	'appear': function(boxID, opacityValue) {
		if (LatestGamesShow.opacityTimerAppear) window.clearTimeout(LatestGamesShow.opacityTimerAppear);
		
		// opacityValue ranges from 0 to 10
		if (opacityValue > 10) {
			LatestGamesShow.slideAgain();

			return;
		}
		
		var box = document.getElementById(boxID);

		box.style.display = 'block';
		box.style.opacity = opacityValue / 10;
		box.style.filter = 'alpha(opacity=' + (opacityValue * 10) + ')';
		
		LatestGamesShow.opacityTimerAppear = window.setTimeout("LatestGamesShow.appear('" + boxID + "', " + (opacityValue + 1) + ");", 100);
	},
	
	'opacityTimerDisappear': null, 
	
	'disappear': function(boxID, opacityValue) {
		if (LatestGamesShow.opacityTimerDisappear) window.clearTimeout(LatestGamesShow.opacityTimerDisappear);
		
		var box = document.getElementById(boxID);

		// opacityValue ranges from 0 to 10
		if (opacityValue < 0) {
			// Hide the box, otherwise its links will takeover the other box with opacity = 100!!!
			box.style.display = 'none';
			
			return;
		}
		
		box.style.opacity = opacityValue / 10;
		box.style.filter = 'alpha(opacity=' + (opacityValue * 10) + ')';
		
		LatestGamesShow.opacityTimerDisappear = window.setTimeout("LatestGamesShow.disappear('" + boxID + "', " + (opacityValue - 1) + ");", 100);
	}, 

	'doSlide': function() {
		if (LatestGamesShow.isGameInFocus) LatestGamesShow.slideAgain();
		else LatestGamesShow.slide();
	}, 

	'slideAgain': function() {
		// Number of milliseconds before changing to a new slide 
		LatestGamesShow.timeoutObj = window.setTimeout('LatestGamesShow.doSlide()', LatestGamesShow.timeout);
	},

	'highlightGame': function(index) {
		if (LatestGamesShow.delaySlide(index)) return;
		
		if (LatestGamesShow.disappearingIndex != index) {
			// Clear current timeout
			window.clearTimeout(LatestGamesShow.timeoutObj);
			
			LatestGamesShow.appearingIndex = index;
			
			LatestGamesShow.slide();
		}
	},

	// Action:	Delay sliding image.
	// Purpose:	Prevent the sliding to start when the mouse is just
	// 			passing the image.
	'delaySlide': function(index) {
		if (LatestGamesShow.isMouseOverImage) {
			LatestGamesShow.isMouseOverImage = false;
			window.clearTimeout(LatestGamesShow.mouseOverImageTimer);
		}
		else {
			LatestGamesShow.isMouseOverImage = true;
			LatestGamesShow.mouseOverImageTimer = window.setTimeout("LatestGamesShow.highlightGame('" + index + "')", 300);
		}
		
		return LatestGamesShow.isMouseOverImage;
	}, 

	// When mouse is outside the image, don't slide the large image.
	// This function is needed especially when the mouse is 
	// just passing the image.
	'outsideTab': function() {
		LatestGamesShow.isMouseOverImage = false;
		window.clearTimeout(LatestGamesShow.mouseOverImageTimer);
		
		LatestGamesShow.setGameInFocus(false);
	}, 
	
	'isGameInFocus': false, 
	
	'setGameInFocus': function(bool) {
		LatestGamesShow.isGameInFocus = bool;
	}
}