// ModalIFrame - a floating iframe that shows above a page, and which blocks
// input to the page until it's dismissed.
//
// To use it:
//
// 1) You'll need these files: modaliframe.js, modaliframe.css, modaliframe_ie6.css
//
// 2) Include these lines in the page header:
//    <!--[if lte IE 6]>
//    <link href='modaliframe_ie6.css' rel='stylesheet' type='text/css'/>
//    <![endif]-->
//    <link href='modaliframe.css' rel='stylesheet' type='text/css'/>
//    <script type="text/javascript" src="modaliframe.js"></script>
//
// 3) Call showModalIFrame to show it:
//    <a href='javascript:showModalIFrame("popup.html", 700, 600)'>Show Popup</a>

var nn4 = (document.layers) ? true : false
var ie = (document.all) ? true : false

var viewportwidth = 950;	// default values
var viewportheight = 700;

// url - the url to show in the iframe
// width - width of the iframe
// height - height of the iframe
function showModalIFrame(url, width, height) {
	// if the width/height are set, reposition the floating layer
	var contentLayer = document.getElementById('ModalContentLayer');

	if (width > 0) {
		contentLayer.style['width'] = width + "px";
		contentLayer.style['margin'] = '0px 0px 0px ' + -(width / 2) + 'px';
	}

	if (height > 0) {
		getWindowSize();
		contentLayer.style['height'] = height + 'px';
		var top = (viewportheight - height) / 3;
		if (top < 10) {
			top = 10;
		}
		contentLayer.style['top'] = top + 'px';
	}

	// set the url of the iframe
	window.frames["ModalIFrame"].location = url;
	// make it all visible
	setModalIFrameVisible(true);

	if (ie) {
		var version = getIEVersion();
		if (version < 7) {
			// fixed position doesn't really work in IE6, so as a simple
			// workaround, we'll just scroll to the top. Uses will still
			// be able to scroll down and interact with the page, but this
			// gives the right effect.
			window.scrollTo(0, 0);
		}
	}
}

function isModalIFrameReady() {
	var contentLayer = document.getElementById('ModalContentLayer');
	return (contentLayer != null);
}

function getIEVersion() {
	// test for MSIE x.x;
	if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
		return new Number(RegExp.$1);
	}
	else {
		return -1;
	}
}

function setModalIFrameVisible(visible) {
	setLayerVisibility('ModalMatteLayer', visible);
	setLayerVisibility('ModalContentLayer', visible);
	if (!visible) {
		// when hiding, clear out the contents of the iframe
		window.frames["ModalIFrame"].location = "about:blank";
	}
}

function setLayerVisibility(id, visible) {
	layer = getLayer(id);
	var setVisible = visible ? "visible" : "hidden";
	if(nn4) {
	   layer.visibility = setVisible;
	}
	else {
	   layer.style.visibility = setVisible;
	}
}

function getLayer(id) {
	if(nn4) {
		path = document.layers[id]
	}
	else if(ie) {
		path = document.all[id]
	}
	else {
		path = document.getElementById(id)
	}
	return path  //return the path to the css layer depending on which browser is looking at the page
}

// Init ModalIFrame
// This function adds 2 divs to the body, one as the grayed out matte,
// and the other contains the iframe.
// To customize the iframe's decoration, modify inside ModalContentLayer.
function initModalIFrame() {
	// Add ModalMatteLayer to the end of the body:
	var newdiv = document.createElement('div');
	newdiv.setAttribute('id', 'ModalMatteLayer');
	document.body.appendChild(newdiv);

	// And add ModalContentLayer to the end of the body:
	newdiv = document.createElement('div');
	newdiv.setAttribute('id', 'ModalContentLayer');
	newdiv.innerHTML = "<iframe name='ModalIFrame' id='ModalIFrame' src='about:blank' width='100%' height='100%' style='border:1px solid #cccccc' frameborder='0' marginwidth='0' marginheight='0' scrolling='auto'></iframe>";
	document.body.appendChild(newdiv);
}

function getWindowSize() {
	// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerWidth,
		viewportheight = window.innerHeight
	}
	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
	else if (typeof document.documentElement != 'undefined' &&
			 typeof document.documentElement.clientWidth != 'undefined' &&
			 document.documentElement.clientWidth != 0)
	{
		viewportwidth = document.documentElement.clientWidth,
		viewportheight = document.documentElement.clientHeight
	}
	// older versions of IE
	else {
		viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		viewportheight = document.getElementsByTagName('body')[0].clientHeight
	}
}

// set onload function without being destructive
// see: addevent.js
Event.add(window, 'load', initModalIFrame);