<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" indent="no"/>

<xsl:variable name="base" select="document('base_tableaux1.xml')"/>
<xsl:variable name="repert" select="/tableauxjour/repertoire"/>

<xsl:template match="/">


    <link href="glisser.css" rel="stylesheet" type="text/css" />

    <div id="slider">                                                                          
      <div id="mask">
        <ul class="container">
          <xsl:for-each select="tableauxjour/tableau">
            <xsl:variable name="lien" select="."/> 
            <!--<xsl:variable name="poster" select="concat('tableaux/',$lien)"/>-->
            <xsl:variable name="poster" select="concat($repert,'/',$lien)"/> 
            <xsl:variable name="titre" select="$base/tableaux_Anny/tableau[lien=$lien]/titre"/>
            <li class="centered">
              <img src="{$poster}"/><br/><!--<xsl:value-of select="$titre"/>-->
              <!--<div style="background:pink;width:480px;"><center>--><a href="{$poster}" target="_blank"><xsl:value-of select="$titre"/></a><!--</center></div>--> 
            </li> 
          </xsl:for-each>
        </ul>
      </div>
      <!--<div id="encart">
        <ul id="dots">-->
         <!--les petits points qui affichent où nous en sommes sur le slide--> 
         <!--<li class="button1" onClick="changeImage(1)"></li>
         <li class="button2" onClick="changeImage(2)"></li>
         <li class="button3" onClick="changeImage(3)"></li>
         <li class="button4" onClick="changeImage(4)"></li>
       </ul>
      </div>-->
      <!-- Les fleches de navigations -->
      <img src="resources/fleche-gauche.png" id="fleche_gauche" class="fleche" onClick="prevImage()"/>
      <img src="resources/fleche-droite.png" id="fleche_droite" class="fleche" onClick="nextImage()"/>
    </div>      
    <script type="text/javascript">
      var secDuration = 5;
      var image = 1;
      var maxImages = 4;
      var slider = document.getElementById('slider');
      var timeout;
      
      function changeImage(requiredImage) {
        if (!requiredImage)<!--> && requiredImage != 0)-->{ 
          if(image &lt; maxImages){image++;}
          else{image = 1;}
        }
        else{
          if(requiredImage &gt; maxImages){image = 1;}
          else if(requiredImage &lt; 1){image = maxImages;}
          else{image = requiredImage;}
        }
        slider.className = "image"+image;
        clearTimeout(timeout)
        timeout = setTimeout("changeImage()",secDuration*1000);
      }
      function nextImage(){changeImage(image+1);}
      function prevImage(){changeImage(image-1);}
      
      changeImage(1);
    </script>
</xsl:template>
</xsl:stylesheet>