JJBanners = new Array();
JJStartTimeout = null;

function JJInitBanners( delay ){
  // init
  var t = 0;
  var BannerElement = document.getElementById( "JJBanner" + t );
  while( BannerElement ){
    obj = new JJBanner( t, BannerElement );
    JJBanners.push( obj );
    t ++;
    BannerElement = document.getElementById( "JJBanner" + t );
  }

  if ( delay ){ 
    JJStartTimeout = setTimeout( "JJStartBanners()", delay );
  } else { 
    JJStartBanners();
  }
}

function JJStartBanners(){
  if ( JJStartTimeout ){ 
    clearTimeout( JJStartTimeout );
  }
  // de eerste banner starten
  JJBanners[ 0 ].Start();
}

function JJBannerStep( id ){
  JJBanners[ id ].NextStep();
}

function JJBannerStart( id ){
  JJBanners[ id ].Start();
}

function JJBanner ( id, element ){
  this.ID = id;
  this.Element = element;
  this.RunnerInterval = null;
  this.StartTimeout = null;
  this.Direction = "up";
  this.CurrentValue = 0;
  this.MinValue = 0;
  this.MaxValue = 100;
  this.Step = 5;
  this.IntervalTime = 100;
  this.UpTime = 2000;
  this.StartNextElementAtOpacitiy = 10;
  this.NextElementStarted = false;
}

JJBanner.prototype.Start = function(){
  if ( this.StartTimeout ){
    this.StartTimeout = clearTimeout( this.StartTimeout );
  }
  this.SetFilter( this.CurrentValue );
  this.Element.style.visibility = 'visible';
  this.RunnerInterval = setInterval( "JJBannerStep( " + this.ID + " )", this.IntervalTime );
}

JJBanner.prototype.NextStep = function(){
  Change = this.Direction == "up" ? this.Step : this.Step * - 1;
  NextValue = this.CurrentValue + Change;
  NextValue = Math.max( this.MinValue, NextValue );
  NextValue = Math.min( this.MaxValue, NextValue );
  this.SetFilter( NextValue );
  
  if ( this.Direction == "down" && this.CurrentValue <= this.StartNextElementAtOpacitiy && ! this.NextElementStarted ) { 
    NextID = JJBanners[ this.ID + 1 ] ? this.ID + 1 : 0;
    this.NextElementStarted = true;
    JJBanners[ NextID ].Start();
  }

  if ( NextValue == this.MaxValue || NextValue == this.MinValue ){
    this.Stop();
  }

}

JJBanner.prototype.Stop = function(){
  if ( this.RunnerInterval ){
    this.RunnerInterval = clearInterval( this.RunnerInterval );
  }

  if ( JJBanners.length == 1 ){
    return;
  }

  if ( this.Direction == "up" ){ 
    this.Direction = "down";
    this.StartTimeout = setTimeout( "JJBannerStart( " + this.ID +  " )", this.UpTime );
  } else { 
    this.NextElementStarted = false;
    this.Element.style.visibility = 'hidden';
    this.Direction = "up";
  }
}

JJBanner.prototype.SetFilter = function( value ){ 
  if ( this.Element.filters )
  this.Element.filters.alpha.opacity = value;
  this.Element.style.MozOpacity = value / 100; 
  this.Element.style.opacity = value / 100;
  
  this.CurrentValue = value;
}