// Creates images that drift to the left
Clouds = {
  // the number of simultanious clouds
  cloudCount: 4
  ,
  // the urls of the cloud images
  images: []
  ,
  // creates a new floating cloud on a specified x and random y position
  // when a cloud floats offscreen it removes itself and creates a
  // new one on the right side of the screen
  newCloud: function(x) {
    // create an element for the cloud
    var cloud = new Element('img', {
      'src': this.images[Math.floor(Math.random()*this.images.length)],
      'styles': {
        'top': (Math.floor(Math.random()*window.getHeight()) - 150) + 'px',
        'left': x + 'px'
      }
    });
    // add element to the dom
    cloud.injectInside('clouds');

    // float the cloud to the left
    var duration = Math.floor((x + 300) * (20 + 50 * Math.random()));
    cloud.effect('left', {
      duration: duration, 
      transition: Fx.Transitions.linear,
      onComplete: function() {
        cloud.remove();
        Clouds.newCloud(window.getWidth());
      }
    }).start(-300);
  }
  ,
  install: function() {
    new Element('div', {'id': 'clouds'}).injectInside(document.body);

    // specify images for the clouds
    this.images = [];
    for(var i = 1; i <= 3; i++) {
      this.images.push(config_base_url+'/images/wolk'+i+'.gif');
    }

    // partition screen in [cloudCount] columns, create a cloud in every column
    // this ensures the clouds are a bit interspersed
    var kolom_breedte = 1.0 * window.getWidth() / this.cloudCount;
    for(var i=0; i<this.cloudCount; i++) {
      var x = Math.floor(kolom_breedte * (i + Math.random()));
      this.newCloud(x);
    }
  }
}

// install the clouds onload
window.addEvent('load', function() {
  if(!window.ie6) {
    Clouds.install();
  }
});