function squareLayer(){
	var id			= 'squareLayer';
	var background	= null;
	this.setHTML	= function(html){
		this.html	= html;
	}
	this.setId		= function(id){
		this.id		= id;
	}
	this.setBackground	= function(background){
		this.background	= background;
	}
	this.addSquareLayerIn	= function(){
		if(!document.getElementById(this.id)){
			var div		= document.createElement('div');
			div.style.display	= 'none';
			div.style.position	= 'absolute';
			div.id				= this.id;


			if( this.background == true ){
				var backgroundDiv				= document.createElement('div');
				var dimension					= getBodyDimensionWithScrollDimension();
				backgroundDiv.style.display		= 'block';
				backgroundDiv.id				= 'whiteBackground';
				backgroundDiv.style.height		= dimension.height+'px';
				backgroundDiv.style.width		= dimension.width+'px';
				backgroundDiv.appendChild(div);
				document.body.insertBefore(backgroundDiv, document.body.lastChild);
			}else{
				document.body.insertBefore(div, document.body.lastChild.nextSibling);
			}
		}
	}
	this.insertHTML	= function(){
		if(document.getElementById(this.id)){
			document.getElementById(this.id).innerHTML	= this.html;
		}
	}
	this.posElementToMid	= function(id){
		if(document.getElementById(this.id)){
			var bodySize	= window.getSize();
			document.getElementById(this.id).style.display		= 'block';
			document.getElementById(this.id).style.visibility	= 'hidden';
			var eleSize		= document.getElementById(this.id).getSize();
			document.getElementById(this.id).style.left	= ((bodySize.x/2)-(eleSize.x/2))+'px';
			document.getElementById(this.id).style.top	= ((bodySize.y/2)-(eleSize.y/2))+'px';
			document.getElementById(this.id).style.display		= 'none';
			document.getElementById(this.id).style.visibility	= 'visible';
		}
	}

		this.posElementToMid();

}

function showBackground(){
	
	if( document.getElementById('whiteBackground') ){
		document.getElementById('whiteBackground').style.display	= 'block';
	}else{
		var div		= document.createElement('div');
		var dimension		= getBodyDimensionWithScrollDimension();
		div.style.display	= 'block';
		div.id				= 'whiteBackground';
		div.style.height	= dimension.height+'px';
		div.style.width		= dimension.width+'px';
		document.body.insertBefore(div, document.body.lastChild);
	}
}

function hideBackground(){
	if(document.getElementById('whiteBackground')){
		document.getElementById('whiteBackground').style.display	= 'none';
	}
}

function closeSquareLayer(id){
	if(document.getElementById(id)){
		document.getElementById(id).style.display	= 'none';
	}
	hideBackground();
	return false;
}

function addSquareLayer(title,content,id,width,height, background, closeFunctionName){
	var id					= (id != undefined)?id:'squareLayer';
	var width				= (width != undefined)?width:'auto';
	var height				= (height != undefined)?height:'auto';
	width					= (width != 'auto')?width+'px':width;
	height					= (height != 'auto')?height+'px':'auto';
	var closeFunctionName	= (closeFunctionName != undefined)?closeFunctionName+'()':'';

	var background			= (background != undefined)?background:true;
	var contentHeight		= (height == 'auto')?'auto':(height-35)+'px';
	var layerOb	= new squareLayer();
	var html	= '<div id="squareLayerWidth" class="squareLayer" style="width:'+width+';height:'+height+';"><div id="squareLayerTop" class="top" ><div class="topLeft"></div><div id="squareLayerTopMiddle" class="topMiddle">'+title+'</div><div class="topRight"></div><div class="closeLayer" onclick="closeSquareLayer(\''+id+'\'); '+closeFunctionName+';"></div></div><div class="border"><div class="borderLeft" ></div><div class="borderRight" ></div><div id="layerContent" class="layerContent" style="height:'+contentHeight+';">'+content+'</div><div class="bottomContainer"><div class="borderBottomLeft"></div><div class="borderBottom" ></div><div class="bottomRightCorner"></div></div></div></div>';

	layerOb.setHTML(html);
	
	layerOb.setId(id);
	layerOb.setBackground(background);
	layerOb.addSquareLayerIn();
	layerOb.insertHTML();


	if( background == true ){
		showBackground();
	}

	document.getElementById(id).style.display		= 'block';
	document.getElementById(id).style.visibility	= 'hidden';


	try{
		window.addEvent('domready', function() {
			window.setTimeout("posSquareLayer('"+id+"')",100);
		});
	}catch(e){
		posSquareLayer(id);
	}
	
	window.setTimeout(function(){
		var width	= document.getElementById('squareLayerWidth').offsetWidth;
		document.getElementById('squareLayerTop').style.width		= width;
		document.getElementById('squareLayerTopMiddle').style.width	= (width-(6+11+22)); //für den linken und rechte Topbereich und padding-right
	},100);



}

function posSquareLayer(id){
	
	var leftMin	= 10;
	var topMin	= 10;
	
	try{
		ele	=  document.getElementById(id);
		if(ele	== null){
			window.setTimeout('posSquareLayer('+id+')',50);
			return;
		}
		var eleSize = ele.measure(function(){
			return this.getSize();
		});

		var scroll		= document.getScroll();
		var bodySize	= document.getSize();
		var left		= ((bodySize.x/2)-(eleSize.x/2)+(scroll.x));
		var top			= ((bodySize.y/2)-(eleSize.y/2)+(scroll.y));

		left			= (left < leftMin)? leftMin : left;
		top				= (top < topMin)? topMin : top;

		document.getElementById(id).style.left	= left+'px';
		document.getElementById(id).style.top	= top+'px';
		document.getElementById(id).style.visibility	= 'visible';
		document.getElementById(id).style.display	= 'block';
	}catch(e){
		document.getElementById(id).style.visibility	= 'hidden';
		document.getElementById(id).style.display		= 'block';
		var eleSize		= getDimension(id);
		var scroll		= getCurrentScrollDimension();
		var bodySize	= getBodyDimension();
		var left		= ((bodySize.width/2)-(eleSize.width/2)+(scroll.width));
		var top			= ((bodySize.height/2)-(eleSize.height/2)+(scroll.height));

		left			= (left < leftMin)? leftMin : left;
		top				= (top < topMin)? topMin : top;

		document.getElementById(id).style.left	= left+'px';
		document.getElementById(id).style.top	= top+'px';
		document.getElementById(id).style.visibility	= 'visible';
		document.getElementById(id).style.display	= 'block';
	}
}