window.onload = function() {
  'use strict';

  // create a Scene
  var scn = new DivSugar.Scene().setSize(800, 600).setImage('#d0d0d0').appendTo(document.body);

  // maximize the Scene size
  function resize() { scn.adjustLayout(window.innerWidth, window.innerHeight, 'contain'); }
  window.addEventListener('resize', resize, true);
  resize();

  // create the root Node and an animation Task to rotate the whole Scene
  var root = new DivSugar.Node().setPosition(400, 300, 0).rotate(-50, 0, 0).appendTo(scn);
  var task = new DivSugar.Task().appendTo(DivSugar.rootTask);
  task.onUpdate = function() { root.rotate(0, this.deltaTime * 0.02, this.deltaTime * 0.015); };

  // Define a 3D object class which refrects light and has a text billboard
  var mat = new DivSugar.Matrix();
  var lightDir = new DivSugar.Vector(1, 1, -2).normalize();

  function Monolith(name, x, z) {
    this.constructor.uber.constructor();

    this.faces = [];
    this.colors = [];

    this.center = new DivSugar.Node().setPosition(x, 0, z).setOpacity(0.6).rotate(0, Math.random() * 360, 0).appendTo(root);
    for (var i = 0; i < 6; i++) { this.faces[i] = new DivSugar.Node().setImage('#00ff00').appendTo(this.center); }

    var sx = Math.random() * 30 + 30;
    var sy = Math.random() * 100 + 50;
    var sz = Math.random() * 30 + 30;

    this.faces[0].setSize(sx, sy).setPosition(-sx / 2, -sy / 2, sz / 2);
    this.faces[1].setSize(sz, sy).setPosition(sx / 2, -sy / 2, sz / 2).rotate(0, 90, 0);
    this.faces[2].setSize(sx, sy).setPosition(sx / 2, -sy / 2, -sz / 2).rotate(0, 180, 0);
    this.faces[3].setSize(sz, sy).setPosition(-sx / 2, -sy / 2, -sz / 2).rotate(0, 270, 0);
    this.faces[4].setSize(sx, sz).setPosition(-sx / 2, -sy / 2, -sz / 2).rotate(90, 0, 0);
    this.faces[5].setSize(sx, sz).setPosition(-sx / 2, sy / 2, sz / 2).rotate(-90, 0, 0);

    this.label = new DivSugar.Node().setSize(100, 0).appendTo(scn);
    this.label.div.innerHTML = '<h3 style="text-align:center; color:white">' + name + '</h3>';
  }

  DivSugar.inherit(Monolith, DivSugar.Task);

  Monolith.prototype.onUpdate = function() {
    this.center.getWorldTransform(mat);

    // calculate the color of the faces
    this.colors[0] = Math.max(-mat.zAxis.dot(lightDir), 0) * 191 + 64;
    this.colors[1] = Math.max(-mat.xAxis.dot(lightDir), 0) * 191 + 64;
    this.colors[2] = Math.max(mat.zAxis.dot(lightDir), 0) * 191 + 64;
    this.colors[3] = Math.max(mat.xAxis.dot(lightDir), 0) * 191 + 64;
    this.colors[4] = Math.max(mat.yAxis.dot(lightDir), 0) * 191 + 64;
    this.colors[5] = Math.max(-mat.yAxis.dot(lightDir), 0) * 191 + 64;

    for (var i = 0; i < 6; i++) { this.faces[i].setImage(DivSugar.getCSSColor(0, this.colors[i], 0)); }

    // update the position of the text billboard
    this.label.setPosition(mat.trans.x - 50, mat.trans.y - 30, mat.trans.z + 80);
  };

  Monolith.prototype.onDestroy = function() { scn.remove(this.center); };

  // create and register the instances
  var rad;
  for (var i = 0; i < 10; i++) {
    rad = DivSugar.DEG_TO_RAD * 36 * i;
    new Monolith('000' + i, Math.cos(rad) * 200, Math.sin(rad) * 200).appendTo(DivSugar.rootTask);
  }
};