function ArtDisplayer(id, maxSize, gridWidth, gridHeight, rate, albumArray) {
	this.imageRoot='http://iaae.sourceforge.net/';
	this.maxSize = maxSize;
	this.gridWidth=gridWidth;
	this.gridHeight=gridHeight;
	this.originalAlbumArray = albumArray;
	this.id = id;
	
	this.albumArray = this.refreshAlbumArray();
	
	// THE LISTING OF WHICH ALBUM HAS WHICH SLOT IN THE GRID
	this.displayedAlbums = new Array();
	
	// INCREMENT FOR FLIPPING PICTURES
	this.ffinc=5;          
	// RATE OF FLIPPING ANIMATION    
    this.ffrate = rate;
    
    // THE IMAGE TO SWITCH IN THE GRID
    this.imageToRotate;
    // THE INDEX IN THE GRID THAT WE ARE GOING TO ROTATE
    this.nextGridIndex;
    
    // THE INDEX OF ALBUM WE ARE FLIPPING TO
    this.nextAlbum; 
    // THE INDEX OF THE ALBUM WAS FLIPPED FROM
    this.previousAlbum;
    
    // THE DIRECTION OF CURRENT ROTATION
    // -1=SHRINKING,1=GROWING,0=DONE
    this.rotateDirection=0;
    
    // IS ROTATION ENABLED
    // 0=FALSE, 1=TRUE        
    this.rotateOn = 0;
		
	if (albumArray.length < this.getNumberOfAlbums())
	   {
	       alert('ERROR: there are not enough albums to fill the grid!')
	   }
    
} 

ArtDisplayer.prototype.refreshAlbumArray = function() {
	return this.originalAlbumArray.slice();
}

ArtDisplayer.prototype.getNumberOfAlbums = function() {
	return this.gridWidth * this.gridHeight;
}

ArtDisplayer.prototype.renderInitialGrid = function(doc) {

    

    doc.write('<TABLE border="0" cellpadding="0" cellspacing="0">');
    
    var row=0;
    var column=0;
    var imageIndex=0;
    var count=0;
    
    for (row=0;row<this.gridHeight;row++)
    {
        doc.write('<TR>')
        for (column=0;column<this.gridWidth;column++)
        {
            imageIndex = Math.floor(Math.random() * this.albumArray.length);
            
            // track which image has this slot
            this.displayedAlbums[count] = imageIndex;
            
            doc.write('<TD width="' + this.maxSize + '" height="' + this.maxSize + '">')
            doc.write('<A HREF="javascript:void(0)" onClick="' + this.id + '.displayDetails(\'' +  count + '\')"' + 
                '>');
                doc.write('<IMG border=0 name="' 
                + this.id + count +
                '" src="' + this.imageRoot + this.albumArray[imageIndex].thumbnailUrl 
                + '" width="' + this.maxSize 
                + '" height="' + this.maxSize + '">');
            doc.write('</A></TD>')
            
            count = count+1;


        }  
        doc.write('</TR>')

    }    
    doc.write('</TABLE>')
    
}


ArtDisplayer.prototype.stopRotation = function(doc) {
    this.rotateOn = 0;
}

ArtDisplayer.prototype.displayDetails = function(index) {
    var id = this.displayedAlbums[index];
    
    window.open('/iaae/albumDetail.html?AlbumId=' + id + '&displayer=' + this.id, 'AlbumDetails', 
    'width=500,height=500,directories=yes,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,resizable=yes');
}

ArtDisplayer.prototype.startRotation = function(doc) {
    // don't allow two simultanous rotations
    if (this.rotateDirection != 0) {
        return;
    }

    var albumCount = this.getNumberOfAlbums();

    // ENABLE ROTATION
    this.rotateOn = 1;
    
    // START THE ROTATION ON SHRINK
    this.rotateDirection = -1;
    
    // FIGURE OUT THE NEXT ALBUM IN THE GRID TO SWITCH
    this.nextGridIndex = Math.floor(Math.random() * (albumCount-1));
    // FETCH THAT IMAGE
    this.imageToRotate = doc.images[this.id + this.nextGridIndex];
    
    // REMEMBER THE ALBUM THAT USED TO BE HERE
    this.previousAlbum = this.displayedAlbums[this.nextGridIndex];

    
    // FLIP THE ALBUM TO THE NEW ONE
    this.flipImage();
    
}


ArtDisplayer.prototype.flipImage = function() {

    var width = this.imageToRotate.width;

    if (this.rotateDirection == -1) {  
  
        if (width > 0) {
            width = (width - this.ffinc);
            if (width < 0) {
                width = 0;
            }
        } 
        
        if (width < this.ffinc) {
            this.rotateDirection = 1;
            
            this.switchImage();
       
        }
    
    } else {
  
        if (width < this.maxSize) {
            width = width + this.ffinc;
        } else {
           this. rotateDirection = 0;
        }
    
        if (width > this.maxSize) {
            width = this.maxSize;
            this.rotateDirection = 0;
        }
     }
  
      this.imageToRotate.width = width;
            
      if (this.rotateDirection != 0) {
        setTimeout(this.id + '.flipImage()', this.ffrate);
      } else {
        if (this.rotateOn == 1) {
            this.startRotation(window.document);
        }
      
      }
}
      
      
ArtDisplayer.prototype.switchImage = function() {

            // REMOVE THE ALBUM FROM THE TEMP ARRAY
            // SO IT WON'T GET PICKED AGAIN
            if (this.previousAlbum) {
                //alert("REMOVING: (" + this.previousAlbum + ") " + this.albumArray[this.previousAlbum].title);
                //this.albumArray.splice(this.previousAlbum,1);
            }
                        
            // IF THE ALBUMARRAY IS EMPTY,
            // THEN REFRESH IT
            if (this.albumArray.length < 5) {
                //alert("REFRESHING ALBUM ARRAY!!!");
                this.albumArray = this.refreshAlbumArray();
            }

            // SELECT THE NEXT ALBUM
            this.nextAlbum = Math.floor(Math.random() * this.albumArray.length);

            // REMEMBER THE INDEX IN THE ALBUM ARRAY ASSIGNED TO THIS SLOT
            this.displayedAlbums[this.nextGridIndex] = this.nextAlbum;       
            
            // SWICTH THE IMAGE     
            this.imageToRotate.src = this.imageRoot + this.albumArray[this.nextAlbum].thumbnailUrl  

}