<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><html><head><title><xsl:value-of select="match/@id"/></title><script type='text/javascript'>var step = 1;var steps = <xsl:value-of select="count(match/herstory/state)"/>*1;function showstate (stepnum) {var oldstate = document.getElementById(step);  var newstate = document.getElementById(stepnum);  var counter = document.getElementById('stepcount');  var leftcell = document.getElementById('left');  var rightcell = document.getElementById('right');  var oldstep = document.getElementById('step' + step);  var newstep = document.getElementById('step' + stepnum);  step=stepnum;  oldstate.style.display = 'none';  newstate.style.display = '';  if (stepnum == 1) {leftcell.src = '/docserver/gamemaster/images/greyleft.gif'}     else {leftcell.src = '/docserver/gamemaster/images/blackleft.gif'};  counter.innerHTML = step;  if (stepnum == steps) {rightcell.src = '/docserver/gamemaster/images/greyright.gif'}     else {rightcell.src = '/docserver/gamemaster/images/blackright.gif'}  if (oldstep) {oldstep.style.backgroundColor = '#ffff99'};  if (newstep) {newstep.style.backgroundColor = '#ffffcc'}}</script></head><body leftmargin='0' topmargin='0' marginwidth='0' marginheight='0' bgcolor='#ffffcc'><center><table width='800' height='65' cellspacing='0' cellpadding='0' border='0'><tr> <td><img src='/docserver/gamemaster/images/ggp.gif' width='480' height='65' border='0'/></td><td width='100%' align='center' valign='center'><b><xsl:value-of select="match/@id"/><br/><xsl:value-of select="match/game"/><br/>Startclock: <xsl:value-of select="match/startclock"/>Playclock: <xsl:value-of select="match/playclock"/>Steplimit: <xsl:value-of select="match/steplimit"/></b></td></tr></table><table width='800' cellpadding='0' cellspacing='0' border='0'><tr><td width='100%' height='2' bgcolor='#336699'></td></tr></table></center><div style='margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px'><center><table width='800'><tr><td width='50%' align='center' valign='top'><xsl:for-each select="match/herstory/state">  <div>    <xsl:attribute name='id'><xsl:value-of select="stepnum"/></xsl:attribute>    <xsl:attribute name='style'>display:none</xsl:attribute>		<!-- Game specific stuff goes here -->				<style type="text/css" media="all">					#main					{						position:   relative;						width:      350px;						height:     350px;						padding:    10px;						border:     2px solid #b17735;						background: transparent url(/docserver/gamemaster/images/ccboard.gif) repeat top left; 					}							div.teal					{						width: 50px;						height: 40px;						background: #00ffff;					}					div.red					{						width: 50px;						height: 40px;						background: #ff0000;					}					div.blue					{						width: 50px;						height: 40px;						background: #0000ff;					}					div.green					{						width: 50px;						height: 40px;						background: #00ff00;					}					div.yellow					{						width: 50px;						height: 40px;						background: #ffff00;					}					div.magenta					{						width: 50px;						height: 40px;						background: #ff00ff;					}					div.blank					{						width: 50px;						height: 40px;						background: #cca083;					}					#B2,#C2,#C3,#C4,#C5,#C6,#C7,#D2,#D3,#D4,#D5,#D6,#E2,#E3,#E4,#E5,#F2,#F3,#F4,#F5,#F6,#G2,#G3,#G4,#G5,#G6,#G7,#H2					{						float: left;					}					#A1,#I1					{						margin-left: 150px;						clear: left;					}					#B1,#H1					{						margin-left: 125px;						float: left;						clear: left;					}					#C1,#G1					{						margin-left: 0px;						clear: left;						float: left;					}					#D1,#F1					{						margin-left: 25px;						clear: left;						float: left;					}					#E1					{						margin-left: 50px;						clear: left;						float: left;					}				</style>				<div id="main">					<xsl:for-each select="fact[relation='cell']">						<xsl:sort select="argument[1]"/>							<div>								<xsl:attribute name="id"><xsl:value-of select="argument[1]"/></xsl:attribute>								<xsl:choose>								    <xsl:when test="argument[2]='yellow'">										<xsl:attribute name="class">yellow</xsl:attribute>										<img src="/docserver/gamemaster/images/boardpit.gif"/>									</xsl:when>								    <xsl:when test="argument[2]='magenta'">										<xsl:attribute name="class">magenta</xsl:attribute>										<img src="/docserver/gamemaster/images/boardpit.gif"/>								    </xsl:when>								    <xsl:when test="argument[2]='teal'">										<xsl:attribute name="class">teal</xsl:attribute>										<img src="/docserver/gamemaster/images/boardpit.gif"/>								    </xsl:when>								    <xsl:when test="argument[2]='green'">										<xsl:attribute name="class">green</xsl:attribute>										<img src="/docserver/gamemaster/images/boardpit.gif"/>								    </xsl:when>								    <xsl:when test="argument[2]='red'">										<xsl:attribute name="class">red</xsl:attribute>										<img src="/docserver/gamemaster/images/boardpit.gif"/>								    </xsl:when>								    <xsl:when test="argument[2]='blue'">										<xsl:attribute name="class">blue</xsl:attribute>										<img src="/docserver/gamemaster/images/boardpit.gif"/>								    </xsl:when>								    <xsl:otherwise>										<xsl:attribute name="class">blank</xsl:attribute>										<img src="/docserver/gamemaster/images/boardpitb.gif"/>								  	</xsl:otherwise>							</xsl:choose>						</div>					</xsl:for-each>				</div>		<!-- Game specific stuff goes here -->  </div></xsl:for-each><table><tr><td valign='center'><img id='left' src='/docserver/gamemaster/images/greyleft.gif' border='0' onClick='showstate(Math.max(step-1,1))'/></td><td valign='center'>Step <span id='stepcount'>1</span></td><td valign='center'><img id='right' src='/docserver/gamemaster/images/blackright.gif' border='0' onClick='showstate(Math.min(step+1,steps))'/></td></tr></table></td><td width='50%' align='center' valign='top'><table cellpadding='3' cellspacing='0' border='1' bgcolor='#ffffcc'>  <tr bgcolor='#ffff99'>    <th>Step Number</th>    <xsl:for-each select="match/player">      <th><xsl:value-of select="."/></th>    </xsl:for-each>  </tr>  <xsl:for-each select="match/history/move">    <tr>        <td style='cursor:pointer' align='center' bgcolor='#ffff99'>          <xsl:attribute name='id'>step<xsl:value-of select="./stepnum"/></xsl:attribute>          <xsl:attribute name='onClick'>            <xsl:value-of select="concat('showstate(',stepnum,')')"/>          </xsl:attribute>          <xsl:value-of select="stepnum"/>        </td>      <xsl:for-each select="action">        <td>        <xsl:choose>          <xsl:when test = "function">            (<xsl:value-of select="function"/>             <xsl:for-each select="argument">&#160;<xsl:value-of select="."/></xsl:for-each>)<br/>          </xsl:when>          <xsl:otherwise>            <xsl:value-of select="."/>          </xsl:otherwise>        </xsl:choose>        </td>      </xsl:for-each>    </tr>  </xsl:for-each>  <xsl:if test="match/rewards">    <tr bgcolor='#ffff99'>      <xsl:if test="count(match/herstory/state) = '1'">        <td align='center' bgcolor='#ffffcc'>          <xsl:attribute name='id'>step<xsl:value-of select="count(match/herstory/state)"/></xsl:attribute>          Final        </td>      </xsl:if>      <xsl:if test="count(match/herstory/state) != '1'">        <td style='cursor:pointer' align='center' bgcolor='#ffff99'>          <xsl:attribute name='id'>step<xsl:value-of select="count(match/herstory/state)"/></xsl:attribute>          <xsl:attribute name='onClick'>            <xsl:value-of select="concat('showstate(&quot;',count(match/herstory/state),'&quot;)')"/>          </xsl:attribute>          Final        </td>      </xsl:if>      <xsl:for-each select="match/rewards/reward">	<td align='center'><xsl:value-of select="."/></td>      </xsl:for-each>    </tr>  </xsl:if></table></td></tr></table></center></div><script type='text/javascript'>showstate(1)</script><br/><center><table width='800' cellpadding='0' cellspacing='0' border='0'><tr><td width='100%' height='2' bgcolor='#336699'></td></tr></table><div style='font-size:14px'>Match information provided by <a href='http://games.stanford.edu'>Gamemaster</a>.</div></center></body></html></xsl:template></xsl:stylesheet>