CenteredSlide.tic = 10;			// tic interval (ms)
CenteredSlide.timeout = 200;	// ms before menu is closed after mouse out
CenteredSlide.pxbystep = 10;	// Pixel number by tic

CenteredSlide.CenteredSlides = [];

function CenteredSlide( id, top, left, width, height )
{
	this.objRef = id;
	eval( this.objRef + "=this" )
	
	this.id = id;
	this.top = top;
	this.left = left;
	this.width = width;
	this.height = height;
	this.status = "closed";
	this.timer = -1;
	this.hidetimer = -1;
	this.px = 0;
	
	<!--- Browser detection --->
	var browser;
	if ( document.all )	this.browser = "ie";
	else				this.browser = "ns4";
	
	<!--- Menu positioning --->
	var strStyle = "";
	strStyle += "<style>";
	strStyle += "#" + id + " { ";
	strStyle += "visibility: hidden; ";
	strStyle += "width : " + width + "px; ";
	strStyle += "height : " + height + "px; ";
	strStyle += "position: absolute; ";
	strStyle += "top : " + top + "px; ";
	strStyle += "left : " + left + "px; ";
	strStyle += "zIndex : 1000; ";
	strStyle += "clip:rect(" + width + " " + ( height / 2 ) + " " + ( height / 2 ) + " 0 ); ";
	strStyle += " } ";
	strStyle += "</style>";

	document.write( strStyle );
	CenteredSlide.CenteredSlides[id] = this;
	
	this.load();
}

CenteredSlide.prototype.load = function()
{
	if (( document.getElementById( this.id + "_Button" )) && ( document.getElementById( this.id )))
	{
		
		
		this.menu = document.getElementById( this.id );
		this.button = document.getElementById( this.id + "_Button" );
		
		
		
		this.menu.style.visibility = "visible";
		
		<!--- Events assignment --->
		this.menu.onmouseover = new Function( "CenteredSlide.open( '" + this.id + "', 1, 0 )" );
		this.menu.onmouseout = new Function( "CenteredSlide.close( '" + this.id + "', 1, " + this.height + " )" );
		this.button.onmouseover = new Function( "CenteredSlide.open( '" + this.id + "', 1, 0 )" );
		this.button.onmouseout = new Function( "CenteredSlide.close( '" + this.id + "', 1, " + this.height + " )" );
		this.menu.style.zIndex = 1000;
		
		this.status = "closing";

		CenteredSlide.close( this.id, 0 );
	}
	else
	{
		<!--- div are not yet loaded then wait 1 sec and try again --->
		window.setTimeout( this.objRef + ".load()", 1000 );
	}
}

CenteredSlide.open = function( id, usr )
{
	var obj = CenteredSlide.CenteredSlides[id];
	window.clearTimeout( obj.timer );
	
	if ((( obj.status == "opening" ) && ( usr == 0 )) || (( usr == 1 ) && ( obj.status != "opened" )))
	{
		obj.menu.style.visibility = "visible";
		obj.menu.style.zIndex = 1001;

		if ( obj.px <= obj.height )
		{
			obj.menu.style.clip="rect( " + (( obj.height / 2 ) - ( obj.px / 2 )) + " " + obj.width + " " + (( obj.height / 2 ) + ( obj.px / 2 )) + " 0 )";
		 	
		 	obj.px = parseInt( CenteredSlide.pxbystep + obj.px );
		 	obj.timer = window.setTimeout( "CenteredSlide.open( '" + id + "', 0 )", CenteredSlide.tic );
		 	obj.status = "opening";
		}
		else
		{
			obj.status = "opened";
		}
	}
}

CenteredSlide.close = function( id, usr )
{
	var obj = CenteredSlide.CenteredSlides[id];

	if ( usr == 1 )
	{
		obj.menu.style.zIndex = 1000;
		obj.status = "closing";
		obj.hidetimer = window.setTimeout( "CenteredSlide.close( '" + id + "', 0 )", CenteredSlide.timeout );
	}
	else if (( usr == 0 ) && ( obj.status == "closing" ))
	{
		if ( obj.px > 0 )
		{
			obj.menu.style.clip="rect( " + (( obj.height / 2 ) - ( obj.px / 2 )) + " " + obj.width + " " + (( obj.height / 2 ) + ( obj.px / 2 )) + " 0 )";
			obj.px = parseInt( obj.px - CenteredSlide.pxbystep );
			obj.hidetimer = window.setTimeout( "CenteredSlide.close( '" + id + "', 0 )", CenteredSlide.tic );
		}
		else
		{
			obj.menu.style.visibility = "hidden";
			obj.status = "closed";
			window.clearTimeout( obj.hidetimer );
		}
	}
}