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 getContentWidthHeight() {
	var viewportwidth;
 	var viewportheight;
 
 	// 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;
		
 	} else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0) {
	 	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
		viewportwidth = document.documentElement.clientWidth;
 		viewportheight = document.documentElement.clientHeight;
 	
	} else { // older versions of IE
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
       viewportheight = document.getElementsByTagName('body')[0].clientHeight;
 	}
 
 	return [viewportwidth, viewportheight];
}

function htmlPopup2(url, width, height) {
	var screenWidthHeight = getContentWidthHeight();
	var coor = getScrollXY();
	
	var frameWidth = 0;//11;
	var totalWidth = width + frameWidth + frameWidth;
	var closeButtonHeight = 22;
	
	height = height + closeButtonHeight;
	//overlay3 is the div frame
	if (0 < screenWidthHeight[0]-totalWidth) {
		document.getElementById('overlay3').style.left = (screenWidthHeight[0]-totalWidth)/2 + 'px';
	} else {
		document.getElementById('overlay3').style.left = '0px';
	}
	
	document.getElementById('overlay3').style.top = (coor[1] + screenWidthHeight[1]*0.05) + 'px';
	//document.getElementById('overlay3').style.width = totalWidth + 'px';
	//document.getElementById('overlay3').style.height = (screenWidthHeight[1]*0.9) + 'px';
        //document.getElementById('overlay3').style.height = (height) + 'px';
	
	//overlay2 is the opacity black transparent div
    document.getElementById('overlay2').style.left = 0 + 'px';
	document.getElementById('overlay2').style.top = 0 + 'px';
    document.getElementById('overlay2').style.width = screenWidthHeight[0] + 'px';
	//document.getElementById('overlay2').style.height = coor[1] + screenWidthHeight[1] + 'px';
        document.getElementById('overlay2').style.height = coor[1] + (1.2*screenWidthHeight[1]) + 'px';
	
	// the iframe
	document.getElementById('iframe').src = url;
	document.getElementById('iframe').style.width = (width) + 'px';
	//document.getElementById('iframe').style.height = (screenWidthHeight[1]*0.9-frameWidth-frameWidth-closeButtonHeight) + 'px';
        document.getElementById('iframe').style.height = (height-frameWidth-frameWidth-closeButtonHeight) + 'px';
	
	document.getElementById('overlay').style.display="block";
}

function closePopup2() {
    var inner = document.getElementById('overlay').innerHTML;

    document.getElementById('iframe').src = "";
    document.getElementById('overlay').innerHTML = "";
    document.getElementById('overlay').style.display = "none";
    document.getElementById('overlay').innerHTML = inner;
}