var MODAL_POPUP_ID = "_MODAL_POPUP_";
var CONTENT_ID = "_MODAL_CONTENT_";

/**
  attributes example:
	{
		width: 800,
		height: 600, 
		closeButtonText: "x",
		opacity: 0.3,
		modalBackgroundColor: "#000000",
		headerBackgroundColor: "#3366FF",
		backgroundColor: "#ffffff"
	}
 */
function getScrollXY() {
    var scrOfX = 0, scrOfY = 0;
    if (typeof (window.pageYOffset) == 'number') {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }
    return [scrOfX, scrOfY];
}
function CreateModalPopup(url, attributes) {
	
	if (!attributes)
		attributes = {};
	
	//--default attributes
	if (!attributes.width) {
		attributes.width = 800 + 'px';
	}
	if (!attributes.height) {
		attributes.height = 600 + 'px';
	}
	if (!attributes.closeButtonText) {
		attributes.closeButtonText = "x";
	}
	if (!attributes.opacity) {
		attributes.opacity = 0.3;
	}
	if (!attributes.modalBackgroundColor) {
		attributes.modalBackgroundColor = "#000000";
	}
	if (!attributes.headerBackgroundColor) {
	    attributes.headerBackgroundColor = "#3195CF";
	}
	if (!attributes.backgroundColor) {
		attributes.backgroundColor = "#ffffff";
	}


	var modal = document.createElement("div");
	
	modal.id = MODAL_POPUP_ID;
	modal.style.display = "block";
	modal.style.position = "absolute";
	modal.style.left = 0 + 'px';
	modal.style.top = 0 + 'px';
	modal.style.right = 0 + 'px';
	modal.style.bottom = 0 + 'px';
	modal.style.width = "100%";
	modal.style.height = document.body.clientHeight + 'px';
	modal.style.backgroundColor = attributes.modalBackgroundColor;

	modal.style.opacity = attributes.opacity;
	
	modal.style.filter = "alpha(opacity: 30)";

	modal.style.textAlign = "center";

	document.body.appendChild(modal);

	//--content-----

	var content = document.createElement("div");
	content.id = CONTENT_ID;
	content.style.display = "block";
	content.style.position = "absolute";
	content.style.left = 0 + 'px';
	content.style.top = 0 + 'px';
	content.style.right = 0 + 'px';
	content.style.bottom = 0 + 'px';
	content.style.width = "100%";
	content.style.height = "100%";

	var center = document.createElement("center");
	
	center.style.marginTop = getScrollXY()[1] + 300 + 'px';
	
	content.appendChild(center);

	var header = document.createElement("div");
	header.style.width = attributes.width + 'px';
	header.style.height = 30 + 'px';
	header.style.textAlign = "right";
	header.style.backgroundColor = attributes.headerBackgroundColor;
	
	header.innerHTML = "<a href='javascript: CloseModalPopup();'>" + attributes.closeButtonText + "</a>";

	center.appendChild(header);

	var container = document.createElement("div");
	container.style.width = attributes.width + 'px';
	container.style.height = attributes.height + 'px';
	container.style.backgroundColor = attributes.backgroundColor;

	center.appendChild(container);

	var iframe = document.createElement("iframe");
	iframe.frameBorder = 0;
	iframe.scrolling = "no";
	iframe.style.width = "100%";
	iframe.style.height = "100%";
	iframe.src = url;

	container.appendChild(iframe);

	document.body.appendChild(content);
}

function CloseModalPopup() {
	var modal = document.getElementById(MODAL_POPUP_ID);
	if (modal)
		modal.parentNode.removeChild(modal);
	var content = document.getElementById(CONTENT_ID);
	if (content)
		content.parentNode.removeChild(content);
}