function popupBox(outerId,outerdbgId)
  {
	var outerId;
	var outerdbgId;
	this.margin = 10;
	this.topOffset = -50;
	this.outerId = outerId;
	this.enableOuterdbg = false;
	
	if(typeof(outerdbgId) != 'undefined')
	{
		this.enableOuterdbg = true;
		this.outerdbgId = outerdbgId;
		this.oOuterdbg = document.getElementById(outerdbgId);
	}

	this.oOuter = document.getElementById(outerId);
	this.oOuterDefaultWidth = this.oOuter.style.width;
	this.show = showPopupBox;
	this.hide = hidePopupBox;
	this.boxTop = 0;
	this.boxLeft = 0;
	this.boxWidth = 0;
	this.boxHeight = 0;
	this.isShown = false;
	this.mouseMovePadding = 0;
	this.myNameIs = ""; 
	this.hideEvent = "";
  }
  
  function showPopupBox(content,event,position,width)
  {
	var content,event,position,width;
	if(this.isShown) return;
	if(typeof(width) != 'undefined' && width != '')
	{
		this.oOuter.style.width = width;
	}	
	else 	
		this.oOuter.style.width = this.oOuterDefaultWidth;	
	if(content != '')
		this.oOuter.innerHTML = content;	
	this.boxHeight = this.oOuter.offsetHeight + this.margin;
	this.boxWidth = this.oOuter.offsetWidth + this.margin;	
	if(
		typeof(position) != 'undefined' &&
		position == 'event' ||
		typeof(position) == 'undefined'
	)
	{
		var lastHeight = document.documentElement.clientHeight - event.clientY;
		var lastWidth = document.documentElement.clientWidth - event.clientX;
		if(
			lastHeight > this.boxHeight ||
			lastHeight < this.boxHeight && 
			event.clientY < this.boxHeight
		)
		{ 
			this.boxTop = event.clientY + this.margin;
		}
		else if(
			lastHeight < this.boxHeight &&
			event.clientY > this.boxHeight
		) 
		{
			this.boxTop = event.clientY - this.margin - this.boxHeight;
		}
		this.boxTop += document.documentElement.scrollTop;
		this.oOuter.style.top = this.boxTop + 'px';
		
		if(
			lastWidth > this.boxWidth ||
			lastWidth < this.boxWidth && 
			event.clientX < this.boxWidth
		)
		{ 
			this.boxLeft = event.clientX + this.margin;
		}
		else if(
			lastWidth < this.boxWidth &&
			event.clientX > this.boxWidth
		) 
		{
			this.boxLeft = event.clientX - this.margin - this.boxWidth;
		}
		this.boxLeft += document.documentElement.scrollLeft;
		this.oOuter.style.left = this.boxLeft + 'px';	
	}	
	if(
		typeof(position) != 'undefined' &&
		position == 'event_vertical_middle'
	)
	{	
		this.boxTop = parseInt(event.clientY - (this.boxHeight)/2);
		this.boxLeft = parseInt(event.clientX - (this.boxWidth)/2);
		this.boxTop += document.documentElement.scrollTop;			
		this.oOuter.style.top = this.boxTop + 'px';
		this.boxLeft += document.documentElement.scrollLeft;
		this.oOuter.style.left = this.boxLeft + 'px';		
	}
	if(
		typeof(position) != 'undefined' &&
		position == 'center'
	)
	{
		if(document.documentElement.clientWidth > this.boxWidth)
			this.boxLeft = parseInt((document.documentElement.clientWidth - this.boxWidth)/2);
		else
			this.boxLeft = 0;
			
		if(document.documentElement.clientHeight > this.boxHeight)
		{
			this.boxTop = parseInt((document.documentElement.clientHeight - this.boxHeight)/2);
			this.boxTop += this.topOffset;
		}
		else
			this.boxTop = 0;		
		this.boxTop += document.documentElement.scrollTop;	
		this.boxLeft += document.documentElement.scrollLeft;
		this.oOuter.style.left = this.boxLeft + 'px';
		this.oOuter.style.top = this.boxTop + 'px';
	}	
	
	
	if(this.enableOuterdbg)
	{
		if(/MSIE/.test(navigator.userAgent))
		{
			this.oOuterdbg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/popupboxdbg.png',sizingMethod='scale')";		
		}
		else
		{
			this.oOuterdbg.style.background = "url('/images/popupboxdbg.png') repeat";

		}	
		this.oOuterdbg.style.top = '0px';
		this.oOuterdbg.style.left = '0px';
		//alert(document.documentElement.clientWidth);
		this.oOuterdbg.style.width = document.documentElement.clientWidth +'px';
		var outerdbgHeight = document.documentElement.scrollHeight;
		/*
		document.documentElement.clientWidth + document.documentElement.scrollTop;
		*/
		this.oOuterdbg.style.height = outerdbgHeight + 'px';
		this.oOuterdbg.style.visibility = 'visible';
	}
	this.oOuter.style.visibility = 'visible';
	this.isShown = true;
	//alert(this.isShown);
	//setTimeout(this.myNameIs + ".hide(event,true)",2000);
	if(this.hideEvent != '')
		document.onmousemove = this.hideEvent;
	
  }  
  
  function hidePopupBox(event,onmouseout)
  {
	var boxOffsetTop = this.boxTop - document.documentElement.scrollTop;
	var boxOffsetLeft = this.boxLeft - document.documentElement.scrollLeft;
	if(!this.isShown) return;
	/*
	if(
		typeof(event) != 'undefined' &&
		typeof(onmouseout) != 'undefined'
	) document.getElementById('debug').innerHTML = ' clientY ' + event.clientY + ' clientX ' + event.clientX + '<br> boxOffsetTop ' + boxOffsetTop + ' boxOffsetLeft ' + boxOffsetLeft + '<br>boxHeight ' + this.boxHeight + ' boxWidth ' + this.boxWidth;
	//*/
	
	if(
		typeof(event) != 'undefined' &&
		typeof(onmouseout) != 'undefined' && 
		(
			event.clientY-this.mouseMovePadding <= boxOffsetTop ||
			event.clientY+this.mouseMovePadding >= boxOffsetTop + this.boxHeight ||
			event.clientX-this.mouseMovePadding <= boxOffsetLeft || 
			event.clientX+this.mouseMovePadding >= boxOffsetLeft + this.boxWidth
		)
		||
		typeof(event) == 'undefined' ||
		typeof(onmouseout) == 'undefined'
	)
	{
		this.oOuter.style.visibility = 'hidden';
		if(this.enableOuterdbg)
		{
			this.oOuterdbg.style.visibility = 'hidden';
		}	
		this.oOuter.innerHTML = '';
		this.isShown = false;
	} 
	//else setTimeout(this.myNameIs + ".hide(event,true)",2000);
}