<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0">

  <xsl:param name="number"/>

  <xsl:output method="html"
    encoding="iso-8859-1"
    doctype-system="http://www.w3.org/TR/html4/strict.dtd"
    doctype-public="-//W3C//DTD HTML 4.01//EN"
    indent="yes"/>

  <xsl:template match="/images/image[starts-with(@filename, $number)]">
    <html lang="en">
      <head>
        <title>The vee.net Bubblegum Crisis image archive -
        <xsl:value-of select="$number"/>.png</title>
      </head>

      <style type="text/css">
        div.header {
          color: gray;
          background: #404040;
          font: 0.8em sans-serif;
          margin: 0px;
          border: 0px;
          padding: 0.2em;
          width: 100%;
        }

        div.body {
          margin: 10px;
          border: 0px;
          padding: 0.2em;
          width: auto;
        }

        div.footer {
          color: gray;
          background: #404040;
          font: 0.8em sans-serif;
          margin: 0px;
          border: 0px;
          padding: 0.2em;
          width: 100%;
        }

        a.ymmv:link { color: silver }
        a.ymmv:visited { color: silver }
        a.ymmv:hover { color: white }
        a.ymmv:active { color: silver }

        body {
          margin: 0px;
          border: 0px;
          padding: 0px;
          color: black;
          background: #e8f4e7;
        }

        a:link { color: fuchsia  }
        a:visited { color: purple  }
        a:hover { color: red }
        a:active { color: fuchsia }

        h1 {
          font: bold 1.4em sans-serif;
        }

        img {
          border: 0px;
        }

        hr {
          border: 1px solid black;
        }
      </style>

      <body>
        
        <div class="header">
          you are here:
          <a class="ymmv" href="/">web.vee.net</a> /
          <a class="ymmv" href="/media/">media</a> /
          <a class="ymmv" href="/media/bubblegum/">bubblegum</a> /
          tour: <xsl:value-of select="@filename"/>
        </div>
        
        <div class="body">
          <h1><xsl:value-of select="@filename"/></h1>

          <xsl:call-template name="prev-next-widget"/>

          <a href="{@filename}">
            <img alt="{@filename}"
              src="{thumbnail/@filename}"
              width="{thumbnail/@width}"
              height="{thumbnail/@height}"/>
          </a>

          <xsl:call-template name="prev-next-widget"/>

          <p>Click on the image to get it full size.</p>
        </div>

        <div class="footer">
          Problems with this site?
          <a class="ymmv" href="mailto:webmaster@vee.net">
            Email the webmaster.
          </a>
          Copyright 2000 Michael Gratton. All rights reserved.
        </div>
      </body>
    </html>
  </xsl:template>

  <xsl:template name="prev-next-widget">
    <p>
      <xsl:if test="not($number = '01')">
        <a href="{format-number(number($number) -1, '00')}.html">&lt;prev</a>
        :
      </xsl:if>
      <a href="/media/bubblegum/">index</a>
      <xsl:if test="not($number = '34')">
        :
        <a href="{format-number(number($number) +1, '00')}.html">next&gt;</a>
      </xsl:if>
    </p>
  </xsl:template>

</xsl:stylesheet>
