<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
                xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:h="http://www.w3.org/1999/xhtml" 
                xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
                version="1.0">
  <xsl:output  indent="yes" method="html"/> 
  <xsl:template match="/">
    <html>
    <head>
      <title>Max's Pictures on a map</title>
      <script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=ABQIAAAAr2Y9aESjH_AFJYEaILuq4RS7FOSf9yga5ahhHGfMLh8yciraUhSsp6-mtJPwC9_w4oUqARb29vt35w" type="text/javascript">foo</script> <!-- foo just so that this script isn't output as an empty element -->
      <style type="text/css">body {background: #000; color: #AAA }</style>
    </head>
    <body>
      <h1>Max's Pictures on a map</h1>

      <form><p>Center and Zoom on: <select name='place' id='place' onchange='centerOn()'>
      <option selected='selected' disabled='disabled'>Pick an area</option>
      <option value='World'>World</option>
      <option value='Europe'>Europe</option>
      <option value='France'>France</option>
      <option  value='USA'>USA</option>
      </select></p></form>
      
      <div id="map" style="width: 700px; height: 400px"></div>
          <script type="text/javascript">
            <xsl:text>
            //<![CDATA[

            var map = new GMap(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.centerAndZoom(new GPoint(0, 20), 16);
            
            // Create a marker whose info window displays the given text.
            function createMarker(point, dir, icon, text) {
            var marker = new GMarker(point);
            var html = "<a href='"+dir+"'>" + text +"</a><img src='"+dir+"/"+icon+"' alt='icon' width='96'/>";
            GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
            });
            return marker;
            }
            
            // one marker for each photo album, indicating lat,lon,directory name,icon filename
            // automatically generated from photos.html

            // cool function from Dom
function centerOn() {
   placeSelect = document.forms[0].place;
   place = placeSelect.options[placeSelect.selectedIndex].value;
   switch(place) {
      case "USA": 
        map.centerAndZoom(new GPoint(-95.677068,37.0625),13);
        break;
      case "Europe":
        map.centerAndZoom(new GPoint(11.513672,49.439557),13);
        break;
      case "France":
        map.centerAndZoom(new GPoint(2.8125,46.860191),12);
        break;
      case "World":
      map.centerAndZoom(new GPoint(0, 20), 16);
        break;
   }
   placeSelect.selectedIndex = 0;
   return false;
}

            ]]>
            </xsl:text>
            <xsl:apply-templates select="h:html/h:body/h:table/h:tr[@geo:lat and @geo:long]"/>
          </script>
    </body>
    </html>
  </xsl:template>

  <xsl:template match="h:tr">
    <xsl:if test="@class='all'">
      <xsl:value-of select="concat('map.addOverlay(createMarker(new GPoint(',@geo:lat,',',@geo:long,'),&quot;',h:td/h:a/@href,'&quot;,&quot;',substring-after(h:td/h:a/h:img/@src,'/'),'&quot;,&quot;',h:td[2],'&quot;));&#xa;')"/>
      <!--      <xsl:value-of select="concat('map.addOverlay(createMarker(new GPoint(',@geo:lat,',',@geo:long,'),&quot;',substring-before(h:td/h:a/@href,'/'),'&quot;,&quot;',substring-after(h:td/h:a/h:img/@src,'/'),'&quot;,&quot;',h:td[2],'&quot;));&#xa;')"/> -->
    </xsl:if>
  </xsl:template> 
</xsl:stylesheet>

