var ajaxLyteboxId;
var ajaxLyteboxCssStyle;
var ajaxLyteboxCssClass;
var ajaxLyteboxTopHtml;
var ajaxLyteboxBottomHtml;
var reference_element;
var offset_h;
var offset_v; 

function displayAjaxLyteBox(url, id, style, cssclass, topHtml, bottomHtml, ref_eid, o_h, o_v) {

	ajaxLyteboxId = id;
	ajaxLyteboxCssStyle = style;
	ajaxLyteboxCssClass = cssclass;
	reference_element = ref_eid;
	offset_h = o_h;
	offset_v = o_v;
//	ajaxLyteboxTopHtml = topHtml;
//	ajaxLyteboxTopHtml="<div style='padding: 20px 20px 20px 20px; border: solid 2px #ff0000'>";
	ajaxLyteboxTopHtml = 
		"<div id='top'>" +
		"<div style='text-align: right; float: none;  margin-top: 20px; margin-bottom: 20px;'>" +
		"<p style='margin-top: 20px; margin-bottom: 5px;'><a style='color: #b0b0b0; font-size: 20px; font-weight: bold' href='#' onclick='deleteLyteBox(); return false'>X</a></p>" + 
		"</div>" +
		"</div>";
	//ajaxLyteboxBottomHtml = bottomHtml;
	//ajaxLyteboxBottomHtml="<p><input type = 'button' onclick = 'javascript: deleteLyteBox();' value = 'Ok' /></p>";
	ajaxLyteboxBottomHtml = "<div id='top' style='float: none;  margin-top: 10px; height: 30px;'>&nbsp;</div>";
	new Ajax.Request(url,
		{  
			method: 'get',
			onSuccess: createAjaxLyteBox
		}
	); 
}

function createAjaxLyteBox(transport) {
	
//	alert(
//			'reference element id: ' + reference_element + 
//			'\noffest_v: ' + offset_v + 
//			'\noffest_h: ' + offset_h);
						
	midhtml = transport.responseText;
	midhtml = "<div id='mid' style='width: 300px; float: none; text-align: left'>" + midhtml + "</div>";
	createLyteBox(ajaxLyteboxId, "<div style='background-color: #ffffff; border: solid 2px #e6640e; padding-left: 30px; padding-right: 30px'>"+
		ajaxLyteboxTopHtml + midhtml + ajaxLyteboxBottomHtml +
		"</div>",
		30,
		null,
		"overlay-2.png",
		$(reference_element),
		offset_h,
		offset_v
	);
}