as.ready(function() {
	var rubricsLink = as.$$("a.showRubrics");
	var metroLink = as.$$("a.showMetro")
	var rubrics = as.$$("#rubrics");
	var metro = as.$$("#metro");
	
	function bindOpen(cp,ets) {
		as.e.click(
			cp,
			function(e) {
				e = e || window.event;
				e.preventDefault ? e.preventDefault() : e.returnValue = false;
				if (cp.className.match(/\bhover\b/)) {
					cp.className = cp.className.replace(/\bhover\b/g,"");
					as.style(ets,{display: "none"});
					as.style(ets,{zIndex: "3"});
					as.style(ets.parentNode,{zIndex: "3"});
				}
				else {
					setTimeout(
						function() {
							cp.className += " hover";
							as.style(ets,{display: "block",top: "35px"})
							as.style(ets,{zIndex: "40"});
							as.style(ets.parentNode,{zIndex: "40"});
						},40
					);
				}
			}
		);		
	}
	
	function bindClose(cp,ets) {
		as.e.click(
			document.body,
			function(e) {
				if (!ets.style.display || ets.style.display != "block") { return; }
				e = e || window.event;
				var target = e.target || e.srcElement;
				var outside = true;
				while(target.parentNode) {
					if (target == cp || target == ets) {
						outside = false;
						break;
					}
					target = target.parentNode;
				}
				if (outside) {
					cp.className = cp.className.replace(/\bhover\b/g,"");
					as.style(ets,{display: "none"});
					as.style(ets,{zIndex: "3"});
					as.style(ets.parentNode,{zIndex: "3"});
				}
			}
		)
	}
	
	rubrics && bindOpen(rubricsLink,rubrics);
	rubrics && bindClose(rubricsLink,rubrics);
	metro && bindOpen(metroLink,metro);
	metro && bindClose(metroLink,metro);
	
});