/*/////////////////////////////////////////////////////////////////////////////

	DHTML Menu System
	
	This java script program implements configurable, vertical or horizontal cascading menus and is
	designed to use css classes and/or images for all menu cells.
	There are two javascript classes defined below, MenuController and MenuItem. MenuItems can be organized 
	into dynamically opening submenus to an arbitrary depth.

	Example usage:
	
		var Menu = new MenuController(0,"MenuTable","MainMenuItemForeground","MainMenuItemHover",
			"SubMenuTable",	"SubMenuItemForeground","SubMenuItemHover",
			"http://www.dogwoodacres.com/js/arrow_down.gif","http://www.dogwoodacres.com/js/arrow_right.gif")
			
		The arguments are: 
		1) 0=horizontal, 1=vertical
		2) table style class for table that encloses the entire menu
		3) column style class for normal top level menu item
		4) column style class for hovering over top level menu item
		5) table style class for table that encloses any submenus
		6) column style class for normal submenu item (optional,defaults to top level style)
		7) column style class for hovering over submenu item (optional, defaults to top level style)
		8) background image that is right-aligned behind items with no submenu (optional)
		9) background image that is right-aligned behind items with a submenu (optional)
		
	You can create as many menu controllers as you like if you want more than one menu on a page. Just assign 
	them to differnet variables.
	To add menu items, use:
	
		Menu.addMenuItem (1, 0, "index.htm","First First", "/images/navhome.gif", "/images/navhome_over.gif")
	
		The arguments are: 
		1) unique menu item number
		2) number of the parent menu item (or 0 if its at the top level)
		3) new URL if this is clicked on (Use an empty string if you don't want a link from here.)
		4) text displayed on the menu item
		5) image displayed normally (optional - text will not show if this is used)
		6) image displayed when mouse is hovering over it. (optional)
	
	You can set these up with inline java script in the header sections or from a linked file, and then insert this in
	the html where you want the menu to appear:
	
	<script language="JavaScript">
<!--
	Menu.drawMenu();
//-->
	</script>
	
	You can modify many display characteristics for different submenus or even individual menu items, using these commands
	before the menu is drawn but after the menu items are defined with the addMenuItem command above:
	
		Menu.menuItem[1].submenuHAlign="left" (or "center" or "right")
	This will align the submenu that opens from menu item 1 with the left of its display text or image.
	
		Menu.menuItem[1].submenuVAlign="top" (or "middle" or "bottom")
	This will align the submenu that opens from menu item 1 with the top of its display text or image.
	
		Menu.menuItem[1].submenuX = 5
		Menu.menuItem[1].submenuY = -4
	These will offset the submenu by 5 pixels to the right and 4 up.
	
		Menu.menuItem[1].addOnPageImage("contact.html,request.html","/images/navcontact.gif","/images/navcontact_over.gif")
	This will display the special images if you are currently on one of the pages in the first argument. Third arg is optional.
	
		Menu.menuItem[1].addOnPageStyle("contact.html,request.html","normalClass","hoverClass")
	This will display the special classes if you are currently on one of the pages in the first argument. Third arg is optional.
	
		Menu.menuItem[2].submenuWidth=150
	This will force a minimum width on the submenu that opens from menu item 2.
	
		Menu.menuItem[2].setSubmenuStyle("MainMenuItemHover", "MainMenuItemForeground")
	This will override the style classes for the entire submenu that opens from menu item 2.
	
		Menu.menuItem[21].normalClass="MainMenuItemForeground"
		Menu.menuItem[21].hoverClass="MainMenuItemHover"
		Menu.menuItem[21].normalImage="/images/navcontact.gif"
		Menu.menuItem[21].hoverImage="/images/navcontact_over.gif"
		
	For the ultimate in control, these last commands set the class or image for an individual menu item, in this case item 21.
	
		Menu.menuItem[13].popup = true
		Menu.menuItem[13].popupArgs = "scrolling stuff, etc"
	This will force the URL to load in a new page, using whatever argument string you want that is passed directly in to the
	java script window.open command.

 	by Ken Otwell, 2005
*//////////////////////////////////////////////////////////////////////////////displayThisObject(navigator, 'navigator')
//Remove this method if using Rob's jscripts.js script.
//function popUp(url,title,args)
//{
//	window.open(url,title,args)
//}

