<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
    <xsl:param name="search"/>
    <xsl:template match="/ZooList">
        <html>
            <head>
            <link rel="shortcut icon" href="http://www.oomphmedia.co.uk/files/blog/images/oomphmedia.ico"/> 
                <title>Zoo Finder</title>
                <link rel="stylesheet" type="text/css"
                    href="http://www.oomphmedia.co.uk/zoo/zoo.css"/>
            </head>
            <body>
                <div id="wrapper">
                <div id="search">
                <form action="http://www.cems.uwe.ac.uk/xmlwiki/util/xslt2html.xq" method="get">
                    <input type="hidden" name="xml" value="http://www.oomphmedia.co.uk/zoo/zoo160.xml"/>
                    <input type="hidden" name="xslt" value="http://www.oomphmedia.co.uk/zoo/zoo190.xsl"/>
                    <label for="search">
                        <xsl:text>Zoo Name</xsl:text>
                    </label>
                    <input type="text" name="search" value="{$search}"/>
                    <input type="submit" value="Search"/>
                </form>
                </div>
                <img src="http://www.oomphmedia.co.uk/zoo/images/zoo.jpg" alt="Zoo Finder" />
                <br></br>
                <br></br>
                <xsl:choose>
                    <xsl:when test="$search!=''">
                        <xsl:for-each select="Zoo[starts-with (upper-case(name), upper-case(($search)))]">
                            <!-- starts-with()  is  an XPath function -->
                            <xsl:sort select="Zoo"/>
                            <div >
                                <h2>
                                    <xsl:value-of select="name"/>
                                </h2>
		   <p>
		       <img src="http://www.oomphmedia.co.uk/zoo/images/mail.jpg" alt="address" />
		       <xsl:value-of select="address/street"/>, 
		       <xsl:value-of select="address/town"/>,
		       <xsl:value-of select="address/postcode"/>
                            	         <br></br>
		       <br></br>
		       <img src="http://www.oomphmedia.co.uk/zoo/images/browser.jpg" alt="website" /><a href="{website}">
                                       <xsl:value-of select="website"/>
                            	          </a>
		          <br></br>
		       <br></br>
		       <img src="http://www.oomphmedia.co.uk/zoo/images/phone.jpg" alt="phone" /><xsl:value-of select="tel"/>
		          <br></br>
	

	
		       <br></br>
		       <img src="http://www.oomphmedia.co.uk/zoo/images/map.jpg" alt="Map" /><a href="http://maps.google.co.uk/maps?f=q&amp;hl=en&amp;geocode=&amp;time=&amp;date=&amp;ttype=&amp;q=http:%2F%2Fpipes.yahoo.com%2Fpipes%2Fpipe.run%3F_id%3DKgDk1yGc3BGY1OQW1vC6Jw%26_render%3Dkml%26input%3D{address/postcode}&amp;ie=UTF8&amp;z=17&amp;om=1">
		           Map
		       </a>
		       <br></br>
		       <br></br>
		       <img src="http://www.oomphmedia.co.uk/zoo/images/news.jpg" alt="News" /><a href="http://search.bbc.co.uk/cgi-bin/search/results.pl?scope=all&amp;edition=d&amp;q={name}">
		           News
		       </a>  
		   </p>
                                <br></br>
                                <br></br>
                                <br></br>
                                <br></br>
                            </div>
                        </xsl:for-each>
                    </xsl:when>
                    <xsl:otherwise>
                        <p>Enter the initial  letter of the Zoo Name to select Zoo</p>
                    </xsl:otherwise>
                </xsl:choose>
                <div id="footer">
                    <p>UWE Student Project | Designed by James Hurst &amp; Benjamin Woodbridge</p>
                    <p><a href="http://www.oomphmedia.co.uk/zoo">Zoo Homepage</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
                </div>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>
