var bubbles = new Array();
var canvas = null;
var context = null;
var w = 940;
var h = 159;

//Starts the animation when the page is loaded.
window.onload = function(){

    //Retrieves the canvas and creates a context.
    canvas = document.getElementById("seacanvas");
    context = canvas.getContext("2d");

    //Creates 20 new bubbles.
    for(var i = 0; i < 15; i++){
        var bubble = new Object;
        bubble.height = 6 + Math.ceil(Math.random()*3) * 3;
		bubble.size = bubble.height-2;
		bubble.increasing = true;

        //The starting position is randomized.
        bubble.x = Math.floor(Math.random()*(w-2*bubble.size))+bubble.size;
        bubble.y = Math.floor(Math.random()*(h-2*bubble.size))+bubble.size;

        //The direction and speed is randomized.
        bubble.dirX = 0.2 + Math.random()*0.7;
        bubble.dirY = 0.2 + Math.random()*0.7;

        //Creates an array for each color and an array for each color changing speed.
        bubble.colorValue = new Array();
        bubble.colorDir = new Array();
        bubble.colorValue[1] = Math.floor(Math.random()*10)+50;
        bubble.colorValue[2] = Math.floor(Math.random()*10)+50;
        bubble.colorValue[3] = Math.floor(Math.random()*10)+50;
        bubble.colorDir[1] = Math.ceil(Math.random()*2);
        bubble.colorDir[2] = Math.ceil(Math.random()*2);
        bubble.colorDir[3] = Math.ceil(Math.random()*2);

        //A function that generated the output for the color.
        bubble.toColor = function(){
            return this.colorValue[1]+","+this.colorValue[2]+","+this.colorValue[3];
        }

        //A function that changes each color according to their speed. When it reaches max, it reverts the direction.
        bubble.changeColor = function(){
            for(var c = 1; c <= 3; c++){
                this.colorValue[c] += this.colorDir[c];
                if(this.colorValue[c] >= 200 || this.colorValue[c] <= 50){
                    this.colorDir[c] = -(this.colorDir[c]);
                }
            }
        }

        //This function moves the bubbles, and it works the same way as the color changing function.
        bubble.move = function(){
            this.x += this.dirX;
            this.y += this.dirY;
            if(this.x <= this.size || this.x >= w-this.size){this.dirX = -(this.dirX);}
            //if(this.y <= this.size || this.y >= h-this.size){this.dirY = -(this.dirY);}
			if(this.y <= this.size){this.y=h-this.size;}
			else if(this.y >= h-this.size){this.dirY = -(this.dirY);}
			
			if (this.increasing && this.size > this.height) {
				this.increasing=false;
			}
			if (!this.increasing && this.size < this.height-2) {
				this.increasing=true;
			}
	 
			if (this.increasing) {
				this.size+=0.1;
			}
			else {	
				this.size-=0.1;
			}			
        }

        //Add the new bubble to the array.
        bubbles.push(bubble);
    }

    //Starts the animation, runs animate() with 33 milliseconds interval (~30 FPS) if possible.
    window.setInterval("animate()", 33);
}

function animate(){
    context.save();

	/*var lingrad = context.createLinearGradient(0,0,w,h);
    lingrad.addColorStop(0, '#FFF');
    lingrad.addColorStop(1, '#000');
	context.fillStyle = lingrad;*/

    //Fills the canvas
    context.fillStyle = "#ddeef2";
//    context.fillStyle = "#fff";
	
    context.fillRect(0, 0, w, h);

	context.beginPath();
    context.moveTo(0,0);
    context.lineTo(w,0);
    context.closePath();
	context.lineWidth = 2;
    context.strokeStyle = "#c9dfe4";	
    context.stroke();	

    //For each bubble, change the color, move it and call the function to draw it.
    for(var i = 0; i < bubbles.length; i++){
        bubbles[i].changeColor();
        bubbles[i].move();
        //draw_circle(context, bubbles[i].x, bubbles[i].y, bubbles[i].size, "rgba("+bubbles[i].toColor()+",0.10)", "rgba("+bubbles[i].toColor()+",0.13)");
		draw_bubble(context, bubbles[i].x, bubbles[i].y, bubbles[i].size, bubbles[i].height, "rgba("+bubbles[i].toColor()+",0.10)", "rgba("+bubbles[i].toColor()+",0.11)");
    }

    context.restore();
}

/*function draw_circle(context, x, y, w, color, border){
    context.save();

    //Set the bubble's fill color to the selected color.
    context.fillStyle = color;

    //Set the bubble's border width to 2px.
    context.lineWidth = 2;

    //Begin a path, draw a full circle, close the path.
    context.beginPath();
    context.arc(x, y, w, 0, Math.PI*2, true);
    context.closePath();

    //Fill the bubble with the selected color.
    context.fill();

    //If a border is set, then draw it around the bubble.
    if(border!=""){
        context.strokeStyle = border;
        context.stroke();
    }
}*/

function draw_bubble(context, x, y, width, height, color, border) {
	/*var width = bubble.width;
	var volume = bubble.volume;
	var centerPoint = bubble.centerPoint;
 
	var height = volume / width;*/
 
	var halfWidth = width*0.5;
	var halfHeight = height*0.5;
 
	//*context.strokeStyle="#002DAF"; //  line color
	//context.fillStyle="#D7FBFF"; 
	
    context.fillStyle = color;
    if(border!=""){
        context.strokeStyle = border;
        context.stroke();
    }	
 
	context.lineWidth=2; // line width
	context.beginPath();
	context.moveTo(x,y - halfHeight); 
	context.quadraticCurveTo(x-halfWidth,
		y-halfHeight,x-halfWidth,
		y); // top left curve	 
	context.quadraticCurveTo(x-halfWidth,
		y+halfHeight,x,
		y+halfHeight); // bottom left curve 	   
	context.quadraticCurveTo(x+halfWidth,
		y+halfHeight,x+halfWidth,
		y); // bottom right curve 
	context.quadraticCurveTo(x+halfWidth,
		y-halfHeight,x,
		y-halfHeight); // bottom right curve 	   
 
	context.closePath();
	context.stroke();
	context.fill();
}