//Utility vars
var vdsmDelayTimer
var vdsmDelayMilliseconds=500
var vdsmMenuItemOut
var vdsmMenuArray=[]
var vdsmDebug=false
//displayThisObject(navigator, 'navigator') 
//Browser-specific vars and functions go here.
//Get the crappy part out of the way first.
var browserXOffset = 0
var browserYOffset = 0
//confirm(navigator.userAgent)
if(navigator.userAgent.indexOf('MSIE')>=0 && navigator.platform.indexOf('Mac')>=0)
{
	browserYOffset = -32
}
var	vdsmDOM=document.getElementById
var vdsmNS4=document.layers
var vdsmIE=document.all
var vdsmUnkBrowser=false
var vdsmLayerRef,vdsmStyleSwitch,vdsmVisibleVar
if (vdsmNS4)
{ 
	vdsmLayerRef="document.layers"
	vdsmStyleSwitch=""
	vdsmVisibleVar="show"
} 
else if(vdsmIE)
{ 
	vdsmLayerRef="document.all"
	vdsmStyleSwitch=".style"
	vdsmVisibleVar="visible"
} 
else if(vdsmDOM)
{ 
	vdsmLayerRef="document.getElementByID"
	vdsmStyleSwitch=".style"
	vdsmVisibleVar="visible"
} 
else
{ 
	vdsmUnkBrowser = true
}

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

function getDOMElementFromID(ID)
{    
	if(vdsmDOM)return document.getElementById(ID)
	if(vdsmNS4)return document.layers[ID]
	else return document.all[ID]
}
function showDiv(divID)
{ 
	if (vdsmUnkBrowser)
	{ 
		return 
	} 
	else if (vdsmDOM)
	{ 
		document.getElementById(divID).style.visibility=vdsmVisibleVar
		document.getElementById(divID).style.display = 'block'
	}
	else
	{ 
		eval(vdsmLayerRef+'["'+divID+'"]'+vdsmStyleSwitch+'.visibility="'+vdsmVisibleVar+'"')
		eval(vdsmLayerRef+'["'+divID+'"]'+vdsmStyleSwitch+'.display="block"')
	}
} 
function hideDiv(divID)
{ 
	if (vdsmUnkBrowser)
	{ 
		return; 
	} 
	else if (vdsmDOM)
	{ 
		document.getElementById(divID).style.visibility="hidden"
		document.getElementById(divID).style.display = 'none'
	}
	else
	{ 
		eval(vdsmLayerRef+'["'+divID+'"]'+vdsmStyleSwitch+'.visibility="hidden"')
		eval(vdsmLayerRef+'["'+divID+'"]'+vdsmStyleSwitch+'.display="none"')
	}
} 
////////////////////////////////////////////
// Objects Followed by their methods
////////////////////////////////////////////

// One MenuItem will be created for each 'button'.
// This creation method should only be called from MenuController.addMenuItem().

function MenuItem ()
{
//	Parse the argument array manually to enable optional args at end.
//	Note: There are no breaks inside of the switch statement to allow fall-through processing.
	var alength = (arguments.length>7)?7:arguments.length
	switch(alength)
	{
		case 7:
			this.hoverImage = arguments[6]
			//remove any leading periods in image URL
			while(this.hoverImage.length>0 && this.hoverImage.charAt(0)=='.') 
			{
				this.hoverImage=this.hoverImage.substring(1,this.hoverImage.length);
			}
		case 6:
			this.normalImage = arguments[5]
		case 5:
			this.label = arguments[4]
			while(this.label.indexOf(" ") >=0){this.label = this.label.replace(" ","&nbsp;")}
		case 4:
			this.url = arguments[3]
		case 3:
			this.parentID = arguments[2]
		case 2:
			this.id = arguments[1]
		case 1:
			this.menu = vdsmMenuArray[arguments[0]]
	}
	this.classHolder = "menu_"+this.menu.id+"_"+this.id
	this.layerNumber = 0
	this.popup = false
	this.popupArgs = ""
	this.children = []
	this.isSpotLit = false
	this.submenuWidth = 1
	this.submenuHAlign = "left"
	this.submenuVAlign = "top"
	this.submenuX = 0
	this.submenuY = 0
	this.submenuHtml = ""
}

