var loop = {
  init: function() {
    loop.scene = new THREE.Scene();
    loop.W = window.innerWidth;
    loop.H = window.innerHeight;
    loop.camera = new THREE.PerspectiveCamera(45, loop.W / loop.H, 0.01, 1000);
    loop.renderer = new THREE.WebGLRenderer();
    loop.colors = [
      'E67E22', 'E27822', 'DF7223', 'DC6C24', 'D96725', 'D66125', 
      'D35B26', 'CF5527', 'CC5028', 'C94A28', 'C64429', 'C33E2A', 
      'C0392B'
    ];

    loop.renderer.setClearColor(0x17293a);
    loop.renderer.setSize(loop.W, loop.H);

    loop.group = new THREE.Object3D();

    document.body.appendChild(loop.renderer.domElement);

    loop.mainShapeGeometry = new THREE.BoxGeometry(50, 10, 10);
    loop.mainShapeMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF, wireframe: true});
    loop.mainShape = new THREE.Mesh(loop.mainShapeGeometry, loop.mainShapeMaterial);

    loop.mainShape.position.set(-2, 0, -25);
    //loop.group.add(loop.mainShape);

    loop.camera.position.set(0, 0, 100);
    loop.camera.lookAt(loop.scene.position);

    loop.generateBalls(50, 5);
    loop.renderFrame();

    loop.scene.add(loop.group);

  }, 
  balls: [],
  lines: [],
  generateLines: function() {
  },
  generateBalls: function(num, step) {
    var geometry, material, ball,
        lineGeometry, lineMaterial, line,
        colorCounter = 0;

    geometry = new THREE.SphereGeometry(.8, 15, 15);
    lineGeometry = new THREE.Geometry();
    lineMaterial = new THREE.LineBasicMaterial({color: 0xE67E22});

    for (x = loop.scene.position.x - num / 2; x <= loop.scene.position.x + num / 2; x += step) {
        material = new THREE.MeshBasicMaterial({color: '#' + loop.colors[colorCounter]});
        colorCounter++;
      if (colorCounter >= loop.colors.length) colorCounter = 0;
      for (z = loop.scene.position.z - num / 2; z <= loop.scene.position.z + num / 2; z += step) {
        lineGeometry.vertices.push(new THREE.Vector3(x, 0, z));
        line = new THREE.Line(lineGeometry, lineMaterial);
        loop.lines.push(line);
        loop.group.add(line);

        ball = new THREE.Mesh(geometry, material);
        ball.position.set(x, 0, z);
        ball.targetY = Math.random() * 30 - 15;
        loop.balls.push(ball);
        loop.group.add(ball);
      }
    }
  },
  animate: function(ts, rotSpeed) {
    var dz, dist, 
        ball, vy = 0, speed = .2;

    loop.mainShape.position.z = Math.sin(ts / 600) * 20;

    loop.group.rotation.y += rotSpeed;
    if (loop.group.rotation.y >= 1.25) rotSpeed *= -1;
    if (loop.group.rotation.y <= 0) rotSpeed *= -1;
 
    for (var i = 0, num = loop.balls.length; i < num; i++) {
      ball = loop.balls[i];
      line = loop.lines[i];
      dz = loop.mainShape.position.z - ball.position.z;
      dist = Math.sqrt(dz * dz);
      if (dist <= 3) {
        vy = (ball.targetY - ball.position.y) * speed;
      } else {
        vy = (0 - ball.position.y) * speed;
      }
      line.geometry.verticesNeedUpdate = true;
      line.geometry.vertices[i].y = ball.position.y;
      ball.position.y += vy;

    }
  },
  renderFrame: function(ts) {
    requestAnimationFrame(loop.renderFrame);
    loop.animate(ts, 0.005);
    loop.renderer.render(loop.scene, loop.camera);
  },
};

window.onload = loop.init;