<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="../style.css" /> -->
<title>Diaporama</title>
</head>
<style>
.horiz, .vertic {
position:absolute;
left:expression((document.body.clientWidth/2-this.offsetWidth/2)*coeff);
top:expression((document.body.clientHeight/2-this.offsetHeight/2)*coeff);
}

.horiz {
width:expression(document.body.clientWidth*coeffh);
height:expression(document.body.clientWidth*5/7*coeffh);
}

.vertic {
width:expression(document.body.clientHeight*5/7*coeffv);
height:expression(document.body.clientHeight*coeffv);
}

#ensemble {
color:red;
position:absolute;
font-size:20pt;
z-index:-1;
filter:revealTrans(Duration=3, Transition=0)
revealTrans(Duration=3, Transition=1) 
revealTrans(Duration=3, Transition=2)
revealTrans(Duration=3, Transition=3)
revealTrans(Duration=3, Transition=4)
revealTrans(Duration=3, Transition=5)
revealTrans(Duration=3, Transition=6)
revealTrans(Duration=3, Transition=7)
revealTrans(Duration=3, Transition=8)
revealTrans(Duration=3, Transition=9)
revealTrans(Duration=3, Transition=10)
revealTrans(Duration=3, Transition=11)
revealTrans(Duration=3, Transition=12)
revealTrans(Duration=3, Transition=13)
revealTrans(Duration=3, Transition=14)
revealTrans(Duration=3, Transition=15)
revealTrans(Duration=3, Transition=16)
revealTrans(Duration=3, Transition=17)
revealTrans(Duration=3, Transition=18)
revealTrans(Duration=3, Transition=19)
revealTrans(Duration=3, Transition=20)
revealTrans(Duration=3, Transition=21)
revealTrans(Duration=3, Transition=22)
revealTrans(Duration=3, Transition=23);
}

table {
position: absolute;
	background:white;
	border:outset 1px white;
border-collapse:collapse;
z-index:3;
}

table td {
	border:solid 0px white;
}

.button
	{
	width:32px;
	height:20px;
	border-style:solid;
	border-width:1px;
	border-color:threedface;
	background:lightgrey;
	cursor: hand;
}

button {
	border-style:solid;
	border-width:1px;
	border-color:threedface;
	background:lightgrey;}

}
#choixtaille {
	border-style:solid;
	border-width:1px;
	border-color:threedface;
	background:lightgrey;
	font-size:8pt;
	font-family:Verdana;
	vertical-align:100%;
}

#label {
font-family: 'Comic Sans MS'; position: absolute; padding-bottom:0.5em; padding-right:1em; 
color:red; width:100%;text-align:right;
}
#boutons {
position: absolute;
top:0;
left:0;
}

</style>
<script>
<xsl:comment><![CDATA[
var coeff = 1;
var coeffh = 0.7;
var coeffv = 0.9;

var tpsentrediapos = 5;
var carrouselActif=false;
var legende;
var images = document.XMLDocument.selectNodes("//file");
var iTimerID = null;

function window.onload() {
window.status="Sélectionnez une photo ou lancez le diaporama";
taille[0].checked = "true";
lanceImage();
}

function deplaceBoutons() {
boutons.style.pixelTop=document.body.scrollTop;
boutons.style.pixelLeft=document.body.scrollLeft;
}

function noscroll() {
document.body.scrollTop=0;
document.body.scrollLeft=0;

}

function lanceImage() {
// mise à jour des boutons suivant/précédent
switch (parseInt(liste.value)) {
case 0:
// première image
prev.style.left=0;
next.style.left=-120;
break;
case images.length-1:
// dernière image
next.style.left=-90;
prev.style.left=-30;
if (carrouselActif) {
arretCarrousel()
}
break;
default:
prev.style.left=-30;
next.style.left=-120;
break;
}
// afficher l'image sélectionnées dans la liste
cache.src=images[liste.value].selectSingleNode("nom").text;
}

function afficheImage() {
if (cache.readyState=="complete")
 {
if (carrouselActif) {
var nofiltre= Math.round(Math.random()*23);
ensemble.filters(nofiltre).Apply()
};
image.src=cache.src;
if (images[liste.value].getAttribute("vertical")=="oui")
{ensemble.className="vertic"} else {ensemble.className="horiz"};

label.innerText=images[liste.value].selectSingleNode("titre").text;
if (carrouselActif) {ensemble.filters(nofiltre).Play()};
}
}

function departcarrousel() {
if (carrouselActif == false) {

if (parseInt(liste.value) +1 == images.length) {
	liste.options[0].selected="true";
	lanceImage()};
	carrouselActif=true;
	carrousel.innerText="Arrêter diaporama";

	iTimerID = window.setInterval("move(+1)", tpsentrediapos*1000);
	}
else {arretCarrousel()}
}

function move(increment) {
var photocible=parseInt(liste.value)+parseInt(increment);
if (photocible !=-1 && photocible !=(images.length)) {
liste.options[photocible].selected="true";
lanceImage();
}
}

function arretCarrousel() {
carrousel.innerText="Relancer diaporama";
carrouselActif = false;
window.clearInterval(iTimerID);
}

]]></xsl:comment>
</script>

<body onscroll="deplaceBoutons()"><table id="boutons">
<td>
 <div id="prevBorder" class="button" onclick="move(-1)">
 <div style='position: absolute;clip:rect(0px, 30px, 18px, 0px)'><img
 src="buttons.gif" id="prev" title="Photo précédente" style='position:
 relative;left:-30px'/></div>
 </div></td><td>
<select id="liste" onclick="lanceImage()" title="Choisissez une photo">
<xsl:for-each select="//file">
<option>
<xsl:attribute name="value"><xsl:eval>absoluteChildNumber(this)-1</xsl:eval></xsl:attribute><xsl:eval>absoluteChildNumber(this)</xsl:eval> -
<xsl:value-of select="titre"/></option>
</xsl:for-each>
</select></td><td>
 <div id="nextBorder" class="button" onclick="move(+1)">
 <div style='position:absolute;clip:rect(0px, 30px, 18px, 0px)'><img
 src="buttons.gif" id="next" title="Photo suivante" style='position:
 relative;left:-120px'/></div>
 </div></td>
<td>
<button id="carrousel" onclick="departcarrousel()">Lancer diaporama</button> </td>
<td>
<div id="choixtaille">
<input type="radio" name="taille" checked="checked" onclick="coeff=1;coeffh=0.7;coeffv=0.9;noscroll()"> Image entière   </input>
<input type="radio" name="taille" onclick="coeff=0;coeffh=1;coeffv=7/5*document.body.clientWidth/document.body.clientHeight;noscroll()"> Largeur écran   </input>
<input type="radio" name="taille" onclick=";coeff=0;coeffh=1.5;coeffv=7/5*document.body.clientWidth/document.body.clientHeight*1.5;noscroll()" > Grande taille   </input>
</div></td>
</table>
<div id="ensemble">
<div id="label"></div>
<img id="image" style="width:100%;height:100%; margin:0" />
</div>
<img id="cache" src="" style="display: none" onreadystatechange="afficheImage()"/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>