var Banner = Class.create();
Object.extend(Banner.prototype, {
  initialize: function(element) {
    this.element = $(element);
    this.images = $A(this.element.getElementsByTagName('img'));
    if(this.images.length <= 0) return;
    if(!this.element.style.width)
      this.element.setStyle({
        width: this.images.max(function(e){return $(e).getWidth()})+'px'
      });
    if(!this.element.style.height)
      this.element.setStyle({
        height: this.images.max(function(e){return $(e).getHeight()})+'px'
      });
    if(this.images.length <= 1) return;
    this.index = 0;
    this.images.each((function(e) {
      e = $(e);
      e.setStyle({
        top: (this.element.getHeight()-e.getHeight())/2+'px',
        opacity: 0.01
      });
    }).bind(this));
    this.images.first().setStyle({opacity: 1});
    setTimeout(this.rotate.bind(this), 5000);
  },

  rotate: function() {
    this.images[this.index].setStyle({zIndex: 1});
    Effect.Fade(this.images[this.index], {to: 0.01});
    this.index = this.index + 1;
    if(this.index >= this.images.length) this.index = 0;
    var delayed_rotate = (function() {
      setTimeout(this.rotate.bind(this), ((5000).random()+5000));
    }).bind(this);
    this.images[this.index].setStyle({zIndex: 2});
    Effect.Appear(this.images[this.index],
      {afterFinish: delayed_rotate});
  }
});

Number.prototype.random = function() {return Math.ceil(Math.random()*this)};