var detailBox = {
	codes : Array,
	init : function() {
		detailBox.codes = document.getElementsByClassName('tab');
		detailBox.attach();
	},
	attach : function() {
		var i;
		for ( i=0;i<detailBox.codes.length;i++ ) {
			Event.observe(detailBox.codes[i],'click',detailBox.toggle,false);	// assign fuction to click event of tab
			Element.cleanWhitespace(detailBox.codes[i].parentNode.parentNode.parentNode.parentNode.parentNode);
			Element.cleanWhitespace(detailBox.codes[i].parentNode.parentNode.parentNode.parentNode.nextSibling);
		}
	},
	getEventSrc : function (e) {
		if (!e) e = window.event;
		if (e.originalTarget)
			return e.originalTarget;
		else if (e.srcElement)
			return e.srcElement;
	},
	collapse : function(e) {
		var el = detailBox.getEventSrc(e).nextSibling;
		Effect.toggle(el.id,'slide', {duration:0.2});
	},
	toggle : function(e) {
		var t = detailBox.getEventSrc(e).parentNode;	// the tab container
		var num = (t.id.slice(1,(t.id.length))) ;	// get the tab number from the id
		var d;	// the tab selected
		if (document.getElementById) {
			d = document.getElementById('d'+num);
		} else if (document.all) {
			d = document.all['d'+num];
		}
		
		// hide them all
		var details = detailBox.getEventSrc(e).parentNode.parentNode.parentNode.parentNode.nextSibling;
		for ( i=0;i<details.childNodes.length;i++ ) {
			var ch;	// each detail box
			if (document.getElementById) {
				ch = document.getElementById('d'+(i+1));
			} else if (document.all) {
				ch = document.all['d'+(i+1)];
			}
			if (d != ch) {	// hide all the tabs that not the one clicked
				ch.style.display = "none";
			}
		}

		// show the one that was clicked
		if (d.style.display == "block") {	// if they clicked the one that was already open, hide it
			d.style.display = "none";
		} else {
			d.style.display = "block";
		}
	}
};

// ATTACH ONCLICK EVENT TO ALL ELEMENTS WITH THE l-item CLASS
Event.observe(window,'load',detailBox.init,false);