var MAX_BOXES = 15;
var MAX_CREATE_PER_INTERVAL = 1;
var MAX_LONG_LENGTH = 80;
var MIN_LONG_LENGTH = 10;
var MAX_SHORT_LENGTH = 4;
var MIN_SHORT_LENGTH = 1;
var START_MIN = 50;
var START_MAX = 150;
var SPEED_MAX = 100;
var SPEED_MIN = 15;
var FADE_IN_SPEED = 0.07;
var MAX_OPACITY = 0.5;
var MAX_LIFETIME = 15;
var MIN_LIFETIME = 0;
var INTERVAL_RATE = 80;

function getRandomInteger(max, min) {
  min = min || 0;
  return Math.floor(Math.random() * (1 + max - min)) + min;
}

BoxBox = Class.create({
  initialize: function(container) {
    this.vertical = getRandomInteger(1);
    this.postive = getRandomInteger(1);
    var el = document.createElement('div');
    el.className = 'box-box';
    var longSide = getRandomInteger(MAX_LONG_LENGTH, MIN_LONG_LENGTH);
    var shortSide = getRandomInteger(MAX_SHORT_LENGTH, MIN_SHORT_LENGTH);
    if (this.vertical) {
      el.style.width = shortSide + 'px';
      el.style.height = longSide + 'px';
    } else {
      el.style.width = longSide + 'px';
      el.style.height = shortSide + 'px';
    }
    el.style.backgroundColor = 'rgb(' + getRandomInteger(255, 128) + ','
      + getRandomInteger(255, 128) + ',' + getRandomInteger(255, 128) + ')';
    this.x = parseFloat(getRandomInteger(START_MAX, START_MIN));
    this.y = parseFloat(getRandomInteger(START_MAX, START_MIN));
    this.speed = parseFloat(getRandomInteger(SPEED_MAX, SPEED_MIN)) / 10.0;
    this.lifetime = getRandomInteger(MAX_LIFETIME, MIN_LIFETIME);
    this.el = el;
    this.opacity = 0.0;
    this.state = 0;
    this.advance();
    this.container = container || document.body;
    this.container.appendChild(el);
  },
  advance: function() {
    if (this.vertical) {
      this.y += this.speed;
    } else {
      this.x += this.speed;
    }
    if (this.state == 0) {
      if (this.opacity < MAX_OPACITY) {
        this.opacity += FADE_IN_SPEED;
        if (this.opacity >= MAX_OPACITY) {
          this.opacity = MAX_OPACITY;
          this.state = 1;
        }
        this.el.setOpacity(this.opacity);
      }
    } else if (this.state == 1) {
      this.lifetime -= 1;
      if (this.lifetime < 0) {
        this.state = 2;
      }
    } else if (this.state == 2) {
      if (this.opacity > 0) {
        this.opacity -= FADE_IN_SPEED;
        if (this.opacity < 0) {
          this.remove();
          return false;
        }
        this.el.setOpacity(this.opacity);
      }
    }
    this.el.style.top = parseInt(this.y) + 'px';
    this.el.style.right = parseInt(this.x) + 'px';
    return true;
  },
  remove: function() {
    this.container.removeChild(this.el);
  }
});

function animateBoxBoxes() {
  var box_container = $('box-container');
  var box_container = document.body;
  var boxes = new Array(MAX_BOXES);

  setInterval(function() {
    var created = 0;
    for (var i = 0; i < boxes.length; i++) {
      var box = boxes[i];
      if (box) {
        if (!box.advance()) {
          delete(boxes[i]);
          boxes[i] = new BoxBox(box_container);
        }
      } else if (created < MAX_CREATE_PER_INTERVAL) {
        boxes[i] = new BoxBox(box_container);
        created += 1;
      }
    }
  }, INTERVAL_RATE);
}

animateBoxBoxes();