var xWithScroll=0;
var yWithScroll=0;

var modalWindow=null;
var modalBackground=null;//it is an image
var agt=navigator.userAgent.toLowerCase();
var is_ie6    = (agt.indexOf("msie 6.")!=-1);
var modalImg=new Image();
modalImg.src='http://www.wiziq.com/images/trans.JPG';

var _rulesAdded = false;

function hidden()
{document.body.style.overflow='hidden';}
function unhidden()
{document.body.style.overflow='';}

function PopupShow(_modalWindow,_modalBackground)
{


    modalWindow=_modalWindow;
    modalBackground=_modalBackground;
    //set image
    $(modalBackground).src=modalImg.src;
    $(modalBackground).style.filter='alpha(opacity=40)';
    
	$(modalWindow).style.display = 'block';
	$(modalBackground).style.display = 'block';


	// call once to center everything
	OnWindowResize();
	
	if (window.attachEvent)
	{
		window.attachEvent("onresize",OnWindowResize);
		//alert("window.attachEvent");
		}
	else if (window.addEventListener)
	{
		window.addEventListener('resize', OnWindowResize, false);
		//window.addEventListener('scroll', OnWindowResize,false);
		//alert("window.addEventListener");
		}
	else
	{
		window.onresize = OnWindowResize;
		//alert("window.onresize");
		}
	
	// we won't bother with using javascript in CSS to take care
	//   keeping the window centered
	if (document.all && is_ie6)
	{
	var div = $(modalWindow);
	div.style.position="absolute";
		document.documentElement.onscroll = OnWindowResize;
		}
}

function OnWindowResize()
{

	// we only need to move the dialog based on scroll position if
	//   we're using a browser that doesn't support position: fixed, like < IE 7
	var left = window.XMLHttpRequest == null ? document.documentElement.scrollLeft : 0;
	var top =  window.XMLHttpRequest == null ? document.documentElement.scrollTop :  0;//document.body.scrollTop;
	//var top=document.documentElement.scrollTop;
	//if Browser is IE6 and  page contains 'asp:ScriptManager'
	//
	
	if (typeof Sys != 'undefined' && is_ie6)
	top = document.documentElement.scrollTop;
	var div = $(modalWindow);
		
	div.style.left = Math.max((left + (GetWindowWidth() - div.offsetWidth) / 2), 0) + 'px';
	
	 if(is_ie6)
	    div.style.top = Math.max((top + (GetWindowHeight() - div.offsetHeight) / 2), 0) + 'px';
	 else
	  	div.style.top = Math.max((top + (GetWindowHeight() - div.offsetHeight) / 2), 0) + 'px';
	
	
    getPageSizeWithScroll();

    var div_modalBackground = $(modalBackground);

	 if(!is_ie6)
	 {
	    if (!document.all)
	        div_modalBackground.style.height =yWithScroll+'px';// Math.max((yWithScroll), 0) + 'px';
	    else
	        div_modalBackground.style.height =yWithScroll+30;
	}
	
}
function getPageSizeWithScroll(){
	if (window.innerHeight && window.scrollMaxY) {// Firefox
		yWithScroll = window.innerHeight + window.scrollMaxY;
		//xWithScroll = window.innerWidth + window.scrollMaxX;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		yWithScroll = document.body.scrollHeight;
		xWithScroll = document.body.scrollWidth;
	} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
		yWithScroll = document.body.offsetHeight;
	//	xWithScroll = document.body.offsetWidth;
  	}
	arrayPageSizeWithScroll = new Array(xWithScroll,yWithScroll);
	//alert( 'The height is ' + yWithScroll + ' and the width is ' + xWithScroll );
	//return arrayPageSizeWithScroll;
}

function PopupClose()
{
	$(modalWindow).style.display = 'none';
	$(modalBackground).style.display = 'none';

	
	if (window.detachEvent)
		window.detachEvent('onresize', OnWindowResize);
	else if (window.removeEventListener)
		window.removeEventListener('resize', OnWindowResize, false);
	else
		window.onresize = null;
}




/* The following two functions are not used, but have been kept here because 
 *   they might be useful; one must use this method to programmatically add
 *   javascript-valued CSS values (using element.style.div = expresssion(...)
 *   does not work).  These are only useful for IE.
 */

function AddStyleRules()
{
	if (_rulesAdded)
		return;
		
	_rulesAdded = true;

	var stylesheet = document.styleSheets[document.styleSheets.length - 1];
	
	if (!document.all)
	{
		InsertCssRule(stylesheet, '#modalBackground', 'position: fixed; height: 100%; width: 100%; left: 0; top: 0;');		
		InsertCssRule(stylesheet, '#modalWindow', 'position: fixed; left: 0; top: 0;');		
	}
	else
	{
		InsertCssRule(stylesheet, '#modalBackground', 
			'position: absolute; ' +
			'left: expression(ignoreMe = document.documentElement.scrollLeft + "px"); ' +
			'top: expression(ignoreMe = document.documentElement.scrollTop + "px");' +
			'width: expression(document.documentElement.clientWidth + "px"); ' +
			'height: expression(document.documentElement.clientHeight + "px");');

		InsertCssRule(stylesheet, '#modalWindow', 
			'position: absolute; ' +
			'left: expression(ignoreMe = document.documentElement.scrollLeft + "px"); ' +
			'top: expression(ignoreMe = document.documentElement.scrollTop + "px");');

	}
}

function InsertCssRule(stylesheet, selector, rule)
{
	if (stylesheet.addRule)
	{
		stylesheet.addRule(selector, rule, stylesheet.rules.length);
		return stylesheet.rules.length - 1;
	}
	else
	{
		stylesheet.insertRule(selector + ' {' + rule + '}', stylesheet.cssRules.length);
		return stylesheet.cssRules.length - 1;
	}
}



/* utiltiy functions */

function GetWindowWidth()
{
	var width =
		document.documentElement && document.documentElement.clientWidth ||
		document.body && document.body.clientWidth ||
		document.body && document.body.parentNode && document.body.parentNode.clientWidth ||
		0;
		
	return width;
}

function GetWindowHeight()
{
    var height =
		document.documentElement && document.documentElement.clientHeight ||
		document.body && document.body.clientHeight ||
  		document.body && document.body.parentNode && document.body.parentNode.clientHeight ||
  		0;
  		
  	return height;
}

function $(id)
{
	return document.getElementById(id);
}