function Overlay(id, width, height, screenClass, contentClass, cbresize)
{
	this.id = id;
	this.width = width;
	this.height = height;
	this.padding = { left : 0, right : 0, top : 0, bottom : 0 };
	this.cbresize = cbresize;

	this.screen = document.createElement( "DIV" );

	if( this.screen.className !== undefined )
		this.screen.className = screenClass;
	else if( this.screen.setAttribute )
		this.screen.setAttribute( "class", screenClass );

	this.screen.style.position = "absolute";
	this.screen.style.display = "block";

	this.content = document.createElement( "DIV" );
	
	if( this.content.className !== undefined )
		this.content.className = contentClass;
	else if( this.content.setAttribute )
		this.content.setAttribute( "class", contentClass );
		
	this.content.style.position = "absolute";
	this.content.style.display = "block";
	
	this.metrics = { width: 0, height: 0 };
	
	Overlay.instances[ id ] = this;
}

Overlay.instances = new Array();
Overlay.active = null;

Overlay.prototype.create = function()
{
	document.body.appendChild( this.screen );
	document.body.appendChild( this.content );
	this.positionElements();
	Overlay.active = this;

    setEventHandler( window, "resize", Overlay.onResize );
}

Overlay.prototype.destroy = function()
{
	Overlay.active = null;
	
	document.body.removeChild( this.content );
	document.body.removeChild( this.screen );
	
	var tmp = new Array();
	var instance;
	
	for( iid in Overlay.instances ) {
		if( iid != this.id )
			tmp[ iid ] = Overlay.instances[ iid ];
	}
	
	Overlay.instances = tmp;

	if( document.documentElement !== undefined ) {
		document.documentElement.style.overflow = "";
		document.body.style.overflow = "";
	} else {
		document.body.style.overflow = "";
	}
}

Overlay.prototype.addChild = function(element)
{
	this.content.appendChild( element );
	this.positionElements();
}

Overlay.prototype.removeChild = function(element)
{
	this.content.removeChild( element );
}

Overlay.prototype.setContent = function(html)
{
	this.content.innerHTML = html;
}

Overlay.prototype.setPadding = function(p)
{
	this.padding = { left: p, right: p, top: p, bottom: p };
}

Overlay.prototype.positionElements = function()
{
    var mtx = this.getMetrix();
    var x, finalWidth, finalHeight;

    this.screen.style.left = mtx.offX + "px";
    this.screen.style.top = mtx.offY + "px";
    this.screen.style.width = mtx.width + "px";
    this.screen.style.height = mtx.height + "px";

	if( this.width > 0 ) {
		x = (this.width <= mtx.width) ? this.width : mtx.width;
		this.content.style.width = x + "px";
		finalWidth = x;
		x = (this.width <= mtx.width) ? Math.round((mtx.width - this.width) / 2) : 0;
		this.content.style.left = (mtx.offX + x) + "px";
	} else if( this.width < 0 ) {
		x = mtx.width + this.width;
		if( x < 0 )
			x = Math.abs( this.width );
		this.content.style.width = x + "px";
		finalWidth = x;
		
		x = Math.abs( Math.abs( this.width ) - Math.abs( this.padding.left + this.padding.right ) ) / 2;
		this.content.style.left = (mtx.offX + x) + "px";
	} else {
		this.content.style.width = mtx.width + "px";
		this.content.style.left = mtx.offX + "px";
		finalWidth = mtx.width;
	}
	
	if( this.height > 0 ) {
		x = (this.height <= mtx.height) ? this.height : mtx.height;
		this.content.style.height = x + "px";
		finalHeight = x;
		x = (this.height <= mtx.height) ? Math.round((mtx.height - this.height) / 2) : 0;
		this.content.style.top = (mtx.offY + x) + "px";
	} else if( this.height < 0 ) {
		x = mtx.height + this.height;
		if( x < 0 )
			x = Math.abs( this.height );
		this.content.style.height = x + "px";
		finalHeight = x;
		
		x = Math.abs( Math.abs( this.height ) - Math.abs( this.padding.top + this.padding.bottom ) ) / 2;
		this.content.style.top = (mtx.offY + x) + "px";
	} else {
		this.content.style.height = mtx.height + "px";
		this.content.style.top = mtx.offY + "px";
		finalHeight = mtx.height;
	}
	
	if( document.documentElement !== undefined ) {
		document.documentElement.style.overflow = "hidden";
		document.body.style.overflow = "hidden";
	} else {
		document.body.style.overflow = "hidden";
	}
	
	if( this.cbresize != null )
		this.cbresize( finalWidth, finalHeight, this.id );
		
	this.metrics.width = finalWidth;
	this.metrics.height = finalHeight;
}

Overlay.prototype.getMetrix = function()
{
    var metrics = {
        offX : 0,
        offY : 0,
        width : 0,
        height: 0
    };

    if( window.pageXOffset !== undefined ) {
        metrics.offX = window.pageXOffset;
    } else if( document.documentElement.scrollLeft !== undefined ) {
        metrics.offX = document.documentElement.scrollLeft;
    } else if( document.body.scrollLeft !== undefined ) {
        metrics.offX = document.body.scrollLeft;
    }

    if( window.pageYOffset !== undefined ) {
        metrics.offY = window.pageYOffset;
    } else if( document.documentElement.scrollTop !== undefined ) {
        metrics.offY = document.documentElement.scrollTop;
    } else if( document.body.scrollTop !== undefined ) {
        metrics.offY = document.body.scrollTop;
    }

    if( window.innerWidth ) {
        metrics.width = window.innerWidth ;
        metrics.height = window.innerHeight;
    } else if( document.documentElement.clientWidth ) {
        metrics.width = document.documentElement.clientWidth;
        metrics.height = document.documentElement.clientHeight;
    } else if( document.body.clientWidth ) {
        metrics.width = document.body.clientWidth;
        metrics.height = document.body.clientHeight;
    }
        
    return metrics;
}

Overlay.onResize = function()
{
	if( Overlay.active != null )
		Overlay.active.positionElements();
}