// Closure protects my local variables
(function(){
	// If we don't have YUI, we don't have anything 
	if (window.YAHOO) {
	/* Create HTML structure
	    <div id="menu_holder">
			<div id="menu-411">
				<h2><a id="toggle-411" href="#"></a></h2>
				<div>
					<h3>FAQ</h3>
					<a id="close-411" href="">close</a>
					<div id="questions-411">Loading FAQs...</div>
					<div id="answer-411"></div>
					<img src="/Images/faq/faq_left.png" id="left" />
				    <img src="/Images/faq/faq_right.png" id="right" />
					<img src="/Images/faq/faq_bottom.png" id="bottom" />
				</div>
			</div>
		</div>
	*/
	    
		// shim causes errors in Safari
		var shim = (typeof ActiveXObject != "undefined")? '<iframe src="#" id="menu-411-iframe-shim"></iframe>' : "";
		document.write('<div id="menu_holder"><div id="menu-411"></div></div>'+ shim );
      	var menu411 = YAHOO.util.Dom.get("menu-411");
		var iframe = YAHOO.util.Dom.get("menu-411-iframe-shim");
        if (iframe && iframe.style) {
      	iframe.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
         }
        menu411.innerHTML = '<h2><a id="toggle-411" href="#"></a></h2><div id="innerdiv"><h3>FAQ</h3><p id="close-411"><a href="">close</a></p><div id="questions-411">Loading FAQs&hellip;</div><div id="answer-411"></div></div><img src="/Images/faq/faq_top.png" id="faq_top" height="15" /><img src="/Images/faq/faq_left.png" id="left" height="360" /><img src="/Images/faq/faq_right.png" id="right" height="360" /><img src="/Images/faq/faq_bottom.png" id="bottom" />';
		var questions411 = YAHOO.util.Dom.get("questions-411");
		var answer411 = YAHOO.util.Dom.get("answer-411");
		var faqsCallback = { success: populateFAQs, failure: dieSilently }
		YAHOO.util.Event.on("toggle-411","click",open411visibility);
		YAHOO.util.Event.on("close-411","click",close411visibility);
		var req = YAHOO.util.Connect.asyncRequest("GET","/webservices/general.asmx/LoadFAQ",faqsCallback)
        if (window.location.hash == "#faq") { open411visibility() };
        YAHOO.util.Event.onAvailable("footer",addFAQLinks);
	}
	function open411visibility(e) {
	    if (! YAHOO.util.Dom.hasClass(menu411,"active")) {
			try {
				YAHOO.util.Dom.addClass([menu411,iframe],"active")				
			}
			catch(e) {};
		}
		if(typeof e != "undefined") { YAHOO.util.Event.stopEvent(e); }
	 	var ti = document.getElementById("toggle-411-img");
	}
	
	function close411visibility(e) { 
		YAHOO.util.Dom.removeClass([menu411,iframe],"active");
		YAHOO.util.Event.stopEvent(e);
		var ti = document.getElementById("toggle-411-img");
	}

	// Called if AJAX request returns successfully
	function populateFAQs (oResult) {
		var topics = oResult.responseXML.getElementsByTagName("topic");
		var tlength = topics.length;
		var dl = document.createElement("dl");
		for (var i = 0; i < tlength; i++) {
			var dt = document.createElement("dt");
			dt.innerHTML = topics[i].getAttribute("l");
			dl.appendChild(dt);
			var qs = topics[i].getElementsByTagName("question");
			var qlength = qs.length;
			for (var j = 0; j < qlength; j++) {
				var q = qs[j];
				var dd = document.createElement("dd");
				var a = document.createElement("a");
				a.innerHTML = q.getAttribute("q");
				a.href = "#";
				a.h = q.getAttribute("q");
				a.l = q.getAttribute("l");
				dd.appendChild(a);
				dl.appendChild(dd);
			}
		}
		// add questions to document
		questions411.replaceChild(dl,questions411.firstChild);
		// add event listeners to questions
		YAHOO.util.Event.on(dl.getElementsByTagName("a"),"click",displayAnswer);
	}
	function dieSilently (oResult) { /* console.log(oResult) */ }
	// Called when one of the questions is clicked
	function displayAnswer (e) {
		answer411.innerHTML = "<div><h4>"+this.h+"</h4><p>"+this.l+"</p></div>";
		YAHOO.util.Event.stopEvent(e);
	}
    function addFAQLinks () {
        var links = YAHOO.util.Dom.getElementsBy(isFAQLink,"a");
        YAHOO.util.Event.on(links,"click",open411visibility);
    }
	function isFAQLink (link) { return /#faq$/.test(link.href) }
})();