var MY = {};

MY.callback = {
	success: function(o) {
		var el = document.getElementById('overlay').firstChild.nextSibling;
		el.innerHTML = o.responseText;
	},
	failure: function(o) {
		
	},
	argument: []
};

MY.clickHandler = function(e){
	var el = YAHOO.util.Event.getTarget(e);
	MY.overlay.center();
	MY.overlay.cfg.setProperty("y", 200);
	MY.overlay.show();
	//MY.overlay.setBody("" + el.id);
	var sUrl = document.getElementById(el.id).getAttribute('href') + "?async=1";
	YAHOO.util.Event.preventDefault(e);
	var conn = YAHOO.util.Connect.asyncRequest('GET', sUrl, MY.callback);
};

MY.overlay = new YAHOO.widget.Overlay("overlay", { visible: false,
												   width:"500px",
												   zIndex:"100", 
												   effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration:0.25} } );
												
MY.overlay.init = function(){
	MY.overlay.setHeader('');
	MY.overlay.setBody("Loading information...");
	MY.overlay.setFooter('<span id="closeOverlay">close[X]</span>');
	MY.overlay.render(document.body);
}


//document.write(typeof(MY.overlay));


// Listener for all the explainBoxes
var explainBoxes = ["explainWebDesign","explainLogoDesign","explainWebHosting","explainManagement","explainWebApps","explainMicroFormats","explainUsabilityTesting","explainAnalytics"];
YAHOO.util.Event.addListener(explainBoxes, "click", MY.clickHandler, MY.overlay, true);

// One event to close every container
YAHOO.util.Event.addListener("closeOverlay", "click", MY.overlay.hide, MY.overlay, true);
YAHOO.util.Event.onDOMReady(MY.overlay.init);