<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
	<ModulePrefs
		title="Tic Tac Toe"
		description="Tic Tac Toe game"
		category="tools"
		height="150"
		author="Jorge Alvaro Rey" 
		author_photo="http://www.lamboratory.com/images/jorge.PNG"
		author_email="jorge@lamboratory.com"
		author_location="Madrid, Spain"
		author_affiliation="Lamboratory.com"
		title_url="http://www.lamboratory.com/"
		screenshot="http://www.lamboratory.com/gadgets/multiUserCommunication_images/ticTacToe.PNG"
		thumbnail="http://www.lamboratory.com/gadgets/multiUserCommunication_images/ticTacToe_thumbnail.PNG">
		<Require feature="setprefs" />
	</ModulePrefs>

	<!-- Multi User Communication Gadget preferences -->
	<UserPref name="test000" datatype="hidden" display_name="Message0" default_value="" publish="true" listen="true" on_change="processMessage" />
	<UserPref name="moduleId" datatype="hidden" default_value="" />
	<UserPref name="fromId" datatype="hidden" default_value="0_0" />

	<!-- Game preferences -->
	<UserPref name="gameStatus" datatype="hidden" default_value="         " />
	<UserPref name="opponentModuleId" datatype="hidden" default_value="" />
	<UserPref name="turn" datatype="hidden" default_value="0" />

	<Content type="html"><![CDATA[
		<style type="text/css">
			img { border: 0; }
		</style>
		<div id="step0">
			Loading...
		</div>
		<div id="step1" style="display: none;">
			<form name="tec_tac_toe_config" method="GET" onsubmit="return false;">
				Send your id to your opponent:<br/>
				<input type="text" id="moduleId" readonly style="background-color: #F0F0A0;" />
				<br/><br/>
				Or enter here your opponent's id:<br/>
				<input type="text" id="opponentModuleId" />
				<input type="button" onclick="addConfiguration()" value="Accept" />
			</form>
		</div>
		<div id="step2" style="display: none;" align="center">
			<form name=tic_tac_toe" method="GET" onsubmit="return false;">
				<table cellspacing="0" cellpadding="0" border="1">
					<tr>
						<td id="00"><a href="#" onClick="play('00')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
						<td id="01"><a href="#" onClick="play('01')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
						<td id="02"><a href="#" onClick="play('02')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
					</tr>
					<tr>
						<td id="10"><a href="#" onClick="play('10')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
						<td id="11"><a href="#" onClick="play('11')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
						<td id="12"><a href="#" onClick="play('12')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
					</tr>
					<tr>
						<td id="20"><a href="#" onClick="play('20')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
						<td id="21"><a href="#" onClick="play('21')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
						<td id="22"><a href="#" onClick="play('22')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a></td>
					</tr>
				</table>
				<div id="message">
				</div>
			</form>
		</div>

		<!-- Multi User Communication Gadget Functions -->
		<script src="http://www.lamboratory.com/gadgets/multiUserCommunication.js" type="text/javascript"></script>

		<script type="text/javascript"> 
			var prefs = new _IG_Prefs(__MODULE_ID__);

			// Game functions
			function receiveMessage(sender, recipient, msg)
			{
				if("START"==msg)
				{
					prefs.set("turn", "O");
					_gel("message").innerHTML = "It's your opponent's turn. Wait for yours.";
					var opponentModuleId = prefs.getString("opponentModuleId");
					if(""==opponentModuleId)
					{
						prefs.set("opponentModuleId", sender);
						initGame();
					}
				}
				else if("RESTART"==msg)
				{
					prefs.set("gameStatus", "         ");
					initGame();
				}
				else
				{
					opponentPlayed(msg);
				}
			}

			function initGame()
			{
				var opponentModuleId = prefs.getString("opponentModuleId");
				if(""==opponentModuleId)
				{
					_gel("step0").style.display='none';
					_gel("step1").style.display='';
					_gel("moduleId").value = getModuleId();
				}
				else
				{
					_gel("step0").style.display='none';
					_gel("step1").style.display='none';
					_gel("step2").style.display='';
				}

				var gameStatus = prefs.getString("gameStatus");
				var i;
				for(i=0; i<9; i++)
				{
					if(gameStatus[i]=='X' || gameStatus[i]=='O' || gameStatus[i]==' ')
					{
						playSymbol(int2Position(i), gameStatus[i], false);
					}
				}

				var result = checkBoard();
				var turn = prefs.getString("turn");
				if("X"==turn && result)
				{
					_gel("message").innerHTML = "Game was ended. Click to <a href='#' onclick='restartGame()'>restart the game</a>";
				}
				else if("X"==turn)
				{
					_gel("message").innerHTML = "It's your turn (x). Click on a cell or <a href='#' onclick='restartGame()'>restart the game</a>";
				}
				else if("O"==turn && result)
				{
					_gel("message").innerHTML = "Game was ended. Wait for your opponent to move.";
				}
				else if("O"==turn)
				{
					_gel("message").innerHTML = "It's your opponent's turn. Wait for yours.";
				}
			}

			function restartGame()
			{
				try
				{
					var turn = prefs.getString("turn");
					if("X"==turn)
					{
						var opponentModuleId = prefs.getString("opponentModuleId");
						sendMessage(opponentModuleId, "RESTART");
						prefs.set("gameStatus", "         ");
						initGame();
					}
				}
				catch(e)
				{
					// Send message error. Game state was not modified
				}
			}
			
			function int2Position(i)
			{
				return String(parseInt(i/3))+String(i%3);
			}

			function position2Int(position)
			{
				return parseInt(position[0])*3+parseInt(position[1]);
			}

			function opponentPlayed(position)
			{
				playSymbol(position, 'O', true);
				prefs.set("turn", "X");
				var result = checkBoard();
				if(!result)
				{
					_gel("message").innerHTML = "It's your turn (x). Click on a cell or <a href='#' onclick='restartGame()'>restart the game</a>";
				}
				else if("O"==result)
				{
					_gel("message").innerHTML = "You lost! Click to <a href='#' onclick='restartGame()'>restart the game</a>";
				}
				else
				{
					_gel("message").innerHTML = "It was a draw! Click to <a href='#' onclick='restartGame()'>restart the game</a>";
				}
			}

			function play(position)
			{
				try
				{
					var turn = prefs.getString("turn");
					if("X"==turn)
					{
						var moduleId = prefs.getString("moduleId");
						var opponentModuleId = prefs.getString("opponentModuleId");
						sendMessage(opponentModuleId, position);
						playSymbol(position, 'X', true);
						prefs.set("turn", "O");
						var result = checkBoard();
						if(!result)
						{
							_gel("message").innerHTML = "It's your opponent's turn. Wait for yours.";
						}
						else if("X"==result)
						{
							_gel("message").innerHTML = "You won! Wait for your opponent to move.";
						}
						else
						{
							_gel("message").innerHTML = "It was a draw! Wait for your opponent to move.";
						}
					}
				}
				catch(e)
				{
					// Send message error. Game state was not modified
				}
			}

			function playSymbol(position, symbol, update)
			{
				if(symbol==' ')
				{
					_gel(position).innerHTML = '<a href="#" onClick="play('+"'"+position+"'"+')"><img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/_.gif" width="30" heigth="30" /></a>';
				}
				else
				{
					_gel(position).innerHTML = '<img src="http://www.lamboratory.com/gadgets/multiUserCommunication_images/'+symbol+'.gif" width="30" heigth="30" />';
				}
				if(update)
				{
					var gameStatus = prefs.getString("gameStatus");
					var iPosition = position2Int(position);
					gameStatus = gameStatus.substring(0, iPosition) + symbol + gameStatus.substring(iPosition+1);
					prefs.set("gameStatus", gameStatus);
				}
			}

			function addConfiguration()
			{
				try
				{
					var opponentModuleId = _gel("opponentModuleId").value;
					if(""!=opponentModuleId)
					{
						sendMessage(opponentModuleId, "START");
						prefs.set("turn", "X");
						_gel("message").innerHTML = "It's your turn (x). Click on a cell or <a href='#' onclick='restartGame()'>restart the game</a>";
						prefs.set("opponentModuleId", opponentModuleId);
						initGame();
					}
				}
				catch(e)
				{
					// Send message error. Game state was not modified
				}
			}

			function checkBoard()
			{
				var gameStatus = prefs.getString("gameStatus");
				for(var i=0; i<3; i++)
				{
					if(gameStatus[i]!=" " && gameStatus[i]==gameStatus[i+3] && gameStatus[i]==gameStatus[i+6])
					{
						return gameStatus[i];
					}

					if(gameStatus[3*i]!=" " && gameStatus[3*i]==gameStatus[3*i+1] && gameStatus[3*i]==gameStatus[3*i+2])
					{
						return gameStatus[3*i];
					}
				}

				if(gameStatus[0]!=" " && gameStatus[0]==gameStatus[4] && gameStatus[0]==gameStatus[8])
				{
					return gameStatus[0];
				}

				if(gameStatus[2]!=" " && gameStatus[2]==gameStatus[4] && gameStatus[2]==gameStatus[6])
				{
					return gameStatus[2];
				}

				for(var i=0; i<9; i++)
				{
					if(gameStatus[i]==" ")
						return false;
				}

				return "tie";
			}

			initGame();

			init(getModuleId(), receiveMessage);

		</script>

	]]></Content>
</Module>