//Add special images to appear only on certain pages for this menu item
function addOnPageImage(onPageURL,onPageImageNormal)
{
	if(!this._onPageCheck(onPageURL)) return
	
	while(onPageImageNormal.length>0 && onPageImageNormal.charAt(0)=='.') 
	{
		onPageImageNormal=onPageImageNormal.substring(1,onPageImageNormal.length);
	}
	this.normalImage = onPageImageNormal

	if(arguments.length>=3)
	{
		var onPageImageHover = arguments[2]
		while(onPageImageHover.length>0 && onPageImageHover.charAt(0)=='.') 
		{
			onPageImageHover=onPageImageHover.substring(1,onPageImageHover.length);
		}
		this.hoverImage = onPageImageHover
	}
}
MenuItem.prototype.addOnPageImage = addOnPageImage;

//Add special style classes to appear only on certain pages for this menu item
function addOnPageStyle(onPageURL,onPageNormalClass)
{
	if(!this._onPageCheck(onPageURL)) return
	
	this.normalClass = onPageNormalClass
	
	if(arguments.length>=3)
	{
		this.hoverClass = arguments[2]
	}
}
MenuItem.prototype.addOnPageStyle = addOnPageStyle;

//Cascade this setting down one level of menu items
function setSubmenuStyle(normalClass, hoverClass)
{
	for(var i in this.children)
	{
		this.children[i].normalClass = normalClass
		this.children[i].hoverClass = hoverClass
	}
}
MenuItem.prototype.setSubmenuStyle = setSubmenuStyle;

// Set this dynamically only after menu DOM objects have been created
function _setSubmenuWidth(width)
{
	for(var i in this.children)
	{
		var tag = getDOMElementFromID(this.children[i].classHolder)
		if(!tag || tag=="") continue
		tag.width=width
		if(tag.style)tag.style.width=width
	}
}
MenuItem.prototype._setSubmenuWidth = _setSubmenuWidth;

//only one menu tree is used, no siblings. Just reset contents and reposition as needed.
function _openSubmenu(trigger)
{
	this._closeSubmenu()
	if(this.children.length==0) return false
	if(vdsmDebug)confirm("Opensubmenu from "+this.id)
	
	//Here's the magic positioning stuff.
	//Start with any desired offsets...
	var leftpos = this.submenuX + browserXOffset
	var toppos = this.submenuY + browserYOffset
	//Then, basically, add up all the offsets of your parent dom objects.
	var aTag = trigger
	do {
//confirm("tag offsets: " + aTag.offsetLeft + " " + aTag.offsetTop)
		leftpos += aTag.offsetLeft;
		toppos += aTag.offsetTop;
		aTag = aTag.offsetParent;
	} while(aTag);//while(aTag.tagName.toLowerCase()!="body");
	var layerName = this.menu.layerName[this.layerNumber]
	var layer = getDOMElementFromID(layerName)
	
	//Now adjust final placement based on menu orientation
	if ((this.menu.isVertical)||(this.parentID>0))
	{
		layer.top = toppos - 1
		layer.left = leftpos + trigger.offsetWidth 
	}
	else 
	{
		layer.top = toppos + trigger.offsetHeight 
		layer.left = leftpos 
	}

	this._setSubmenuWidth(this.submenuWidth)
	layer.innerHTML = this.submenuHtml
	//Have to show the div first for browser to compute the width, then quickly realign it if needed.
	showDiv(layerName)
	var xoff = 0, yoff=0
	switch(this.submenuHAlign.toLowerCase())
	{
		//"left" is default, nothing needed
		case "center":
		xoff += (trigger.offsetWidth  - layer.firstChild.offsetWidth) / 2
		break
		case "right":
		xoff += (trigger.offsetWidth  - layer.firstChild.offsetWidth)
	}
	if(xoff!=0)
	{
		layer.left += xoff
	}
	switch(this.submenuVAlign.toLowerCase())
	{
		//"top" is default, nothing needed
		case "middle":
		yoff += (trigger.offsetHeight  - layer.firstChild.offsetHeight) / 2
		break
		case "bottom":
		yoff += (trigger.offsetHeight  - layer.firstChild.offsetHeight)
	}
	if(yoff!=0)
	{
		layer.top += yoff
	}
	//copy position coordinates up to to the style object for some browsers
	if(layer.style)
	{
		layer.style.top = layer.top + "px" // Firefox REQUIRES the 'px'!!
		layer.style.left = layer.left + "px"
	}
}
MenuItem.prototype._openSubmenu = _openSubmenu;

