var svgDocument;

function startup(evt){
	svgDocument = document.getElementById('bubblesSVG').contentDocument;
	window.setInterval("animate()", 100);
}

function Bubble() {
	this.left = 0;
	this.top = 0;
	this.width = 0;
	this.height = 0;
	this.maxwidth = 0;
	this.maxheight = 0;
	this.maxleft = 0;
	this.maxtop = 0;
	this.minwidth = 0;
	this.minheight = 0;
	this.minleft = 0;
	this.mintop = 0;
	this.widthstep = 0;
	this.heightstep = 0;
	this.leftstep = 0;
	this.topstep = 0;
}

var Bubbles = [];

// First Bubble
Bubbles[0] = new Bubble;
Bubbles[0].left = 2;
Bubbles[0].top = 7;
Bubbles[0].width = 10;
Bubbles[0].height = 30;
Bubbles[0].maxwidth = 12;
Bubbles[0].maxheight = 30;
Bubbles[0].maxleft = 15;
Bubbles[0].maxtop = 85;
Bubbles[0].minwidth = 4;
Bubbles[0].minheight = 8;
Bubbles[0].minleft = 2;
Bubbles[0].mintop = 7;
Bubbles[0].widthstep = 0.08;
Bubbles[0].heightstep = 0.06;
Bubbles[0].leftstep = 0.06;
Bubbles[0].topstep = 0.3;

// Second Bubble
Bubbles[1] = new Bubble;
Bubbles[1].left = 2;
Bubbles[1].top = 7;
Bubbles[1].width = 14;
Bubbles[1].height = 25;
Bubbles[1].maxwidth = 15;
Bubbles[1].maxheight = 25;
Bubbles[1].maxleft = 12;
Bubbles[1].maxtop = 63;
Bubbles[1].minwidth = 4;
Bubbles[1].minheight = 2;
Bubbles[1].minleft = 2;
Bubbles[1].mintop = 0;
Bubbles[1].widthstep = 0.1;
Bubbles[1].heightstep = 0.15;
Bubbles[1].leftstep = 0.04;
Bubbles[1].topstep = 0.08;

// Third Bubble
Bubbles[2] = new Bubble;
Bubbles[2].left = 4;
Bubbles[2].top = 65;
Bubbles[2].width = 4;
Bubbles[2].height = 5;
Bubbles[2].maxwidth = 7;
Bubbles[2].maxheight = 7;
Bubbles[2].maxleft = 14;
Bubbles[2].maxtop = 70;
Bubbles[2].minwidth = 3;
Bubbles[2].minheight = 2;
Bubbles[2].minleft = 4;
Bubbles[2].mintop = 19;
Bubbles[2].widthstep = 0.08;
Bubbles[2].heightstep = 0.10;
Bubbles[2].leftstep = 0.06;
Bubbles[2].topstep = -0.16;

// Fourth Bubble
Bubbles[3] = new Bubble;
Bubbles[3].left = 7;
Bubbles[3].top = 17;
Bubbles[3].width = 7;
Bubbles[3].height = 12;
Bubbles[3].maxwidth = 9;
Bubbles[3].maxheight = 13;
Bubbles[3].maxleft = 13;
Bubbles[3].maxtop = 60;
Bubbles[3].minwidth = 6;
Bubbles[3].minheight = 9;
Bubbles[3].minleft = 7;
Bubbles[3].mintop = 17;
Bubbles[3].widthstep = 0.06;
Bubbles[3].heightstep = 0.04;
Bubbles[3].leftstep = 0.1;
Bubbles[3].topstep = 0.13;

// Bubble 5
Bubbles[4] = new Bubble;
Bubbles[4].left = 97;
Bubbles[4].top = 65;
Bubbles[4].width = 8;
Bubbles[4].height = 25;
Bubbles[4].maxwidth = 11;
Bubbles[4].maxheight = 26;
Bubbles[4].maxleft = 97;
Bubbles[4].maxtop = 70;
Bubbles[4].minwidth = 4;
Bubbles[4].minheight = 8;
Bubbles[4].minleft = 85;
Bubbles[4].mintop = 7;
Bubbles[4].widthstep = 0.08;
Bubbles[4].heightstep = 0.06;
Bubbles[4].leftstep = -0.06;
Bubbles[4].topstep = -0.12;

