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

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

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

  // create the center Node
  var center = new DivSugar.Node().setPosition(400, 300, 0).appendTo(scn);
  center.playAnimation([['to', { rotate: [120, 0, -10] }, 5000, DivSugar.Ease.cubicInOut], ['wait', 2000], ['repeat']]);

  // create the banner Nodes
  var x, y, z, color, waitTime, moveTime, anim, banner;
  var colors = ['#ffff80', '#ff80ff', '#80ffff', '#ff8080', '#80ff80', '#8080ff'];

  for (var i = 0; i < 40; i++) {
    x = Math.random() * 800 - 800;
    y = Math.random() * 1000 - 500;
    z = Math.random() * 1000 - 500;

    color = colors[Math.floor(Math.random() * 6)];

    waitTime = Math.random() * 5000;
    moveTime = Math.random() * 3000 + 3000;

    anim = [
      ['to', { position: [x + 400, y, z], opacity:   0 }],
      ['to', { position: [x + 200, y, z], opacity: 0.6 }, moveTime / 4],
      ['to', { position: [x - 200, y, z], opacity: 0.6 }, moveTime / 2],
      ['to', { position: [x - 400, y, z], opacity:   0 }, moveTime / 4],
      ['repeat']
    ];

    banner = new DivSugar.Node().setSize(1200, 100).setOpacity(0).rotate(0, 0, Math.random() * 180 - 90).appendTo(center);
    banner.div.innerHTML = '<h1 style="color:' + color + '; font-size:50px">DivSuar, a CSS-based 3D graphics library</h1>';
    banner.playAnimation([['wait', waitTime], ['play', anim]]);
  }
};