<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<xsl:template match="/">
  <html>
    <head>
      <title>Buck's Wargaming Projects</title>
    </head>
    <body>
      <center>
      <table border="2" width="90%">
        <tr align="center">
		  <td><img src="images/bugler.gif"/></td>
		  <td><img src="images/title2.jpg" width="80%"/></td>
		  <td><img src="images/drummer.gif"/></td>
        </tr>
      </table>
      </center>
      
      <h2>Buck's Wargaming Projects</h2>
      
      <xsl:apply-templates select="//introduction" />
			
      <p>If the name of the period is in 
			<span class="complete">yellow</span>, the project is 
			considered to be complete.  This means that, except for those 
			targets of opportunity, I don't plan on adding anything to the 
			project.  If the name of the period is in 
			<span class="newstart">light green</span>, the project 
			is a new start, and I don't have enough done to run a game.  
			If the name of the project is in 
			<span class="ready">blue</span> I can 
			run games, but I am still actively adding to the project, 
			either figures or terrain pieces.  If the name of the project 
			is in <span class="dormant">orange</span>, the project is on 
			permanent hold.  Finally, if the name of the project is in 
			<span class="future">light orange</span>, the project is one I 
			would like to do in the future.</p>
      
      <h2>Figures and Periods</h2>
			<p><em>To view the details of a project, click on it.  To hide the details, click on it again.<br/>
        	You can resort the list by any of the column headings by clicking on the heading.  To change
        	the order of sorting, click on the heading a second time.</em>
			</p>
      
      <div background="#cccccc" style="border:3px solid black; font-weight:bold">
           <span style="width:39%" onclick="reSort('name')">Name</span>
           <span style="width:19%" onclick="reSort('@size')">Scale</span>
           <span style="width:20%" onclick="reSort('scale')">Size Battles</span>
           <span style="width:10%" onclick="reSort('@status')">Status</span>
      </div>
         
      <xsl:apply-templates select="//project" order-by="@size; name" />
    </body>
  </html>
</xsl:template>

<xsl:template match="project">
  
   <div style="border-left:1px solid black; 
              border-right:1px solid black; 
              border-bottom:1px solid black"
       onclick="toggle(this.parentNode.nextSibling)">
     <div>
       <xsl:choose>
         <xsl:when match=".[@status $eq$ 'working']">
           <span onclick="toggle(this.parentNode.nextSibling)" 
                 style="width:40%" class="working">
             <xsl:value-of select="name" />
           </span>
          </xsl:when>
         <xsl:when match=".[@status $eq$ 'complete']">
           <span onclick="toggle(this.parentNode.nextSibling)" 
                 style="width:40%" class="complete">
             <xsl:value-of select="name" />
           </span>
          </xsl:when>
         <xsl:when match=".[@status $eq$ 'new start']">
           <span onclick="toggle(this.parentNode.nextSibling)" 
                 style="width:40%" class="newstart">
             <xsl:value-of select="name" />
           </span>
          </xsl:when>
         <xsl:when match=".[@status $eq$ 'dormant']">
           <span onclick="toggle(this.parentNode.nextSibling)" 
                 style="width:40%" class="dormant">
             <xsl:value-of select="name" />
           </span>
          </xsl:when>
         <xsl:when match=".[@status $eq$ 'future']">
           <span onclick="toggle(this.parentNode.nextSibling)" 
                 style="width:40%" class="future">
             <xsl:value-of select="name" />
           </span>
          </xsl:when>
          <xsl:otherwise>
           <span onclick="toggle(this.parentNode.nextSibling)" 
                 style="width:40%" class="ready">
             <xsl:value-of select="name" />
           </span>
         </xsl:otherwise>
       </xsl:choose>
       
       <span onclick="toggle(this.parentNode.nextSibling)" style="width:20%">
         <xsl:value-of select="@size"/>
       </span>
       <span onclick="toggle(this.parentNode.nextSibling)" style="width:20%">
         <xsl:value-of select="scale"/>
       </span>
       <span onclick="toggle(this.parentNode.nextSibling)" style="width:10%">
         <xsl:value-of select="@status"/>
       </span>
     </div>
     
     <div style="display:none; margin-left:10%;width:90%;font-size:10pt">
       <div>
         <span style="font-weight:bold; font-size:12pt">Rules: </span>
         <span style="font-style:italic"><xsl:value-of select="rules" /></span>
       </div>
       <div>
         <span style="font-weight:bold; font-size:12pt">Mounting: </span>
         <xsl:value-of select="mounting" />
       </div>
       <div>
         <span style="font-weight:bold; font-size:12pt">Notes: </span>
         <xsl:value-of select="figures" />
       </div>
     </div>
   </div>
</xsl:template>


</xsl:stylesheet>