function HoverMenu()
{
	// context of menu
	this.context = '';
	
	// div that represents menu context	
	this.menuDiv = null;

	// location on page
	this.top = '';
	this.left = '';

	// name of the css class 
	this.cssClassName = '';

	// name of the menu	and menu div
	this.name = '';
	
	// mutator methods for location on page
	this.setTop = function(_top)
	{
		this.top = _top;
	}	   

	this.setLeft = function(_left)
	{
		this.left = _left;
	}
					
	// mutator method for context
	this.setContext = function(_context)
	{
		this.context = _context;
	}

	this.getContext = function()
	{
		return this.context;
	}

	this.setName = function(_name)
	{
		this.name = _name;
	}
	
	this.getName = function()
	{
		return this.name;
	}

	// mutator method for css class name
	this.setCssClassName = function(_class)
	{
		this.cssClassName = _class;
	}

	this.close = function()
	{
		if (this.menuDiv != null)
		{
		
			HoverMenu.removeMenus(this.menuDiv.id);
			this.menuDiv = null;
		}
	}
	
	// displays menu with context
	this.display = function()
	{
		
		// make sure that the menu holder is null
		if (this.menuDiv == null)
		{	
			// create the menu holder
			this.menuDiv = document.createElement("div");
			
			// default css style
			this.menuDiv.className = this.cssClassName;
			this.menuDiv.setAttribute("name", this.getName());
			this.menuDiv.setAttribute("id", this.getName());
			// set its location for displaying
			this.menuDiv.style.top = this.top+ "px";
			this.menuDiv.style.left = this.left +  "px";
			
			this.menuDiv.innerHTML = this.getContext();

			// append it to document
			document.body.appendChild(this.menuDiv);

			
		}
	}


}


HoverMenu.removeMenus = function(name)
{

	var div = document.getElementById(name);
	if (div!=null)
	{
	
		div.style.display = "none";
		document.body.removeChild(div);
	}

}