/***************************************************************************************
Copyright (C) 2001 ab_ditto
This script is made by and copyrighted to ab_ditto at back.to/ab or ab_ditto@hotmail.com
The script is free for non-commercial use as long as this msg is intact!
v.1.1 2001-10-21
***************************************************************************************/
//*****parameters to set*****
ptop=0; //the top position of the image to appear on your page in pixel
pleft=0; //the left position of the image to appear on your page in pixel
imagea='wastewater-filtration.jpg'; //the path to your image
pwidth=198; //the width of the image to be shown
pheight=182; //the height of the image to be shown
wavetop=110; //the distance for the waves to start from the top of the image
wavebot=pheight; //usually you can leave this at the given value. it marks the point the waves end.
//with reverse set to '0':
//if you want only a stripe to be rippled, set this to any number between wavetop and pheight;
//with reverse set to '1':
//it controlles the entire height of the rippled part. you may set it lower or heigher, just try out;
reverse=0;
//reverse set to '0' ripples the part of the pics, the waves are on;
//reverse set to '1' reflects&ripples the part above the waves;
opaz=100; //with reverse set to '1' you have the possibility to use a second pic to shimmer
//trough the waves; to achieve this effect, you can add transparency to the displayed reflections
//the value may be changed from 100(opac) to 0(transparent);
nnmoz=0;//notice: switching nnmoz from 0 to 1 turns on transparency for NetscapeNavigator6 too;
underlay=0; //change this to the path of your second (underwater)-pic, if used
//or to 'underlay=0;' otherwise
uwidth=pwidth; //the width of the underlay to be shown, by default set to the width of the first pic
uheight=wavebot-wavetop; //the height of the underlay to be shown, by default set to the height of the waves
steps=23; //the number of slices (each one pixel high) to display one wave (set by range)
range=5; //the amount of pixels for one wave (range10 means 10 to the left, 10 to the right)
//please notice, that with reverse set to 1 the pic is clipped at both side by the length of 1 range
//automatically to avoid the underlay/background to be seen
tim=5; //the timeout between to transits of the script, setting it to low may cause stack-overflow-errors;
autostart=1; //set to 1 starts the script onload, set to 0 you have the possibility to start the
//script by link from your page; sample-link: <a href="javascript:firstmove()">undulate!</a>
//**************************************************************************************
//if you want to use a pic as overlay, just include it into an absolute positioned div in the body of
//your page. make sure, that the z-index is set at least to 4 because parts of the script use index-3;
//sample-overlay:<div id='overlay' style="position:absolute; top:50px; left:50px; width:600px; height:450px; z-index:10;"><IMG src='yourOverlay-pic' width='600px' height='450px'></div>
//adjust to your needs;
//*****nothing more to do, have fun :) if you have any questions, mail me or use my guestbook;
//**************************************************************************************
slices=wavebot-wavetop;idnum=0;
if(reverse){
revfac=slices/wavetop;reflheight=pheight*revfac;reflmosttop=wavetop-slices;clipwidth=pwidth-range*2;
document.write("<div id='base' style=\"position:absolute; top:"+ptop+"px; left:"+pleft+"px; width:"+pwidth+"px; height:"+wavetop+"px; clip:rect(0,"+clipwidth+"px,"+wavetop+"px,"+range+"px); z-index:1;\"><IMG src='"+imagea+"' width='"+pwidth+"px' height='"+pheight+"px'></div>");
if(underlay){backgrtop=ptop+(wavetop*1);
document.write("<div id='thewater' style=\"position:absolute; top:"+backgrtop+"px; left:"+pleft+"px; width:"+uwidth+"px; height:"+uheight+"px; clip:rect(0,"+clipwidth+"px,"+slices+"px,"+range+"px); z-index:2;\"><IMG src='"+underlay+"' width='"+uwidth+"px' height='"+uheight+"px'></div>");
}
document.write("<div id='reflect' style=\"position:absolute; top:"+reflmosttop+"px; left:"+pleft+"px; width:"+pwidth+"px; height:"+pheight*2+"px; clip:rect(0,"+clipwidth+"px,"+pheight*2+"px,"+range+"px); z-index:3; overflow:hidden;\">");
	for (i=1; i<=steps; i+=1) {
document.write("<div id='slicenum"+i+"' style=\"position:absolute; top:0; left:0; width:"+pwidth+"px; height:"+pheight*2+"px; z-index:3;\">");
	for (a=i; a<=slices; a+=steps) {reversetop=slices*2+(ptop*1)-a*2+(1*1);c2=a;c1=c2-1;idnum+=1;
document.write("<div id='picnum"+idnum+"' style=\"position:absolute; top:"+reversetop+"; left:0; width:"+pwidth+"px; height:"+c2+"px; clip:rect("+c1+","+pwidth+"px,"+c2+",0); z-index:3; filter:'Alpha(Opacity="+opaz+")'; overflow:hidden;\"><IMG src='"+imagea+"' width='"+pwidth+"px' height='"+reflheight+"px'></div>");}
document.write("</div>");}
document.write("</div>");}

if(!reverse){nnmoz=0;
document.write("<div id='base' style=\"position:absolute; top:"+ptop+"px; left:"+pleft+"px; width:"+pwidth+"px; height:"+pheight+"px; clip:rect(0,"+pwidth+"px,"+pheight+"px,0); z-index:1;\"><IMG src='"+imagea+"' width='"+pwidth+"px' height='"+pheight+"px'></div>");
document.write("<div id='reflect' style=\"position:absolute; top:"+ptop+"px; left:"+pleft+"px; width:"+pwidth+"px; height:"+pheight+"px; clip:rect(0,"+pwidth+"px,"+pheight+"px,0); z-index:3; overflow:hidden;\">");
	for (i=1; i<=steps; i+=1) {
document.write("<div id='slicenum"+i+"' style=\"position:absolute; top:0; left:0; z-index:3;\">");
	for (a=i; a<=slices; a+=steps) {c2=wavetop+(a*1);c1=c2-1;
document.write("<div style=\"position:absolute; top:0; left:0; width:"+pwidth+"px; height:"+pheight+"px; clip:rect("+c1+","+pwidth+"px,"+c2+",0); z-index:3; overflow:hidden;\"><IMG src='"+imagea+"' width='"+pwidth+"px' height='"+pheight+"px'></div>");}
document.write("</div>");}
document.write("</div>");}

wave=new Array();waveB=Math.PI*2/(steps-1);b=1;
for(w=1; w<=steps; w++){wave[wave.length]=Math.sin(waveB*w)*range;}
function firstmove(){
	if(b<=steps){document.getElementById('slicenum'+b).style.left=wave[b-1];b+=1;firstmove();}
	else{b=1;takeout=wave[0];wave=wave.slice(1,wave.length);wave[wave.length]=takeout;setTimeout('firstmove()',tim);}}

function domoz(){for(m=1; m<=slices; m+=1){document.getElementById('picnum'+m).style.MozOpacity=opaz+'%';}}
function start1(){domoz();firstmove();}function start2(){domoz();}function start3(){firstmove();}
if(autostart&&nnmoz){onload=start1;}if(!autostart&&nnmoz){onload=start2;}if(autostart&&!nnmoz){onload=start3;}