var Circles = new Object();

window.onload = function() {
  Circles["blue"] = new Circle("blue", 120, 300, 10, 5, 1, 1);
  Circles["blue"].init();
  Circles["black"] = new Circle("black", 20, 75, 7, 9, -1, -1);
  Circles["black"].init();
  Circles["magenta"] = new Circle("magenta", 500, 405, 6, 5, -1, 1);
  Circles["magenta"].init();
  Circles["yellow"] = new Circle("yellow", 200, 200, 5, 10, 1, -1);
  Circles["yellow"].init();
  setInterval(moveThem, 20);
}

function moveThem() {
  Circles["magenta"].move();
  Circles["blue"].move();
  Circles["black"].move();
  Circles["yellow"].move();
}

function Circle(color, xpos, ypos, speedX, speedY, directionX, directionY) {
    bremsRaum = 150;
    this.xpos = xpos;
    this.ypos = ypos;
    this.color = color;
    this.speedX = this.firstSpeedX = speedX;
    this.speedY = this.firstSpeedY = speedY;
    this.directionX = directionX;
    this.directionY = directionY;
    this.move = function() {
        this.xpos += (this.speedX * this.directionX);
        this.ypos += (this.speedY * this.directionY);
        Circles[color].htmlObject.style.left = this.xpos + "px";
        Circles[color].htmlObject.style.top = this.ypos + "px";
        //
        // EASING /////////////////////////////////////////////////////
        // easing right
        this.distRight = Math.abs(window.innerWidth-(this.xpos + 106));
        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+106));
        if (this.distBottom < bremsRaum) {
            this.speedY = this.firstSpeedY * this.distBottom / bremsRaum;
        }
        //
        // REVERSING /////////////////////////////////////////////////////
        // reverse right
        if (this.xpos > window.innerWidth-109) {
            this.xpos = window.innerWidth-110;
            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-109) {
            this.ypos = window.innerHeight-110;
            this.directionY = -this.directionY;
        }
    }
}

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