var width = 256;
var height = 256;
var numballs = 6;
var zoom = 350;
var distance = 125;
var ballsizemult = 1;
var ballsize = 64;

var xangle = 0;
var yangle = 0;
var zangle = 0;
var coords;

function drawVectorBalls() {
  var results = new Array(numballs);

  for(var i = 0; i < numballs; i++) {
    var v = xyzproj(coords[i][0], coords[i][1], coords[i][2]);
    var r = new Array(4);
    r[0] = zoom * v[0] / (v[2] - distance) + width / 2 - ballsize / 2;
    r[1] = zoom * v[1] / (v[2] - distance) + height / 2 - ballsize / 2;
    r[2] = v[2];
    r[3] = i;
    results[i] = r;
  }

  results.sort(sortFunc);

  for(var i = 0; i < numballs; i++) {
    var ball = document.getElementById("vectorballs-" + i);
    ball.style.left = results[i][0] + "px";
    ball.style.top = results[i][1] + "px";
    ball.src = "img/vectorball" + results[i][3] + ".png";
    ball.style.width = "" + (ballsize + ballsizemult * results[i][2]) + "px";
    ball.style.height = "" + (ballsize + ballsizemult * results[i][2]) + "px";
  }

  xangle += Math.PI / 35;
  yangle += Math.PI / 32;
  zangle += Math.PI / 31;
}

function initializeVectorBalls() {
  document.write('<style type="text/css">');
  for(var i = 0; i < numballs; i++) {
    document.write('#vectorballs-' + i + ' {');
    document.write('position: absolute;');
    document.write('left: 0px;');
    document.write('top: 0px;');
    document.write('width: 0px;');
    document.write('height: 0px;');
    document.write('z-index: ' + i + ';');
    document.write('}');
  }
  document.write('#vectorballs {');
  document.write('position: absolute;');
  document.write('background-color: black;');
  document.write('left: 1px;');
  document.write('top: 1px;');
  document.write('width: 256px;');
  document.write('height: 256px;');
  document.write('}');
  document.write('</style>');

  document.write('<div id="vectorballs"/>');
  for(var i = 0; i < numballs; i++) {
    document.write('<img id="vectorballs-' + i + '" src="img/vectorball' + i + '.png" width="1" height="1" alt=""/>');
  }
  document.write('</div>');

  coords = new Array(numballs);
  for(var i = 0; i < numballs; i++) {
    coords[i] = new Array(3);
    coords[i][0] = 25 * Math.cos(i * 2 * Math.PI / numballs);
    coords[i][1] = 25 * Math.sin(i * 2 * Math.PI / numballs);
    coords[i][2] = 0;
  }
}


function sortFunc(a, b) {
  if(a[2] < b[2])
    return -1;
  if(a[2] > b[2])
    return 1;
  return 0;
}

function xyzproj(x, y, z) {
  var v = new Array(3);

  v[0] = x * Math.cos(yangle) + z * Math.sin(yangle);
  v[1] = y;
  v[2] = -x * Math.sin(yangle) + z * Math.cos(yangle);
  
  x = v[0];
  y = v[1] * Math.cos(xangle) - v[2] * Math.sin(xangle);
  z = v[1] * Math.sin(xangle) + v[2] * Math.cos(xangle);
  
  v[0] = x * Math.cos(zangle) - y * Math.sin(zangle);
  v[1] = x * Math.sin(zangle) + y * Math.cos(zangle);
  v[2] = z;

  return v;
}

randomInitializeFunctions.push(initializeVectorBalls);
randomDrawFunctions.push(drawVectorBalls);