var Circles = new Object();



window.onload = function() {
	directions = new Array(1,-1);
	circleNumber = 70;
	circleID = 1;
	anzahl = 7;
	zahl = 0;
	// Initialize the circles
	for(i=1; i<=circleNumber; i++){
		zahl ++;
		if(zahl > anzahl){
			zahl = 1;
		}
		Circles["pic"+i] = new Circle(
			"pic" + zahl,
			"pic" + i, 
			Math.random()*window.innerWidth-106, 
			Math.random()*window.innerHeight-106,
		 	4 + Math.random()*6,
		 	4 + Math.random()*6,
		 	directions[Math.floor(Math.random()*2)],
		 	directions[Math.floor(Math.random()*2)]
		);
		Circles["pic"+i].init();
	}
	setInterval(moveThem, 40);
}

function moveThem() {
	for(i=1; i<=circleNumber; i++){
		Circles["pic"+i].move();
	}
}

function Circle(farbe, objekt, xpos, ypos, speedX, speedY, directionX, directionY) {
	bremsRaum = 150;
	this.xpos = xpos;
	this.ypos = ypos;
	this.farbe = farbe;
	this.objekt = objekt;
	this.speedX = this.firstSpeedX = speedX;
	this.speedY = this.firstSpeedY = speedY;
	this.directionX = directionX;
	this.directionY = directionY;
	this.actWidth = this.actHeight = 5+Math.random()*10;
	this.move = function() {
		this.xpos += (this.speedX * this.directionX);
		this.ypos += (this.speedY * this.directionY);
		Circles[objekt].htmlObject.style.left = this.xpos + "px";
		Circles[objekt].htmlObject.style.top = this.ypos + "px";
		//
		// EASING /////////////////////////////////////////////////////
		// easing right
		this.distRight = Math.abs(window.innerWidth-(this.xpos + this.actWidth));
		if (this.distRight < bremsRaum) {
			this.speedX = this.firstSpeedX * this.distRight / bremsRaum;
		}
		// easing left
		this.distLeft = Math.abs(0-(this.xpos));
		if (this.distLeft < bremsRaum) {
			this.speedX = this.firstSpeedX * this.distLeft / bremsRaum;
		}
		// easing top
		this.distTop = Math.abs(0-(this.ypos));
		if (this.distTop < bremsRaum) {
			this.speedY = this.firstSpeedY * this.distTop / bremsRaum;
		}
		// easing bottom
		this.distBottom = Math.abs(window.innerHeight-(this.ypos + this.actHeight));
		if (this.distBottom < bremsRaum) {
			this.speedY = this.firstSpeedY * this.distBottom / bremsRaum;
		}
		//
		// REVERSING /////////////////////////////////////////////////////
		// reverse right
		if (this.xpos > window.innerWidth - this.actWidth-2) {
			this.xpos = window.innerWidth - this.actWidth-3;
			this.directionX = -this.directionX;
		}
		// reverse left
		if (this.xpos <= 3) {
			this.xpos = 4;
			this.directionX = -this.directionX;
		}
		// reverse top
		if (this.ypos <= 3) {
			this.ypos = 4;
			this.directionY = -this.directionY;
		}
		// reverse bottom
		if (this.ypos > window.innerHeight - this.actHeight-2) {
			this.ypos = window.innerHeight - this.actHeight-3;
			this.directionY = -this.directionY;
		}
	}
}


Circle.prototype.init = function() {
	this.htmlObject = document.createElement("img");
	this.htmlObject.setAttribute("src", this.farbe + ".png");
	this.htmlObject.setAttribute("id", this.farbe);
	this.htmlObject.width = this.actWidth;
	this.htmlObject.height = this.actHeight;
	this.htmlObject.style.position = "absolute";
	this.htmlObject.style.left = this.xpos + "px";
	this.htmlObject.style.top = this.ypos + "px";
	document.body.appendChild(this.htmlObject);
}