// Bubble 6
Bubbles[5] = new Bubble;
Bubbles[5].left = 94;
Bubbles[5].top = 66;
Bubbles[5].width = 8;
Bubbles[5].height = 14;
Bubbles[5].maxwidth = 10;
Bubbles[5].maxheight = 17;
Bubbles[5].maxleft = 96;
Bubbles[5].maxtop = 67;
Bubbles[5].minwidth = 4;
Bubbles[5].minheight = 8;
Bubbles[5].minleft = 87;
Bubbles[5].mintop = 7;
Bubbles[5].widthstep = 0.12;
Bubbles[5].heightstep = 0.04;
Bubbles[5].leftstep = -0.15;
Bubbles[5].topstep = -0.04;

// Bubble 7
Bubbles[6] = new Bubble;
Bubbles[6].left = 90;
Bubbles[6].top = 50;
Bubbles[6].width = 5;
Bubbles[6].height = 20;
Bubbles[6].maxwidth = 10;
Bubbles[6].maxheight = 21;
Bubbles[6].maxleft = 95;
Bubbles[6].maxtop = 67;
Bubbles[6].minwidth = 4;
Bubbles[6].minheight = 8;
Bubbles[6].minleft = 86;
Bubbles[6].mintop = 7;
Bubbles[6].widthstep = 0.12;
Bubbles[6].heightstep = 0.08;
Bubbles[6].leftstep = -0.07;
Bubbles[6].topstep = -0.06;

// Bubble 8
Bubbles[7] = new Bubble;
Bubbles[7].left = 90;
Bubbles[7].top = 50;
Bubbles[7].width = 4;
Bubbles[7].height = 6;
Bubbles[7].maxwidth = 6;
Bubbles[7].maxheight = 7;
Bubbles[7].maxleft = 95;
Bubbles[7].maxtop = 67;
Bubbles[7].minwidth = 3;
Bubbles[7].minheight = 5;
Bubbles[7].minleft = 88;
Bubbles[7].mintop = 7;
Bubbles[7].widthstep = 0.10;
Bubbles[7].heightstep = 0.06;
Bubbles[7].leftstep = -0.05;
Bubbles[7].topstep = -0.09;

var TotalBubbles = Bubbles.length;

function animate(){
	if (window.innerWidth || window.innerHeight){
		docwidth = window.innerWidth;
		docheight = window.innerHeight;
	} else if (document.body.clientWidth || document.body.clientHeight){
		docwidth = document.body.clientWidth;
		docheight = document.body.clientHeight;
	} else {
		docwidth = 800;
		docheight = 600;
	}

	anX = (docwidth / 100);
	anY = (docheight / 100);

	for (i = 0; i < TotalBubbles; i++) {
		Bubbles[i].left += Bubbles[i].leftstep;
		Bubbles[i].top += Bubbles[i].topstep;
		Bubbles[i].width += Bubbles[i].widthstep;
		Bubbles[i].height += Bubbles[i].heightstep;

		if (Bubbles[i].left > Bubbles[i].maxleft) {
			Bubbles[i].left = Bubbles[i].maxleft;
			Bubbles[i].leftstep = -Bubbles[i].leftstep;
		} else if (Bubbles[i].left < Bubbles[i].minleft) {
			Bubbles[i].left = Bubbles[i].minleft;
			Bubbles[i].leftstep = -Bubbles[i].leftstep;
		}

		if (Bubbles[i].top > Bubbles[i].maxtop) {
			Bubbles[i].top = Bubbles[i].maxtop;
			Bubbles[i].topstep = -Bubbles[i].topstep;
		} else if (Bubbles[i].top < Bubbles[i].mintop) {
			Bubbles[i].top = Bubbles[i].mintop;
			Bubbles[i].topstep = -Bubbles[i].topstep;
		}

		if (Bubbles[i].width > Bubbles[i].maxwidth) {
			Bubbles[i].width = Bubbles[i].maxwidth;
			Bubbles[i].widthstep = -Bubbles[i].widthstep;
		} else if (Bubbles[i].width < Bubbles[i].minwidth) {
			Bubbles[i].width = Bubbles[i].minwidth;
			Bubbles[i].widthstep = -Bubbles[i].widthstep;
		}

		if (Bubbles[i].height > Bubbles[i].maxheight) {
			Bubbles[i].height = Bubbles[i].maxheight;
			Bubbles[i].heightstep = -Bubbles[i].heightstep;
		} else if (Bubbles[i].height < Bubbles[i].minheight) {
			Bubbles[i].height = Bubbles[i].minheight;
			Bubbles[i].heightstep = -Bubbles[i].heightstep;
		}

		var Q = svgDocument.getElementById('b' + (i+1));
		Q.setAttribute("cx", Bubbles[i].left * anX);
		Q.setAttribute("cy", Bubbles[i].top * anY);
		Q.setAttribute("rx", Bubbles[i].width * anX);
		Q.setAttribute("ry", Bubbles[i].height * anY);
	}
}