/****************************************************************
"bretteleben.de JavaScript Lakescript" - Version 20081207
License: http://www.gnu.org/copyleft/gpl.html
Author: Andreas Berger
Copyright (c) 2008 Andreas Berger - andreas_berger@bretteleben.de
Project page and Demo at http://www.bretteleben.de
Last update: 2008-12-07
*****************************************************************/
//*****parameters to set*****
var divid="lake"; //the id of the div container that will hold the lakescript
var imagea='image.jpg'; //the path to your image
var pwidth=250; //the width of the image to be shown
var pheight=188; //the height of the image to be shown
var wavetop=80; //the distance for the waves to start from the top of the image
var wavebot=170; //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;
var 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;
var 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);
var underlay=0; //change this to the path of your second (underwater)-pic, if used
//or to 'underlay=0;' otherwise
var overlay='0'; //change this to the path of your overlay-pic, if used
//or to 'overlay=0;' otherwise
var uwidth=pwidth; //the width of the underlay to be shown, by default set to the width of the first pic
var uheight=wavebot-wavetop; //the height of the underlay to be shown, by default set to the height of the waves
var steps=45; //the number of slices (each one pixel high) to display one wave (set by range)
var range=3; //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
var tim=150; //the timeout between to transits of the script, setting it to low may cause stack-overflow-errors;
var 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: undulate!
//*****nothing more to do, have fun :)
//**************************************************************************************
var slices=wavebot-wavetop;var idnum=0;var nnmoz=1;var tp;var a;var i;var revfac;var reflheight;var reflmosttop;var clipwidth;var reversetop;var m;
if(reverse){
revfac=slices/wavetop;reflheight=pheight*revfac;reflmosttop=wavetop-slices;clipwidth=pwidth-range*2;
tp="
";
if(underlay){tp+="
";}
tp+="
";
for (i=1; i<=steps; i+=1) {
tp+="
";
for (a=i; a<=slices; a+=steps) {reversetop=slices*2-a*2+(1*1);idnum+=1;tp+="
";}
tp+="
";
}
if(overlay){tp+="";}
tp+="
";
}
if(!reverse){nnmoz=0;
tp="
";
tp+="
";
for (i=1; i<=steps; i+=1) {
tp+="
";
for (a=i; a<=slices; a+=steps) {tp+="
";}
tp+="
";
}
if(overlay){tp+="";}
tp+="
";
}
function $(obj){return document.getElementById(obj);}
function shownow() {$(divid).style.position="absolute";$(divid).innerHTML=tp;}
var wave=new Array();var waveB=Math.PI*2/(steps-1);var b=1;
for(a=1; a<=steps; a++){wave[wave.length]=Math.sin(waveB*a)*range;}
function firstmove(){
if(b<=steps){$('slicenum'+b).style.left=Math.ceil(wave[b-1])+"px";b+=1;firstmove();}
else{b=1;wave=wave.slice(1,wave.length);wave[wave.length]=wave[0];setTimeout('firstmove()',tim);}
}
function domoz(){for(m=1; m<=slices; m+=1){$('picnum'+m).style.MozOpacity=opaz/100;$('picnum'+m).style.opacity=opaz/100;$('picnum'+m).style.filter="alpha(opacity="+opaz+")";}}
function start1(){shownow();domoz();firstmove();}
function start2(){shownow();domoz();}
function start3(){shownow();firstmove();}
if(autostart&&nnmoz){onload=start1;}if(!autostart&&nnmoz){onload=start2;}if(autostart&&!nnmoz){onload=start3;}