function _closeSubmenu()
{
	if(vdsmDebug)confirm("closing layer "+this.menu.layerName[this.layerNumber]+" at "+this.layerNumber)
	for (var cnt=this.menu.numLayers-1; cnt>=this.layerNumber;cnt--)
	{
		hideDiv(this.menu.layerName[cnt])
	}
}
MenuItem.prototype._closeSubmenu = _closeSubmenu;

function _getMenuItemHtml()
{
	var sHTML = "",itemStyle = "style=\""

	if ((this.menu.isVertical)||(this.layerNumber>0))
	{
		sHTML = "<tr>"
	}	
		
	if(this.menu.simpleBgImage && this.children.length==0)
		itemStyle += "background-image: url('"+this.menu.simpleBgImage+"'); background-repeat: no-repeat; background-position: 100% 50%\""
	else if(this.menu.expandBgImage && this.children.length>0)
		itemStyle += "background-image: url('"+this.menu.expandBgImage+"'); background-repeat: no-repeat; background-position: 100% 50%\""
	else
		itemStyle += "\""
		
	sHTML += "<td id='"+this.classHolder+"' class='"+this.normalClass+"' "+itemStyle
	
	if(this.normalImage && this.normalImage.length>0)
	{
		sHTML += "><img id=\""+this._getImageName()+"\" alt=\""+this.label+"\" src=\""+this.normalImage+"\" style=\"cursor: pointer;\" "
		sHTML += this._getMouseBehavior()
	}
	else
	{
		sHTML += this._getMouseBehavior()
		sHTML += this.label
	}
	
	sHTML += "</td>"

	if ((this.menu.isVertical)||(this.layerNumber>0))
	{
		sHTML += "</tr>"
	}	
	return sHTML
}
MenuItem.prototype._getMenuItemHtml = _getMenuItemHtml;

//Wrap submenu items in their own table
function _getSubmenuHtml()
{
	if(this.children.length==0) return ""
	var sHTML="<table class='"+this.menu.submenuTableClass+"' cellspacing=0 cellpadding=0>"
	for (var i in this.children) 
		sHTML += this.children[i]._getMenuItemHtml()
	sHTML += "</table>"
	return sHTML
}
MenuItem.prototype._getSubmenuHtml = _getSubmenuHtml;

//create java script mouse behavior as needed
function _getMouseBehavior()
{
	var html = " onmouseover='javascript:processMenuItemHover("+this.menu.id+","+this.id+",this)'"
	if(this.url!="")
	{
		if(this.popup)
		{
			html += " onclick='javascript:popUp(\""+this.url+"\",\"\",\""+this.popupArgs+"\")'"
		}
		else
		{
			html += " onclick='javascript:document.location.href=\""+this.url+"\"'"
		}
	}
	html += " onmouseout='javascript:processMenuItemExit("+this.menu.id+","+this.id+")'>"
	return html
}
MenuItem.prototype._getMouseBehavior = _getMouseBehavior;

//Change image or class for mouse-over highlighting
function _spotlightMe()
{	
	this.isSpotLit = false
	if(vdsmDebug)confirm("SpotlightMe "+this.id)
	this.menu.nowAt=this
	var checkItems, image
	if (this.layerNumber>0)
	{
		checkItems=this.menu.menuItem[this.parentID].children
	}
	else
	{
		checkItems=this.menu.menuItem
	}
	for (var i in checkItems) 
	{
		if(checkItems[i].isSpotLit) checkItems[i]._killMySpotlight()
	}

	this.isSpotLit = true
	image = getDOMElementFromID(this._getImageName())
	if(image && image != "")
	{
		if(vdsmDebug)confirm("Setting to image "+this.hoverImage)
		image.src=this.hoverImage
	}
	if(this.hoverClass && this.normalClass)changeClass(this.classHolder,this.hoverClass);
}
MenuItem.prototype._spotlightMe = _spotlightMe;

