//Bubble Script by Lisa (issa@lissaexplains.com, http://lissaexplains.com)
//Based on code by Altan d.o.o. (bubbles@altan.hr)
// 2010-10-10	modified by keyboarder@tglinux.de
var no = 17; // image number or falling rate
var speed = 14; // the lower the number the faster the image moves
var bubbles = new Array();

// tgl-edit: created own bubbles with gimp
bubbles[0] = "./design/images/bubble-tiny.png"
bubbles[1] = "./design/images/bubble7.png"
bubbles[2] = "./design/images/bubble9.png"
bubbles[3] = "./design/images/bubble11.png"
bubbles[4] = "./design/images/bubble15.png"
bubbles[5] = "./design/images/bubble9.png"
bubbles[6] = "./design/images/gnu-bubble30.png"
bubbles[7] = "./design/images/bubble4.png"
bubbles[8] = "./design/images/bubble7.png"
bubbles[9] = "./design/images/bubble15.png"
bubbles[10] = "./design/images/bubble4r.png"
bubbles[11] = "./design/images/bubble7r.png"
bubbles[12] = "./design/images/bubble9r.png"
bubbles[13] = "./design/images/bubble11r.png"

var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables

// tgl-edit: fixed width
var i, doc_width = 175, doc_height = 600;

if (ns4up||ns6up) {
// tgl-edit: doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
// tgl-edit: doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
// tgl-edit: to become conform - declare variable first
var j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-25); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*14; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random()+142; // set step variables
/* tgl-edit: some corrections to get valid css
	<img src="" alt="" border="">	
	<div id="" style="position: absolute; z-index: 5; top: 0em; left: 0em; visibility: visible;">	
	NOTE:	wie use a fixed z-index of '5' here; the values of all other elements defined in 'design-screen.css'
*/
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" right=\"0em\" top=\"0em\" visibility=\"show\"><img src=\""+ bubbles[j] + "\" border=\"0\"><\/layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" right=\"0.313em;\" bottom=\"14.625em\" visibility=\"show\"><img src=\""+ bubbles[j] + "\" border=\"0\"><\/layer>");
} } else if (ie4up||ns6up) { if (i == 0) 
{
document.write("<div id=\"dot"+ i +"\" style=\"position: absolute; z-index: 5; bottom: 1.0em; margin-right: 2em; visibility: visible;\"><img src=\"" + bubbles[j] + "\" alt=\"water bubble png\" border=\"0\"><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"position: absolute; z-index: 5; bottom: 14.625em; margin-right: 2em; visibility: visible;\"><img src=\"" + bubbles[j] + "\" alt=\"water bubble png\" border=\"0\"><\/div>");
}
}
if (j == (bubbles.length-1)) { j = 0; } else { j += 1; }
}
// Netscape main animation function
function bubbleNS() {
// iterate for every dot
for (i = 0; i < no; ++ i) {
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.9 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i] + pageYOffset;
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("bubbleNS()", speed);
}
// IE main animation function
function bubbleIE_NS6() {
// iterate for every dot
for (i = 0; i < no; ++ i) {
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/100;
sty[i] = 0.7 + Math.random();
// tgl-edit: doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight:document.body.clientHeight;
}
dx[i] += stx[i];

if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
/* tgl-edit: to become conform towards 'strict DTD' append the unit 'px'
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
*/
document.getElementById("dot"+i).style.top = yp[i] + pageYOffset + "px";
document.getElementById("dot"+i).style.right=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
}
setTimeout("bubbleIE_NS6()", speed);
}

if (ns4up) {
bubbleNS();
} else if (ie4up||ns6up) {
bubbleIE_NS6();
}