<?xml version='1.0'?>

<!--

     Simple XML slideshow transformation.
     Copyright 2004 Mike Hearn <mike@navi.cx>

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
-->

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                version="1.0">

  <xsl:output method="html"/>
  <xsl:strip-space elements="*"/>

  <xsl:template match="slideshow">
    <html>
      <head>
        <title><xsl:value-of select="@title"/></title>
        <style>
          body {
            font-family: Arial, Helvetica, Sans;
            background-image: url(<xsl:value-of select="@background"/>);
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: <xsl:choose><xsl:when test="@background-position != ''"><xsl:value-of select="@background-position"/></xsl:when><xsl:otherwise>center</xsl:otherwise></xsl:choose>;
          }
          
          .title {
            font-size: larger;
            font-weight: heavy;
            border: 1px gray dotted;
            border-width: 0px 0px 1px 0px;
            min-width: 90%;
            margin:5px;
            color: gray;
          }

          li {
            padding-bottom: 1em;
          }

          win32 {
            color: blue;
            font-weight: bold;
            font-size: larger;
          }

          .slide {
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            min-width: 100%;
            min-height: 100%;
          }

          .overlay {
            min-width: 100%;
            min-height: 100%;
            background-color: none;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
          }

          .slidepicker {
            position: fixed;
            bottom:0px;
            left:0px;
            min-width:100%;
            z-index: 2;
          }

          .picker {
            display: inline;
            padding-left: 5px;
            padding-right: 5px;
            margin-left: 5px;
            margin-right: 5px;
            background-color: darkgrey;
          }
          .picker:hover {
            background-color: lightgrey;
            cursor: default;
          }
        </style>
      </head>

      <body>
        <font size="+3">
          <xsl:apply-templates/>
        </font>
        <div class="overlay" onclick="click()"> </div>
        
        <div class="slidepicker">
          <xsl:for-each select="slide">
            <div class="picker" title="{@title}" id="picker{position()}" onclick="go({position()})"><xsl:value-of select="position()"/></div>
          </xsl:for-each>
        </div>

        <script language="JavaScript">
          curSlide = 1;
          curPicker = 1;
          
          function current() {
            return get(curSlide);
          }

          function show(slide) {
            slide.setAttribute("style", "display: block");
          }

          function hide(slide) {
            slide.setAttribute("style", "display: none");
          }

          function get(num) {
            return document.getElementById("slide" + num);
          } 
          
          function highlightPicker(num) {
            document.getElementById("picker"+curPicker).setAttribute("style", "");
            curPicker = num;
            document.getElementById("picker"+curPicker).setAttribute("style", "background-color: lightgreen");
          }
          
          function next() {
            if (!get(curSlide + 1)) 
              alert("End of presentation!");
            else {
              hide(current());
              curSlide++;
              show(current());
              highlightPicker(curSlide);
            }
          }

          function previous() {
            hide(current());
            curSlide--;
            show(current());
          }
          
          function click() {
            next();
          }

          function go(where) {
            hide(current());
            curSlide = where;
            show(current());
            highlightPicker(curSlide);
          }
          
          // show the first slide
          show(current());
          highlightPicker(1);
        </script>
        
      </body>
      
    </html>
  </xsl:template>

  <xsl:template match="slide">
    <div class="slide" id="slide{position()}">
      <xsl:if test="/slideshow/@logo != ''">
        <img style="float: left; padding-right:10px" src="{/slideshow/@logo}"/>  
      </xsl:if>
      
      <div class="title" style="margin-left:10px"><xsl:value-of select="@title"/></div>
      <div style="position:absolute; left:0px; right:100%; min-width:100%;">
        <div style="margin-left:40px; margin-right:20px">
          <xsl:copy-of select="node()"/>
        </div>
      </div>
    </div>
  </xsl:template>
  
</xsl:stylesheet>
