function ThumbState()
{
	this.totalFrames = 7;
	this.styleName = "thumb";
	this.slave = undefined;
	
	this.current = 0;
	this.direction = 0;
	this.selected = false;
	
	this.setSlave = function( s )
	{
		this.slave = s;
		s.master = this;
	}
	
	this.startRollOver = function()
	{
		if( !this.slave ) reutrn;
		
		if( !this.selected ) 
		{
			this.direction = 1;
		}
	}
	
	this.startRollOut = function()
	{
		if( !this.slave ) reutrn;
		
		if( !this.selected ) 
		{
			this.direction = -1;
		}
	}
	
	this.nextFrame = function()
	{
		if( this.direction == 0 ) return;
		
		this.current += this.direction;
		
		if( this.current < 0 )
		{
			this.current = 0;
			this.direction = 0;
		}
		
		if( this.current > this.totalFrames )
		{
			this.current = this.totalFrames;
			this.direction = 0;
		}
		
		this.slave.className = this.styleName+"over"+this.current;
		
	}
	
	this.deselect = function()
	{
		this.selected = false;
		this.current = this.totalFrames;
		this.startRollOut();
	}
	
	this.select = function()
	{
		//current selected thumb must be deselected first! 
		this.selected = true;
		this.current = 0;
		this.direction = 0;
		this.slave.className = this.styleName+"selected";
	}
}

var thumbnails = new Array();

function addThumb( item )
{
		
	//check if it is already added
	var l = thumbnails.length;
	for( var i = 0; i < l; i ++ )
	{
		if( thumbnails[i].slave == item ) return;
	}
	thumbnails[l] = new ThumbState();
	thumbnails[l].setSlave( item );
}

function rolloverWorker()
{
	for( var i = 0; i < thumbnails.length; i ++ )
	{
		thumbnails[i].nextFrame();
	}
}
var rolloverTimer = setInterval( "rolloverWorker()", 50 );

function showThumbCaption( cid )
{
	document.getElementById( cid ).style.visibility="visible";
}

function hideThumbCaption( cid )
{
	document.getElementById( cid ).style.visibility="hidden";
}