<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!--
This transformation selects two pictures starting with
number $picture-number and embeds them in a web page.
$url is the location of the calling script (pictures.php)
and $background is a background colour for the page.
-->
<xsl:output
method="xhtml"
omit-xml-declaration="yes"
encoding="utf-8"
indent="yes"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
/>
<!-- Parameters passed in from the calling-script -->
<xsl:param name="picture-number" select="1"/>
<xsl:param name="url"/>
<xsl:param name="background"/>
<!-- The total number of pictures described in the file -->
<xsl:variable name="max" select="count(//picture)"/>
<!-- The name of parent of the currently selected picture -->
<xsl:variable name="current-section" select="(/gallery/section/picture)[position()=$picture-number]/../@name"/>
<!-- Main template -->
<xsl:template match="gallery">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="default.css" type="text/css" />
<title><xsl:value-of select="$current-section"/></title>
<style type="text/css">
body { background: <xsl:value-of select="$background"/>; color: #0000cc; }
a:hover { text-decoration: underline; background-color: inherit; }
</style>
</head>
<body>
<table width="100%" border="0"><tr valign="top">
<td align="left"><h1><xsl:value-of select="$current-section"/></h1></td>
<td align="right">
<div class="select-box">
<form method="get" action="{$url}">
<select name="number" onchange="submit();">
<xsl:call-template name="list-options"/>
</select>
<br/>
<input type="submit" value="Go" />
</form>
</div>
</td>
</tr></table>
<center>
<xsl:call-template name="navigation"/>
<hr/>
<table align="center" cellpadding="10" border="0">
<tr><td align="center">
<!-- Insert the first picture -->
<xsl:apply-templates select="(/gallery/section/picture)[position()=$picture-number]"/>
</td>
<td align="center">
<!-- Insert the second picture -->
<xsl:apply-templates select="(/gallery/section/picture)[position()=1+$picture-number]"/>
</td>
</tr></table>
<hr/>
<xsl:call-template name="navigation"/>
<br/>
<br/>
<a href="/">Return to Hannah's Homepage</a>
</center>
</body>
</html>
</xsl:template>
<!-- LIST-SECTIONS -->
<xsl:template name="list-options">
<!-- Make list of sections -->
<xsl:for-each select="/gallery/section">
<option value="{count(preceding::picture)+1}">
<!-- Mark the selected section when we get to it -->
<xsl:if test="@name=$current-section">
<xsl:attribute name="selected">selected</xsl:attribute>
</xsl:if>
<xsl:value-of select="@name"/>
</option>
</xsl:for-each>
</xsl:template>
<!-- Process the picture -->
<xsl:template match="picture">
<img src="{@filename}" width="{@width}" height="{@height}">
<xsl:attribute name="alt">
<xsl:value-of disable-output-escaping="yes" select="@caption"/>
</xsl:attribute>
</img>
<br/><br/>
<b><xsl:value-of disable-output-escaping="yes" select="@caption"/></b>
</xsl:template>
<!-- NAVIGATION -->
<xsl:template name="navigation">
<xsl:choose>
<xsl:when test="$picture-number < 3">
<xsl:text>No older pictures</xsl:text>
</xsl:when>
<xsl:otherwise>
<a href="{$url}?number={$picture-number - 2}">
<font color="#ddffdd"><xsl:text>.</xsl:text></font><img align="bottom" src="gifs/arrow_l.gif" width="11" height="11" border="0" alt="Back arrow"/><xsl:text> </xsl:text>
<xsl:text>Older pictures</xsl:text>
</a>
</xsl:otherwise>
</xsl:choose>
<xsl:text> | </xsl:text>
<xsl:choose>
<xsl:when test="$picture-number > $max - 2">
<xsl:text>No newer pictures</xsl:text>
</xsl:when>
<xsl:otherwise>
<a href="{$url}?number={$picture-number + 2}">
<xsl:text>Newer pictures</xsl:text><xsl:text> </xsl:text><img align="bottom" src="gifs/arrow_r.gif" width="11" height="11" border="0" alt="Forward arrow"/>
</a>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>