'\n\n<style>\n.selectedanchor{ \/*CSS class that gets added to the currently selected anchor link (assuming it\'s a text link)*\/\nbackground: yellow;\n}\n\n\/* ######### Default class for drop down menus ######### *\/\n\n.anylinkmenu{\nposition: absolute;\nleft: 0;\ntop: 0;\nvisibility: hidden;\nborder: 1px solid black;\nborder-bottom-width: 0;\nfont: normal 12px Verdana;\nline-height: 18px;\nz-index: 100; \/* zIndex should be greater than that of shadow\'s below *\/\nbackground: lightyellow;\nwidth: 200px; \/* default width for menu *\/\n}\n\n.anylinkmenu ul{\nmargin: 0;\npadding: 0;\nlist-style-type: none;\n}\n\n.anylinkmenu ul li a{\nwidth: 100%;\ndisplay: block;\ntext-indent: 3px;\nborder-bottom: 1px solid black;\npadding: 2px 0;\ntext-decoration: none;\nfont-weight: bold;\ntext-indent: 5px;\n}\n\n.anylinkmenu a:hover{ \/*hover background color*\/\nbackground: black;\ncolor: white;\n}\n\n\/* ######### Alternate multi-column class for drop down menus ######### *\/\n\n\n.anylinkmenucols{\nposition: absolute;\nwidth: 350px;\nleft: 0;\ntop: 0;\nvisibility: hidden;\nborder: 1px solid black;\npadding: 10px;\nfont: normal 12px Verdana;\nz-index: 100; \/*zIndex should be greater than that of shadow\'s below*\/\nbackground: #E9E9E9;\n}\n\n.anylinkmenucols li{\npadding-bottom: 3px;\n}\n\n.anylinkmenucols .column{\nfloat: left;\npadding: 3px 8px;\nmargin-right: 5px;\nbackground: #E0E0E0;\n}\n\n.anylinkmenucols .column ul{\nmargin: 0;\npadding: 0;\nlist-style-type: none;\n}\n\n\n\n\/* ######### class for shadow DIV ######### *\/\n\n\n.anylinkshadow{ \/*CSS for shadow. Keep this as is *\/\nposition: absolute;\nleft: 0;\ntop: 0;\nz-index: 99; \/*zIndex for shadow*\/\nbackground: black;\nvisibility: hidden;\n}\n<\/style>\n\n<script>var anylinkmenu1={divclass:\'anylinkmenu\', inlinestyle:\'\', linktarget:\'\'}\nanylinkmenu1.items=[\n	["Dynamic Drive", "http:\/\/www.dynamicdrive.com\/"],\n	["CSS Drive", "http:\/\/www.cssdrive.com\/"],\n	["JavaScript Kit", "http:\/\/www.javascriptkit.com\/"],\n	["Coding Forums", "http:\/\/www.codingforums.com\/"],\n	["JavaScript Reference", "http:\/\/www.javascriptkit.com\/jsref\/"]\n]\n\n\n\nvar anylinkmenu2={divclass:\'anylinkmenu\', inlinestyle:\'width:150px; background:#FDD271\', linktarget:\'_new\'}\nanylinkmenu2.items=[\n	["CNN", "http:\/\/www.cnn.com\/"],\n	["MSNBC", "http:\/\/www.msnbc.com\/"],\n	["Google", "http:\/\/www.google.com\/"],\n	["BBC News", "http:\/\/news.bbc.co.uk"] \n]\n\n\n\nvar anylinkmenu3={divclass:\'anylinkmenucols\', inlinestyle:\'\', linktarget:\'secwin\'}\nanylinkmenu3.cols={divclass:\'column\', inlinestyle:\'\'}\nanylinkmenu3.items=[\n	["Dynamic Drive", "http:\/\/www.dynamicdrive.com\/"],\n	["CSS Drive", "http:\/\/www.cssdrive.com\/"],\n	["JavaScript Kit", "http:\/\/www.javascriptkit.com\/"],\n	["Coding Forums", "http:\/\/www.codingforums.com\/"],\n	["JavaScript Reference", "http:\/\/www.javascriptkit.com\/jsref\/", "efc"],\n	["CNN", "http:\/\/www.cnn.com\/"],\n	["MSNBC", "http:\/\/www.msnbc.com\/"],\n	["Google", "http:\/\/www.google.com\/"],\n	["BBC News", "http:\/\/news.bbc.co.uk", "efc"],\n	["News.com", "http:\/\/www.news.com\/"],\n	["SlashDot", "http:\/\/www.slashdot.com\/"],\n	["Digg", "http:\/\/www.digg.com\/"],\n	["Tech Crunch", "http:\/\/techcrunch.com"]\n]\n\nvar anylinkmenu4={divclass:\'anylinkmenu\', inlinestyle:\'width:150px; background:#DFFDF4\', linktarget:\'_new\'}\nanylinkmenu4.items=[\n	["CNN", "http:\/\/www.cnn.com\/"],\n	["MSNBC", "http:\/\/www.msnbc.com\/"],\n	["Google", "http:\/\/www.google.com\/"],\n	["BBC News", "http:\/\/news.bbc.co.uk"] \n]\n<\/script>\n\n<script>\n\/\/** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http:\/\/www.dynamicdrive.com\n\/\/** Script Download\/ instructions page: http:\/\/www.dynamicdrive.com\/dynamicindex1\/dropmenuindex.htm\n\/\/** January 29th, 2009: Script Creation date\n\n\/\/**May 22nd, 09\': v2.1\n	\/\/1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link\n	\/\/2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor\'s default and over images.\n\n\/\/**June 1st, 09\': v2.2\n	\/\/1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section\n\n\/\/**May 23rd, 10\': v2.21: Fixes script not firing in IE when inside a frame page\n\n\/\/**June 28th, 11\': v2.3: Menu updated to work properly in popular mobile devices such as iPad\/iPhone and Android tablets.\n\nif (typeof dd_domreadycheck=="undefined") \/\/global variable to detect if DOM is ready\n	var dd_domreadycheck=false\n\nvar anylinkmenu={\n\nmenusmap: {},\npreloadimages: [],\neffects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, \/\/customize menu effects\n\ndimensions: {},\nismobile:navigator.userAgent.match(\/(iPad)|(iPhone)|(iPod)|(android)|(webOS)\/i) != null, \/\/boolean check for popular mobile browsers\n\ngetoffset:function(what, offsettype){\n	return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]\n},\n\ngetoffsetof:function(el){\n	el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}\n},\n\ngetdimensions:function(menu){\n	this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,\n		docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,\n		docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,\n		docscrollx:window.pageXOffset || this.standardbody.scrollLeft,\n		docscrolly:window.pageYOffset || this.standardbody.scrollTop\n	}\n	if (!this.dimensions.dropmenuw){\n		this.dimensions.dropmenuw=menu.dropmenu.offsetWidth\n		this.dimensions.dropmenuh=menu.dropmenu.offsetHeight\n	}\n},\n\nisContained:function(m, e){\n	var e=window.event || e\n	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)\n	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}\n	if (c==m)\n		return true\n	else\n		return false\n},\n\nsetopacity:function(el, value){\n	el.style.opacity=value\n	if (typeof el.style.opacity!="string"){ \/\/if it\'s not a string (ie: number instead), it means property not supported\n		el.style.MozOpacity=value\n		if (document.all && typeof el.style.filter=="string"){\n			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"\n		}\n	}\n},\n\nshowmenu:function(menuid){\n	var menu=anylinkmenu.menusmap[menuid]\n	clearTimeout(menu.hidetimer)\n	this.getoffsetof(menu.anchorobj)\n	this.getdimensions(menu)\n	var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) \/\/base x pos\n	var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)\/\/base y pos\n	if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ \/\/drop left instead?\n		posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)\n	}\n	if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  \/\/drop up instead?\n		posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) \/\/position above anchor or window\'s top edge\n	}\n	if (this.effects.fade.enabled){\n		this.setopacity(menu.dropmenu, 0) \/\/set opacity to 0 so menu appears hidden initially\n		if (this.effects.shadow.enabled)\n			this.setopacity(menu.shadow, 0) \/\/set opacity to 0 so shadow appears hidden initially\n	}\n	menu.dropmenu.setcss({left:posx+\'px\', top:posy+\'px\', visibility:\'visible\'})\n	if (this.effects.shadow.enabled){\n		\/\/menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})\n		menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+\'px\', top:posy+anylinkmenu.effects.shadow.depth[1]+\'px\', visibility:\'visible\'})\n	}\n	if (this.effects.fade.enabled){\n		clearInterval(menu.animatetimer)\n		menu.curanimatedegree=0\n		menu.starttime=new Date().getTime() \/\/get time just before animation is run\n		menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)\n	}\n},\n\nrevealmenu:function(menuid){\n	var menu=anylinkmenu.menusmap[menuid]\n	var elapsed=new Date().getTime()-menu.starttime \/\/get time animation has run\n	if (elapsed<this.effects.fade.duration){\n		this.setopacity(menu.dropmenu, menu.curanimatedegree)\n		if (this.effects.shadow.enabled)\n			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)\n	}\n	else{\n		clearInterval(menu.animatetimer)\n		this.setopacity(menu.dropmenu, 1)\n		menu.dropmenu.style.filter=""\n	}\n	menu.curanimatedegree=(1-Math.cos((elapsed\/this.effects.fade.duration)*Math.PI)) \/ 2\n},\n\nsetcss:function(param){\n	for (prop in param){\n		this.style[prop]=param[prop]\n	}\n},\n\nsetcssclass:function(el, targetclass, action){\n	var needle=new RegExp("(^|\\\\s+)"+targetclass+"($|\\\\s+)", "ig")\n	if (action=="check")\n		return needle.test(el.className)\n	else if (action=="remove")\n		el.className=el.className.replace(needle, "")\n	else if (action=="add" && !needle.test(el.className))\n		el.className+=" "+targetclass\n},\n\nhidemenu:function(menuid){\n	var menu=anylinkmenu.menusmap[menuid]\n	clearInterval(menu.animatetimer)\n	menu.dropmenu.setcss({visibility:\'hidden\', left:0, top:0})\n	menu.shadow.setcss({visibility:\'hidden\', left:0, top:0})\n},\n\ngetElementsByClass:function(targetclass){\n	if (document.querySelectorAll)\n		return document.querySelectorAll("."+targetclass)\n	else{\n		var classnameRE=new RegExp("(^|\\\\s+)"+targetclass+"($|\\\\s+)", "i") \/\/regular expression to screen for classname\n		var pieces=[]\n		var alltags=document.all? document.all : document.getElementsByTagName("*")\n		for (var i=0; i<alltags.length; i++){\n			if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)\n				pieces[pieces.length]=alltags[i]\n		}\n		return pieces\n	}\n},\n\naddDiv:function(divid, divclass, inlinestyle){\n	var el=document.createElement("div")\n	if (divid)\n		el.id=divid\n	el.className=divclass\n	if (inlinestyle!="" && typeof el.style.cssText=="string")\n		el.style.cssText=inlinestyle\n	else if (inlinestyle!="")\n		el.setAttribute(\'style\', inlinestyle)\n	document.body.appendChild(el)\n	return el\n},\n\ngetmenuHTML:function(menuobj){\n	var menucontent=[]\n	var frag=""\n	for (var i=0; i<menuobj.items.length; i++){\n		frag+=\'<li><a href="\' + menuobj.items[i][1] + \'" target="\' + menuobj.linktarget + \'">\' + menuobj.items[i][0] + \'<\/a><\/li>\\n\'\n		if (menuobj.items[i][2]=="efc" || i==menuobj.items.length-1){\n			menucontent.push(frag)\n			frag=""\n		}\n	}\n	if (typeof menuobj.cols=="undefined")\n		return \'<ul>\\n\' + menucontent.join(\'\') + \'\\n<\/ul>\'\n	else{\n		frag=""\n		for (var i=0; i<menucontent.length; i++){\n			frag+=\'<div class="\' + menuobj.cols.divclass + \'" style="\' + menuobj.cols.inlinestyle + \'">\\n<ul>\\n\' + menucontent[i] + \'<\/ul>\\n<\/div>\\n\'\n		}\n		return frag\n	}\n},\n\naddEvent:function(targetarr, functionref, tasktype){\n	if (targetarr.length>0){\n		var target=targetarr.shift()\n		if (target.addEventListener)\n			target.addEventListener(tasktype, functionref, false)\n		else if (target.attachEvent)\n			target.attachEvent(\'on\'+tasktype, function(){return functionref.call(target, window.event)})\n		this.addEvent(targetarr, functionref, tasktype)\n	}\n},\n\ndomready:function(functionref){ \/\/based on code from the jQuery library\n	if (dd_domreadycheck){\n		functionref()\n		return\n	}\n	\/\/ Mozilla, Opera and webkit nightlies currently support this event\n	if (document.addEventListener) {\n		\/\/ Use the handy event callback\n		document.addEventListener("DOMContentLoaded", function(){\n			document.removeEventListener("DOMContentLoaded", arguments.callee, false )\n			functionref();\n			dd_domreadycheck=true\n		}, false )\n	}\n	else if (document.attachEvent){\n		\/\/ If IE and not an iframe\n		\/\/ continually check to see if the document is ready\n		if ( document.documentElement.doScroll && window == window.top) (function(){\n			if (dd_domreadycheck) return\n			try{\n				\/\/ If IE is used, use the trick by Diego Perini\n				\/\/ http:\/\/javascript.nwbox.com\/IEContentLoaded\/\n				document.documentElement.doScroll("left")\n			}catch(error){\n				setTimeout( arguments.callee, 0)\n				return;\n			}\n			\/\/and execute any waiting functions\n			functionref();\n			dd_domreadycheck=true\n		})();\n	}\n	if (document.attachEvent && parent.length>0) \/\/account for page being in IFRAME, in which above doesn\'t fire in IE\n		this.addEvent([window], function(){functionref()}, "load");\n},\n\naddState:function(anchorobj, state){\n	if (anchorobj.getAttribute(\'data-image\')){\n		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName(\'img\')[0]\n		if (imgobj){\n			imgobj.src=(state=="add")? anchorobj.getAttribute(\'data-overimage\') : anchorobj.getAttribute(\'data-image\')\n		}\n	}\n	else\n		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)\n},\n\naddState:function(anchorobj, state){\n	if (anchorobj.getAttribute(\'data-image\')){\n		var imgobj=(anchorobj.tagName=="IMG")? anchorobj : anchorobj.getElementsByTagName(\'img\')[0]\n		if (imgobj){\n			imgobj.src=(state=="add")? anchorobj.getAttribute(\'data-overimage\') : anchorobj.getAttribute(\'data-image\')\n		}\n	}\n	else\n		anylinkmenu.setcssclass(anchorobj, "selectedanchor", state)\n},\n\nsetupmenu:function(targetclass, anchorobj, pos){\n	this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body\n	var relattr=anchorobj.getAttribute("rel")\n	dropmenuid=relattr.replace(\/\\[(\\w+)\\]\/, \'\')\n	var dropmenuvar=window[dropmenuid]\n	var dropmenu=this.addDiv(null, dropmenuvar.divclass, dropmenuvar.inlinestyle) \/\/create and add main sub menu DIV\n	dropmenu.innerHTML=this.getmenuHTML(dropmenuvar)\n	var menu=this.menusmap[targetclass+pos]={\n		id: targetclass+pos,\n		anchorobj: anchorobj,	\n		dropmenu: dropmenu,\n		revealtype: (relattr.length!=dropmenuid.length && RegExp.$1=="click") || anylinkmenu.ismobile ? "click" : "mouseover",\n		orientation: anchorobj.getAttribute("rev")=="lr"? "lr" : "ud",\n		shadow: this.addDiv(null, "anylinkshadow", null) \/\/create and add corresponding shadow\n	}\n	menu.anchorobj._internalID=targetclass+pos\n	menu.anchorobj._isanchor=true\n	menu.dropmenu._internalID=targetclass+pos\n	menu.shadow._internalID=targetclass+pos\n	menu.dropmenu.setcss=this.setcss\n	menu.shadow.setcss=this.setcss\n	menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})\n	this.setopacity(menu.shadow, this.effects.shadow.opacity)\n	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ \/\/MOUSEOVER event for anchor, dropmenu, shadow\n		var menu=anylinkmenu.menusmap[this._internalID]\n		if (this._isanchor && menu.revealtype=="mouseover" && !anylinkmenu.isContained(this, e)){ \/\/event for anchor\n			anylinkmenu.showmenu(menu.id)\n			anylinkmenu.addState(this, "add")\n		}\n		else if (typeof this._isanchor=="undefined"){ \/\/event for drop down menu and shadow\n			clearTimeout(menu.hidetimer)\n		}\n	}, "mouseover")\n	this.addEvent([menu.anchorobj, menu.dropmenu, menu.shadow], function(e){ \/\/MOUSEOUT event for anchor, dropmenu, shadow\n		if (!anylinkmenu.isContained(this, e)){\n			var menu=anylinkmenu.menusmap[this._internalID]\n			menu.hidetimer=setTimeout(function(){\n				anylinkmenu.addState(menu.anchorobj, "remove")\n				anylinkmenu.hidemenu(menu.id)\n			}, anylinkmenu.effects.delayhide)\n		}\n	}, "mouseout")\n	this.addEvent([menu.anchorobj, menu.dropmenu], function(e){ \/\/CLICK event for anchor, dropmenu\n		var menu=anylinkmenu.menusmap[this._internalID]\n		if ( this._isanchor && menu.revealtype=="click"){\n			if (menu.dropmenu.style.visibility=="visible")\n				anylinkmenu.hidemenu(menu.id)\n			else{\n				anylinkmenu.addState(this, "add")\n				anylinkmenu.showmenu(menu.id)\n			}\n			if (e.preventDefault)\n				e.preventDefault()\n			return false\n		}\n		else\n			menu.hidetimer=setTimeout(function(){anylinkmenu.hidemenu(menu.id)}, anylinkmenu.effects.delayhide)\n	}, "click")\n},\n\ninit:function(targetclass){\n	this.domready(function(){anylinkmenu.trueinit(targetclass)})\n},\n\ntrueinit:function(targetclass){\n	var anchors=this.getElementsByClass(targetclass)\n	var preloadimages=this.preloadimages\n	for (var i=0; i<anchors.length; i++){\n		if (anchors[i].getAttribute(\'data-image\')){ \/\/preload anchor image?\n			preloadimages[preloadimages.length]=new Image()\n			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute(\'data-image\')\n		}\n		if (anchors[i].getAttribute(\'data-overimage\')){ \/\/preload anchor image?\n			preloadimages[preloadimages.length]=new Image()\n			preloadimages[preloadimages.length-1].src=anchors[i].getAttribute(\'data-overimage\')\n		}\n		this.setupmenu(targetclass, anchors[i], i)\n	}\n}\n\n}\n\n\n<\/script>\n\n<script type="text\/javascript">anylinkmenu.init("menuanchorclass")<\/script>\n\n<!--1st anchor link-->\n\n<p><a href="http:\/\/www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1">Default Example<\/a><\/p>\n\n\n<!--2nd anchor link-->\n\n<p><a href="http:\/\/www.dynamicdrive.com" class="menuanchorclass someotherclass" rel="anylinkmenu2[click]" rev="lr">Right dropping menu<\/a> (click to reveal)<\/p>\n                                                    \n\n<!--3rd anchor link-->\n\n<p style="text-align:center"><a href="http:\/\/www.dynamicdrive.com" class="menuanchorclass myownclass" rel="anylinkmenu3">Menu with multiple columns<\/a><\/p>\n                                                    \n<!--4th anchor link-->\n\n<p><a href="http:\/\/www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu4" data-image="http:\/\/i52.tinypic.com\/24g7uc7.giff" data-overimage="http:\/\/i55.tinypic.com\/2z5lzlu.gif"><img src="http:\/\/i52.tinypic.com\/24g7uc7.gif" style="border-width:0" \/><\/a><\/p>';