var scrollTimer;

var LazyLoader = Class.create()  
LazyLoader.prototype=
{
  imgBlank : new Image(),    
  imgLoading : new Image(),
  scroller : null,
     
  initialize:function(idName)
  {
    this.scroller = $(idName);      
    this.imgBlank.src = '/images/Blank128X128.gif';    
    this.imgLoading.src = '/images/icon/spinner.gif';           
    this.heightOfScroll = parseInt(this.scroller.offsetHeight);
    this.widthOfScroll = parseInt(this.scroller.offsetWidth);
    this.calculateWidthAndHeight();
    //instead load up only the viewable images + buffer.
    
    for(var i=1; i<=(this.numOfItemsViewable + this.numOfItemsPerRow); i++)
    {
      var img = document.getElementById('img' +i);
      try
      {
        img.src = img.longDesc
      }
      catch(error)
      {
      }                               
    }
  //this is called when the scrollbar is used.
  Event.observe(this.scroller, 'scroll', function() 
  {     
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout( 'lazyload.delayLoading()',250);
  })
  },
  calculateWidthAndHeight : function()
  {
    var img = $('img1');
    var topRowHeight = img.y;
    if ( isBrowserIE() )
      topRowHeight = getOffsetY(img);
    var done = false;
    var i=1;
    if (isBrowserIE())
    {
      while ( getOffsetY(img) == topRowHeight )
      {
        img = $('img' +i++);
        if (img == undefined)
        {
          this.numOfItemsPerRow = i-2;
          this.heightOfTarget = 186;          
          this.numOfItemsViewable = 1;
          this.numOfItemsViewable *= this.numOfItemsPerRow;
          return;  
        }
      }
    }
    else
    {
    
      while ( img.y == topRowHeight )
      {
        img = $('img' +i++);
        if (img == undefined)
        {
          this.numOfItemsPerRow = i-2;
          this.heightOfTarget = 186;          
          this.numOfItemsViewable = 1;
          this.numOfItemsViewable *= this.numOfItemsPerRow;
          return;  
        }
      }
    }
    
    this.numOfItemsPerRow = i-2;
    if (isBrowserIE())
      this.heightOfTarget = img.offsetTop - topRowHeight;
    else
      this.heightOfTarget = img.y - topRowHeight;
    if (isBrowserIE())
      this.heightOfTarget = getOffsetY(img) - topRowHeight;
    this.numOfItemsViewable = Math.ceil(this.heightOfScroll / this.heightOfTarget);
    this.numOfItemsViewable *= this.numOfItemsPerRow;           
  },
  delayLoading:function()
  {
  
    var startIndex = Math.floor((this.scroller.scrollTop)/this.heightOfTarget);
    startIndex = startIndex * this.numOfItemsPerRow;
    
    //buffer for prev. items
    startIndex = startIndex - this.numOfItemsPerRow;
    
    if (startIndex <1)
      startIndex = 1;
    
    var endIndex = startIndex + this.numOfItemsViewable;
    
    //buffer for list mode since it only loads 1 more image.
    //Thumbnail mode might be too expensive to buffer. (trying it now)    
    endIndex = endIndex + (this.numOfItemsPerRow *2);
          
    if (endIndex > numOfImgs)
      endIndex = numOfImgs;
                         
    //load the image of items that are currently viewable.
    for(var i=startIndex; i<=endIndex; i++)
    {     
      var img = $('img' +i);
      if (img.src.indexOf('loading.gif') != -1 || img.src.indexOf('Blank128X128.gif') != -1)
      {
        //show the loading image while waiting to download the actual image.
        img.src = lazyload.imgLoading.src;
        var tmpImage = new Image();
        //preload the image, and then swap.
        tmpImage.src = img.longDesc;          
        img.src = tmpImage.src;
      }
    }          
  }
}