var bubbleCount = 15;
var speed = 4;
var bubbleImages = new Array();
var bubbleWidth = new Array();
var willRun = (document.getElementById != undefined) ? 1 : 0;
var bubbleZoneWidth = 800;
var bubbleZoneHeight = 1800;
var dx = new Array();
var xPosition = new Array();
var yPosition = new Array();
var amplitude = new Array();
var xStep = new Array();
var yStep = new Array();
var imageLocation = bubbleImageLocation;

if (willRun) {
    bubbleZoneWidth = document.getElementById(bubbleZoneId).offsetWidth;
    bubbleZoneHeight = document.getElementById(bubbleZoneId).offsetHeight;
    StartBubbles();
}

function StartBubbles() {
    bubbleImages[0] = imageLocation + "bubble1.png";
    bubbleWidth[0] = 8;
    bubbleImages[1] = imageLocation + "bubble2.png";
    bubbleWidth[1] = 16;
    bubbleImages[2] = imageLocation + "bubble3.png";
    bubbleWidth[2] = 24;

    var needFilters = false;
    if (navigator.appVersion.indexOf('MSIE') >= 0) {
        var arVersion = navigator.appVersion.split("MSIE");
        var version = parseFloat(arVersion[1]);
        if ((version >= 5.5) && (version < 7) && (document.body.filters)) {
            needFilters = true;
        }
    }

    for (var index = 0; index < bubbleCount; index++) {
        dx[index] = 0;                                          // set coordinate variables
        xPosition[index] = Math.random() * bubbleZoneWidth;     // set position variables
        yPosition[index] = bubbleZoneHeight + (150 * Math.random());
        amplitude[index] = Math.random() * 10;                  // set amplitude variables
        xStep[index] = 0.02 + Math.random() / 10;               // set step variables
        yStep[index] = 2.0 + Math.random() / 4;                 // set step variables
        var bubbleImage = document.createElement("img");
        bubbleImage.id = "bubble_" + index.toString();
        bubbleImage.className = "bubble";
        bubbleImage.alt = "";
        bubbleImage.title = "";
        bubbleImage.style.width = bubbleWidth[index % bubbleImages.length].toString() + "px";
        bubbleImage.style.height = bubbleWidth[index % bubbleImages.length].toString() + "px";
        if (needFilters) {
            bubbleImage.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImages[index % bubbleImages.length] + "', sizingMethod='scale')";
            bubbleImage.src = imageLocation + 'spacer.gif';
        }
        else {
            bubbleImage.src = bubbleImages[index % bubbleImages.length];
        }
        bubbleImage.border = 0;
        document.getElementById(bubbleZoneId).appendChild(bubbleImage);
    }

    AnimateBubbles();
}

function AnimateBubbles() {
    for (var index = 0; index < bubbleCount; index++) {
        yPosition[index] -= yStep[index];
        if (yPosition[index] < -50) {
            xPosition[index] = Math.random() * bubbleZoneWidth;       // set position variables
            yPosition[index] = bubbleZoneHeight + 50;
            xStep[index] = 0.02 + Math.random() / 10;
            yStep[index] = 0.7 + Math.random();
        }
        dx[index] += xStep[index];
        var bubbleX = Math.floor(xPosition[index] + amplitude[index] * Math.sin(dx[index]));
        var bubbleY = Math.floor(yPosition[index]);
        document.getElementById("bubble_" + index.toString()).style.left = bubbleX.toString() + 'px';
        document.getElementById("bubble_" + index.toString()).style.top = bubbleY.toString() + 'px';
    }
    // continue bubbling
    setTimeout("AnimateBubbles();", speed);
}