var backlay = null;
var lytebox = null;
var stts = null;
var opacount = 0;
var append = false;

var PATH_JS = "js/";
var FILE_PNG = "overlay.png";

function createLyteBox(boxid, htmldoc, ypos, overlay_png, borderStyle, bgColor, padding, fadeIn, lyteboxWidth)
{
	if( ypos == null )
	{
		ypos = 10;
	}

	if( overlay_png == null )
	{
		overlay_png = FILE_PNG;
	}
	
	if( borderStyle == null )
	{
		borderStyle = "none";
	}
	
	if( bgColor == null )
	{
		bgColor = "#ffffff";
	}
	
	if( padding == null )
	{
		padding = "0px 0px 0px 0px";
	}
	
	var swidth = parseInt(document.body.scrollWidth);

	// Get or Create elements of lytebox and back layer.
	lytebox = $(boxid);
	if( !lytebox )	// if element doesn't exist
	{
		// create new element
		lytebox = document.body.appendChild(document.createElement("div"));
		lytebox.setAttribute ("id", boxid);
		if (lyteboxWidth == null)
		{
			Element.setStyle(lytebox,
				{
					"border": borderStyle,
					"background-color": bgColor,
					"padding": padding
				}
			);
		
		}
		else
		{
			Element.setStyle(lytebox,
				{
					"border": borderStyle,
					"background-color": bgColor,
					"padding": padding,
					"width": lyteboxWidth
				}
			);
		}
		append = true;
	}

	if( backlay == null )
	{
		backlay = document.body.appendChild(document.createElement("div"));
	}

	// set the back layer color and size
/*
	width = parseInt(document.body.scrollWidth);
	height = parseInt(document.body.scrollHeight || document.documentElement.scrollHeight);
	height2 = document.documentElement.clientHeight || document.body.clientHeight;
	if( height < height2 )
	{
		height = height2;
	}
*/

	// set back layer image
	if( navigator.appName.indexOf("Microsoft") != -1 )	// if IE
	{
		Element.setStyle(backlay,
			{
				"top": "0px",
				"left": "0px",
				"z-index": "50",
				"display": "none",
				"position": "absolute",
//				"width": width + "px",
//				"height": height + "px",
				"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/" + PATH_JS + overlay_png + "', sizingMethod='scale')"
			}
		);
	}
	else
	{
		Element.setStyle(backlay,
			{
				"top": "0px",
				"left": "0px",
				"z-index": "50",
				"display": "none",
				"position": "absolute",
//				"width": width + "px",
//				"height": height + "px",
				"background": "transparent url(" + PATH_JS + overlay_png + ") 0 0 repeat"
			}
		);
	}

	// set the lytebox frame
	Element.setStyle(lytebox, {"position": "absolute", "z-index": "100"});
	if( append )
	{
		lytebox.innerHTML = htmldoc;
	}

	// show elements
	Element.setStyle(backlay, {"display": "block"});
	Element.setStyle(lytebox, {"display": "block", "visibility": "visible"});

	if (!window.outerWidth) {
        window.outerWidth = document.body.clientWidth + 2*document.body.offsetLeft;
//        window.outerWidth = document.clientWidth;
    }
    
    
//	leftpos = screen.width / 2 - parseInt(Element.getWidth(lytebox)) / 2; // + parseInt(document.body.style.posLeft);
	leftpos = window.outerWidth / 2 - parseInt(Element.getWidth(lytebox)) / 2; // + parseInt(document.body.style.posLeft);
	Position.prepare();
	toppos = parseInt(Position.deltaY) + ypos;
	Element.setStyle(lytebox, {"top": toppos + "px", "left": leftpos + "px"});


	width = parseInt(document.body.scrollWidth);
	height = parseInt(document.body.scrollHeight || document.documentElement.scrollHeight);
	height2 = document.documentElement.clientHeight || document.body.clientHeight;
	if( height < height2 )
	{
		height = height2;
	}
	height3 = screen.height;
	if( height < height3 )
	{
		height = height3;
	}

	Element.setStyle(backlay, {"top": "0px", "left": "0px",
//		"width": screen.width + "px",
		"width": "100%", 
		"height": (height + 200) + "px"}
	);

	if (fadeIn != null)
	{
		setTimeout("fadeIn()", fadeIn);
	}
}

function fadeIn()
{
	if( opacount < 100 )
	{
		opacount += 10;
		if(lytebox.style.filter != null)		lytebox.style.filter = "alpha(opacity = " + opacount + ")";
		if(lytebox.style.opacity != null)		lytebox.style.opacity = parseFloat (opacount / 100);
		if(lytebox.style.MozOpacity != null)	lytebox.style.MozOpacity = parseFloat (opacount / 100);
		setTimeout("fadeIn()", 40);
	}
}

function updateLyteBox(htmldoc)
{
	if( htmldoc == "" )
	{
		alert("no data");
		return;
	}

	if( lytebox )
	{
		lytebox.innerHTML = htmldoc;

		leftpos = parseInt(document.body.scrollWidth) / 2 - parseInt(Element.getWidth(lytebox)) / 2;
		Position.prepare();
		toppos = parseInt(Position.deltaY) + 10;
		Element.setStyle(lytebox, {"top": toppos + "px", "left": leftpos + "px"});
	}
	else
	{
		createLyteBox(boxid, htmldoc);
	}
}

function deleteLyteBox()
{
	// delete element from document
	if( backlay )
	{
		document.body.removeChild(backlay);
		backlay = null;
	}
	if( lytebox )
	{
		if( stts )
		{
			lytebox.removeChild(stts);
			stts = null;
		}
		if( append )
		{
			document.body.removeChild(lytebox);
			lytebox = null;
			append = false;
		}
		else
		{
//			Element.setStyle(lytebox, {"y": "-1000px", "height": "1px", "margin-top": "-1000px"});
//			Element.setStyle(lytebox, {"display": "none"});
			Element.setStyle(lytebox, {"visibility": "hidden"});
		}
	}
}

function showLyteBoxStatus(htmldoc)
{
	if( lytebox )
	{
		if( stts )
		{
			stts.innerHTML = htmldoc;
		}
		else
		{
			stts = lytebox.appendChild(document.createElement ("div"));
			Element.setStyle(stts, {"position": "absolute", "border": 0, "background-color": "#900"});
			stts.innerHTML = htmldoc;
		}
	}
}

function hideLyteBoxStatus()
{
	if( lytebox && stts )
	{
		lytebox.removeChild(stts);
		stts = null;
	}
}