//Change image or class when mouse-over highlighting goes away
function _killMySpotlight()
{
	this.isSpotLit = true
	if(vdsmDebug)confirm("_killMySpotlight from "+this.id)
	this._closeSubmenu()
	this.isSpotLit = false
	image = getDOMElementFromID(this._getImageName())
	if(image && image!="")
	{
		image.src=this.normalImage
	}
	if(this.hoverClass && this.normalClass)changeClass(this.classHolder,this.normalClass)
	if(this.menu.nowAt==this)this.menu.nowAt=""
}
MenuItem.prototype._killMySpotlight = _killMySpotlight;

//check to see if the browser is on a special page for using a special image or style class
function _onPageCheck(onPageURL)
{
	var URLArray = onPageURL.split(",") 
	for (var i in URLArray)
	{
		var URL = URLArray[i]
		while(URL.length>0 && URL.charAt(0)=='.') 
		{
			URL=URL.substring(1,URL.length);
		}
		if(window.location.href.indexOf(URL) >= 0)
		{
			return true
		}
	}
	return false
}
MenuItem.prototype._onPageCheck = _onPageCheck;

function _getImageName()
{
	return this.classHolder+"_image"
}
MenuItem.prototype._getImageName = _getImageName;

// One MenuController should be created for each separate menu if multiple menus are needed
function MenuController ()
{
//	Parse the argument array manually to enable optional args at end.
//	Note: There are no breaks inside of the switch statement to allow fall-through processing.
	var alength = (arguments.length>9)?9:arguments.length
	switch(alength)
	{
		case 9:
		this.expandBgImage = arguments[8]
		case 8:
		this.simpleBgImage = arguments[7]
		case 7:
		this.submenuClassHover = arguments[6]
		case 6:
		this.submenuClassNormal = arguments[5]
		case 5:
		this.submenuTableClass = arguments[4]
		case 4:
		this.hoverClass = arguments[3]
		case 3:
		this.normalClass = arguments[2]
		case 2:
		this.menuTableClass= arguments[1]
		case 1:
		this.isHorizontal = arguments[0]==0
		this.isVertical = arguments[0]==1
	}
	if(!this.submenuClassHover)this.submenuClassHover = this.hoverClass
	if(!this.submenuClassNormal)this.submenuClassNormal = this.normalClass
	this.menuItem = []
	this.numLayers = 0
	this.layerName = []
	this.id = vdsmMenuArray.length
	vdsmMenuArray[this.id] = this	
	this.nowAt=""
}

//	This is the only method that should create MenuItems
function addMenuItem ()
{
	var newMenuItem
	var id,parentID=0,url=""
	var label="", normalImage=false, hoverImage=false
	var alength = (arguments.length>6)?6:arguments.length
	switch(alength)
	{
		case 6:
			hoverImage = arguments[5]
		case 5:
			normalImage = arguments[4]
		case 4:
			label = arguments[3]
		case 3:
			url = arguments[2]
		case 2:
			parentID = arguments[1]
		case 1:
			id = arguments[0]
	}
	switch(alength)
	{
		case 6:
			newMenuItem = new MenuItem (this.id, id, parentID, url, label, normalImage, hoverImage)
			break
		case 5:
			newMenuItem = new MenuItem (this.id, id, parentID, url, label, normalImage)
			break
		case 4:
			newMenuItem = new MenuItem (this.id, id, parentID, url, label)
			break
		case 3:
			newMenuItem = new MenuItem (this.id, id, parentID, url)
			break
		case 2:
			newMenuItem = new MenuItem (this.id, id, parentID)
			break
		case 1:
			newMenuItem = new MenuItem (this.id, id)
	}
	if (parentID==0) 
	{
		newMenuItem.layerNumber = 0
		newMenuItem.normalClass = this.normalClass
		newMenuItem.hoverClass = this.hoverClass
	}
	else
	{
		var parent = this.menuItem[parentID];
		parent.children[id] = newMenuItem
		newMenuItem.layerNumber = parent.layerNumber + 1
		if (this.numLayers < newMenuItem.layerNumber)
		{	
			this.numLayers = newMenuItem.layerNumber
		}
		newMenuItem.normalClass = this.submenuClassNormal
		newMenuItem.hoverClass = this.submenuClassHover
	}	
	this.menuItem[id] = newMenuItem
	return newMenuItem
}
MenuController.prototype.addMenuItem = addMenuItem;

