var slideshow = 
{ 
  startup: function() 
  { 
    slideshow.changeImage();
    new PeriodicalExecuter(slideshow.cycle, 5)
  }, 
  
  // each viewer gets a random set of 50 images so caching stops bandwidth drain if they just sit there
  imageCount: 50,
  firstImage: Math.floor(Math.random() * (1250 - 50)),
  nextImage : 0,
  
  cycle: function() 
  {       
        // fade in the new image, then set the background to it & hide the image so the next one can fade in over the top of an existing image
        
        new Effect.Appear('slideshowImage', 
        {
            duration: 2, 
            fps: 50, 
            queue:'end',
            
            afterFinish: function()
            {            
                slideshow.changeImage();
            }
        });
        
  },
  
  changeImage: function()
  {
    $('slideshowImageDiv').style.backgroundImage = 'url(' + $('slideshowImage').src + ')';;
    $('slideshowImage').hide();
    
    var imageNo = (slideshow.firstImage + slideshow.nextImage).toString();
    slideshow.nextImage = (++slideshow.nextImage % slideshow.imageCount);

    $('slideshowImage').src = 'http://www.seraline.com/fractals380/fbsr' + imageNo + '.jpg';  
  }
}  

document.observe('dom:loaded', function() { slideshow.startup(); });