Dropdown list using an IFrame

// Popup.js
// Author: William Su

var V=parseInt(navigator.appVersion);
var B=(navigator.userAgent+navigator.appName).toLowerCase();
var NS4=(B.indexOf("netscape")!=-1&&V==4);
var IE=(B.indexOf("microsoft")!=-1);
var parentInputBox = null;
var parentImage = null;
var PopupDivId = 'Popup';
var PopupIFrameId = 'PopupIFrame';

document.write("<iframe id='PopupIFrame' src='javascript:false' frameBorder='0' scrolling='no'></iframe>");
document.write("<div id='Popup'></div>");

if(!NS4) window.onresize=function()
{
	if(parentInputBox)
	{
		HidePopup();
	}		
}

function iecompattest()
{
	return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

if(!NS4) document.onmouseup=function(e)
{
	if(parentInputBox)
	{
		var inputBoxPos = new Position(parentInputBox);
		var linkPos = new Position(parentImage);
		var PopupPos = new Position(PopupDivId);		

		var x = PopupPos.GetElementLeft();
		var y = PopupPos.GetElementBottom();

		var x = inputBoxPos.GetElementLeft();
		var y = inputBoxPos.GetElementBottom();

		var top=document.all && !window.opera? iecompattest().scrollTop : window.pageYOffset;
		var windowedge=document.all && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight : window.pageYOffset+window.innerHeight;

		if(y + PopupPos.GetElementHeight() > windowedge)
		{
			var z = inputBoxPos.GetElementTop() - PopupPos.GetElementHeight();
			if(z >= top)
				y = z;
		}	
					
		var width = PopupPos.GetElementWidth();
		var height = PopupPos.GetElementHeight();

		var lx = linkPos.GetElementLeft();
		var ly = linkPos.GetElementTop();
		var lwidth = linkPos.GetElementWidth();
		var lheight = linkPos.GetElementHeight();

		var pageX, pageY;
		if (window.event)
		{
			e = window.event;
			pageX = e.clientX;
			pageY = e.clientY;
		}	    
		else
		{
			pageX = e.pageX;
			pageY = e.pageY;
		}		
		if(!((pageX >= x && pageY >= y && pageX < x+width && pageY < y+height) || (pageX >= lx && pageY >= ly && pageX < lx+lwidth && pageY < ly+lheight)))
			HidePopup();			
	}		
}

function Position(object)
{
	var m_elem = object;

	this.GetElementWidth = GetElementWidth;
	function GetElementWidth()
	{
		var elem;
		if(typeof(m_elem) == "object")
		{
			elem = m_elem;
		}
		else
		{
			elem = document.getElementById(m_elem);
		}
		return parseInt(elem.offsetWidth);
	}

	this.GetElementHeight = GetElementHeight;
	function GetElementHeight()
	{
		var elem;
		if(typeof(m_elem) == "object")
		{
			elem = m_elem;
		}
		else
		{
			elem = document.getElementById(m_elem);
		}
		return parseInt(elem.offsetHeight);
	}

	this.GetElementLeft = GetElementLeft;
	function GetElementLeft()
	{
		var x = 0;
		var elem;		
		if(typeof(m_elem) == "object")
			elem = m_elem;
		else
			elem = document.getElementById(m_elem);
			
		while (elem != null)
		{
			x += elem.offsetLeft;
			elem = elem.offsetParent;
		}
		return parseInt(x);
	}
	
	this.GetElementRight = GetElementRight;
	function GetElementRight()
	{
		return GetElementLeft(m_elem) + GetElementWidth(m_elem);
	}

	this.GetElementTop = GetElementTop;
	function GetElementTop()
	{
		var y = 0;
		var elem;
		if(typeof(m_elem) == "object")
		{
			elem = m_elem;
		}
		else
		{
			elem = document.getElementById(m_elem);
		}
		while (elem != null)
		{
			y+= elem.offsetTop;
			elem = elem.offsetParent;
		}
		return parseInt(y);
	}

	this.GetElementBottom = GetElementBottom;
	function GetElementBottom()
	{
	    return GetElementTop(m_elem) + GetElementHeight(m_elem);
	}
}

function Popup()
{
	var Desc = 0;

	function SetElementProperty(elemId, property, value)
	{
		var elem = null;

		if(typeof(elemId) == "object")
			elem = elemId;
		else
			elem = document.getElementById(elemId);
			
		if((elem != null) && (elem.style != null))
		{
			elem = elem.style;
			elem[property] = value;
		}
	}

	this.Sort = Sort;
	function Sort(change)
	{
		Desc = change;
		Popup = document.getElementById(PopupDivId);
		Popup.innerHTML = PopupInnerHTML();
	}

	this.SelectFont = SelectFont;
	function SelectFont(value)
	{	    
		parentInputBox.value = value; 
		Hide();
		return;
	}


	function PopupInnerHTML()
	{
	    var table = "<table width=150 cellspacing='0' cellpadding='3' border='0'>";
		table += "<tr class='header'>";
	    table += "  <td align='center' nowrap>";	        
	    table += "<a href='javascript:Sort(0);' class='linkText'>A->Z</a>&nbsp;&nbsp;";
	    table += "<a href='javascript:Sort(1);' class='linkText'>Z->A</a>&nbsp;&nbsp;";
	  	table += "<a href='javascript:HidePopup();' class='linkText'>Cancel</a>";
		table+="</td></tr><tr><td>";
		if(Desc == 0)
		{
			table+="<a href='javascript:SelectFont(\"cursive\");' class='cursive'>cursive</a><br>";
			table+="<a href='javascript:SelectFont(\"fantasy\");' class='fantasy'>fantasy</a><br>";
			table+="<a href='javascript:SelectFont(\"monospace\");' class='monospace'>monospace</a><br>";
			table+="<a href='javascript:SelectFont(\"sans-serif\");' class='sans-serif'>sans-serif</a><br>";
			table+="<a href='javascript:SelectFont(\"serif\");' class='serif'>serif</a>";
		}
		else
		{
			table+="<a href='javascript:SelectFont(\"serif\");' class='serif'>serif</a><br>";
			table+="<a href='javascript:SelectFont(\"sans-serif\");' class='sans-serif'>sans-serif</a><br>";
			table+="<a href='javascript:SelectFont(\"monospace\");' class='monospace'>monospace</a><br>";
			table+="<a href='javascript:SelectFont(\"fantasy\");' class='fantasy'>fantasy</a><br>";
			table+="<a href='javascript:SelectFont(\"cursive\");' class='cursive'>cursive</a>";
		}
		table+="</td></tr></table>";
		return table;
	}

	this.Show = Show;
	function Show(inputBox, img)
	{
		// If the Popup is visible, hide it.		
		if (parentInputBox == inputBox)
		{
			return;
		}			
		else
		{
			parentInputBox = inputBox;
			parentImage = img;
		}			
		

		if(document.getElementById)
		{
			Popup = document.getElementById(PopupDivId);
			Popup.innerHTML = PopupInnerHTML();
			
			// Fixed some Windows and IE problems
			if(B.indexOf("win")!=-1 && IE)
				SetElementProperty(PopupIFrameId, 'display', 'block');
      
			SetElementProperty(PopupDivId, 'display', 'block');
			var inputBoxPos = new Position(parentInputBox);
			var PopupPos = new Position(PopupDivId);

			var x = inputBoxPos.GetElementLeft();
			var y = inputBoxPos.GetElementBottom();
			
			var top=document.all && !window.opera? iecompattest().scrollTop : window.pageYOffset;
			var windowedge=document.all && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight : window.pageYOffset+window.innerHeight;

			if(y + PopupPos.GetElementHeight() > windowedge)
			{
				var z = inputBoxPos.GetElementTop() - PopupPos.GetElementHeight();
				if(z >= top)
					y = z;
			}				

			SetElementProperty(PopupDivId, 'left', x + "px");
			SetElementProperty(PopupDivId, 'top', y + "px");
			SetElementProperty(PopupIFrameId, 'left', x + "px");
			SetElementProperty(PopupIFrameId, 'top', y + "px");
			SetElementProperty(PopupIFrameId, 'width', PopupPos.GetElementWidth() + "px");
			SetElementProperty(PopupIFrameId, 'height', PopupPos.GetElementHeight() + "px");
		}

	}

	this.Hide = Hide;
	function Hide()
	{
		if(parentInputBox)
		{
			SetElementProperty(PopupDivId, 'display', 'none');
			SetElementProperty(PopupIFrameId, 'display', 'none');
			parentInputBox = null;
		}
	}
}

var PopupWin = new Popup();

function ShowPopup(inputBox, imgDropDown)
{

	if(parentInputBox == null)
		PopupWin.Show(inputBox, imgDropDown);
	else
		PopupWin.Hide();
}

function HidePopup()
{
	PopupWin.Hide();
}

function SelectFont(value)
{
	PopupWin.SelectFont(value);
}

function Sort(change)
{
	PopupWin.Sort(change);
}