<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.door {
position:absolute;left:100px;top:100px;width:200px;height:150px;border:solid red 1px;
}
.door IMG {
width:200px;height:150px;
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="GoTo 0" onmouseup="zxcDoors.GoTo('doors',0);"/>
<input type="button" name="" value="GoTo 1" onmouseup="zxcDoors.GoTo('doors',1);"/>
<input type="button" name="" value="GoTo 2" onmouseup="zxcDoors.GoTo('doors',2);"/>
<input type="button" name="" value="GoTo 3" onmouseup="zxcDoors.GoTo('doors',3);"/>
<input type="button" name="" value="GoTo 4" onmouseup="zxcDoors.GoTo('doors',4);"/>
<input type="button" name="" value="Pause" onmouseup="zxcDoors.Pause('doors');"/>
<input type="button" name="" value="Auto" onmouseup="zxcDoors.Auto('doors',0);"/>
<div id="doors" class="door" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="door" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="door" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="door" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="door" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="door" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
var zxcDoors={
init:function(o){
var id=o.ID,p=document.getElementById(id),clds=p.getElementsByTagName('IMG'),ms=o.AnimateDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.HoldDuration,srt=o.AutoStart,z0=0;
for (var z0=0;z0<clds.length;z0++){
clds[z0].style.position='absolute';
clds[z0].style.zIndex=z0>0?'0':'2';
clds[z0].style.left='0px';
clds[z0].style.top='0px';
}
var obj=zxcDoors['zxc'+id]={
id:id,
sz:clds[0].height,
clds:clds,
lgth:clds.length-1,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*2,
cnt:0,
ud:1
}
if (o.AddEvents!==false){
this.addevt(p,'mouseover','Pause',id);
this.addevt(p,'mouseout','Auto',id);
}
if (typeof(srt)=='number'){
this.Auto(id,srt);
}
},
GoTo:function(id,nu){
var o=zxcDoors['zxc'+id];
if (o&&o.clds[nu]){
this.open(o,nu,false);
}
},
Auto:function(id,ms){
var o=zxcDoors['zxc'+id];
if (o){
var oop=this;
o.to=setTimeout(function(){ oop.open(o,o.cnt+o.ud,true); },ms||200);
}
},
Pause:function(id){
var o=zxcDoors['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},
open:function(o,nu,auto){
this.Pause(o.id);
var img=o.clds[o.cnt];
nu=nu<0?o.lgth:nu>o.lgth?0:nu;
o.auto=auto==true;
o.clds[nu].style.height=o.sz;
o.clds[nu].style.zIndex='1';
img.style.zIndex='2';
clearTimeout(o['to'+o.cnt]);
this.animate(o,img,img.height,0,new Date(),o.ms*Math.abs(img.height/o.sz),'to'+o.cnt);
o.cnt=nu;
},
animate:function(o,img,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
now=Math.max(now,f<0||t<0?now:0);
img.style.height=now+'px';
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,img,f,t,srt,mS,to); },10);
}
else {
img.style.zIndex='0';
if (o.auto){
oop.Auto(o.id,o.hold);
}
}
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
}
}
zxcDoors.init({
ID:'doors', // the unique Id name of the parent node. (string)
AnimateDuration:1000, //(optional) the animation duration in milli seconds. (number, default = 1000)
HoldDuration:2000, //(optional) the auto rotate 'hold' duration in milli seconds. (number, default = AnimateDuration*2)
AutoStart:2000, //(optional) the auto rotate auto start duration in milli seconds. (number, default = no auto start)
AddEvents:true //(optional) true = add mouseover pause and mouseout Auto, false = do not add events. (boolean. default = true)
});
/*]]>*/
</script>
</body>
</html>