/*
 * methods that overwrite the default behaviour of the cms extension
 * the simple border behaviour in live edit mode (on mouseover)
 * destroys the page layout in the majority of cases. 
 * 
 * A different behaviour using overlays with transparency is implemented
 * therefore.
 */

function showBorder(element)
{
	var borderWidth = 3;
	var pivotElement = null;
	for( var index in element.childNodes )
	{
		var eleCandidate = element.childNodes[ index ];
		if( eleCandidate.nodeType == 1
				&& eleCandidate.nodeName != "span"
				&& getTop( eleCandidate ) != null 
				&& getLeft( eleCandidate ) != null
				&& eleCandidate.clientHeight > 0
				&& eleCandidate.clientWidth > 0 )
		{
			pivotElement = eleCandidate;	
		}
		
	}						
	if( pivotElement == null )
	{
		pivotElement = element;
		pivotElement.style.background = "red";
		pivotElement.style.color = "white";
//		pivotElement.style.border="2px solid red";
//		pivotElement.style.zIndex="100";
//		pivotElement.style.display="block";
	}
	else
	{
		if( pivotElement.clientHeight < 30 )
		{
			borderWidth = 1;
		}
		var body = document.getElementsByTagName( "body" )[0];
		{
			var overlay = document.createElement( "div" );
			overlay.id = "cmsOverlay0";
			overlay.className = "CMSOverlay";
			overlay.style.top = getTop( pivotElement ) + "px";
			overlay.style.left = getLeft( pivotElement ) + "px";
			overlay.style.width = pivotElement.clientWidth + "px";
			overlay.style.height = borderWidth + "px";
			body.appendChild( overlay );
		}				
		{
			var overlay = document.createElement( "div" );
			overlay.id = "cmsOverlay1";
			overlay.className = "CMSOverlay";
			overlay.style.top = getTop( pivotElement ) + pivotElement.clientHeight - borderWidth + "px";
			overlay.style.left = getLeft( pivotElement ) + "px";
			overlay.style.width = pivotElement.clientWidth + "px";
			overlay.style.height = borderWidth + "px";
			body.appendChild( overlay );
		}
		{
			var overlay = document.createElement( "div" );
			overlay.id = "cmsOverlay2";
			overlay.className = "CMSOverlay";
			overlay.style.top = getTop( pivotElement ) + borderWidth + "px";
			overlay.style.left = getLeft( pivotElement ) + "px";
			overlay.style.width = borderWidth + "px";
			overlay.style.height = pivotElement.clientHeight - borderWidth * 2 + "px";
			body.appendChild( overlay );
		}
		{
			var overlay = document.createElement( "div" );
			overlay.id = "cmsOverlay3";
			overlay.className = "CMSOverlay";
			overlay.style.top = getTop( pivotElement ) + borderWidth + "px";
			overlay.style.left = getLeft( pivotElement ) + pivotElement.clientWidth - borderWidth + "px";
			overlay.style.width = borderWidth + "px";
			overlay.style.height = pivotElement.clientHeight - borderWidth * 2 + "px";
			body.appendChild( overlay );
		}
		
	}
}

function removeBorder(element)
{
	element.style.background="";
	element.style.color = "";
	element.style.border="";
	element.style.zIndex="";
	element.style.display="";
	var body = document.getElementsByTagName( "body" )[0];
	for( var i = 0; i < 4; i++ )
	{
		var overlay = document.getElementById( "cmsOverlay" + i );
		if( overlay != null )
		{
			body.removeChild( overlay );
		}
	}
	
}