function drawMenu ()
{
	for (var i=0; i<this.numLayers ; i++)
	{
		this._createSubLayer(i)
	}
	var sHTML="<table class='"+this.menuTableClass+"' cellspacing=0 cellpadding=0>"
	if(this.isHorizontal) sHTML += "<tr>"
	for (var i in this.menuItem) 
	{
		var menuItem = this.menuItem[i]
		if(menuItem.parentID==0)
		{		
			sHTML += menuItem._getMenuItemHtml()
		}
		menuItem.submenuHtml = menuItem._getSubmenuHtml()
	}
	if(this.isHorizontal) sHTML += "</tr>"
	sHTML += "</table>"
	document.writeln(sHTML)
}
MenuController.prototype.drawMenu = drawMenu;

function _createSubLayer (layerNumber)
{
	this.layerName[layerNumber]="menu_content_"+this.id+"_"+layerNumber
	var sHTML = "<div ONCLICK='event.cancelBubble=true' id='"+this.layerName[layerNumber]
	sHTML +="' style='z-index:100;position:absolute;'>"
	sHTML +="<span id='"+this.layerName[layerNumber]+"_content'></span></div>"
	document.write(sHTML)
	hideDiv(this.layerName[layerNumber])
}
MenuController.prototype._createSubLayer = _createSubLayer;

function _checkDeadItems()
{
	var limit = (this.nowAt==null)?0:this.nowAt.layerNumber
	if(vdsmDebug)confirm("checking the dead at "+limit)
	for (var cnt = limit;cnt<this.numLayers;cnt++)
		hideDiv(this.layerName[cnt])
	this._reset()
}
MenuController.prototype._checkDeadItems = _checkDeadItems

function _reset()
{
	var menuItem,image
	for (var cnt=this.numLayers-1;cnt>=0; cnt--)
	{
		hideDiv(this.layerName[cnt])
	}
	for (var i in this.menuItem) 
	{
		menuItem = this.menuItem[i]
		if(menuItem.layerNumber==0)
		{
			changeClass(menuItem.classHolder,menuItem.normalClass);
			this.isSpotLit = false
			image = getDOMElementFromID(menuItem.classHolder+"_image")
			if(image && image!="")image.src=menuItem.normalImage
			if(this.nowAt==this)this.nowAt=null
		}
	}
}
MenuController.prototype._reset = _reset;

/// non-object methods
function processMenuItemHover(menuID,itemID,trigger)
{
	if(vdsmDebug)confirm("ProcessMenuItemHover "+menuID+" "+itemID)
	clearInterval(vdsmDelayTimer)
	var menu=vdsmMenuArray[menuID]
	var menuItem=menu.menuItem[itemID]
	menuItem._spotlightMe()
	menuItem._openSubmenu(trigger)
}

function processMenuItemExit(menuID,itemID)
{
	if(vdsmDebug)confirm("ProcessMenuItemExit "+menuID+" "+itemID)
	vdsmMenuItemOut=vdsmMenuArray[menuID].menuItem[itemID]
	clearInterval(vdsmDelayTimer)
	vdsmDelayTimer=setTimeout("vdsmMenuItemOut._killMySpotlight();vdsmMenuItemOut.menu._checkDeadItems()",vdsmDelayMilliseconds)
}

function changeClass(id, newClass)
{
	if(!newClass || newClass=="") return
	var tag = getDOMElementFromID(id)
	if(!tag)return
	if(vdsmDebug)confirm("changing "+id+" to class "+newClass+" on object "+tag)
	tag.className = newClass;
}

// use this method for debugging javascript objects
function displayThisObject(obj, obj_name) {
   var result = ""
   for (var i in obj) {
      result += obj_name + "." + i + " = " + obj[i] + "\n"
   }
   confirm(result)
}

function handleonclick()
{
	for (var i in vdsmMenuArray)
	{
		vdsmMenuArray[i]._reset()			
	}
}

function handlekeypress(e)
{
	if (vdsmNS4)
	{
		var keyCode = e.keyCode?e.keyCode:e.which?e.which:e.charCode;
		if ((keyCode==27)||(keyCode==1))
		{
			handleonclick()
		}
	}
	else
	if ((e.keyCode==0)||(e.keyCode==27))
	{
		handleonclick()
	}
}

document.onkeypress = handlekeypress
document.onclick = handleonclick