/* 
	AEG_contentBox takes a container div and enables content divs inside it to expand/collapse when their headers are clicked.
	AEG_contentBox looks for the class 'contentBox' for the container (el), then searches for 'num' number of content elements
	within that by the class 'contentBoxElement[n]'. Within each content element, the classes 'header' and 'content' are used to find those divs.
	You can have as many contentBoxes as you want on a page, and each one as 'num' content elements inside.
*/

function AEG_contentBox(el,num) {
	// el is the container elements
	// num is the number of toggled content elements within the container
	this.contentBox = el;
	// create an empty array to be filled with the container's content elements
	this.elements = new Array(num);
	this.init();
}

AEG_contentBox.prototype.init = function() {
	
	// loop through content elements and set event handlers
	for (var i=0; i<this.elements.length; i++) {
		
		this.elements[i] = YAHOO.util.Dom.getElementsByClassName('contentBoxElement' + (i+1),'div',this.contentBox)[0];
		this.elements[i].header = YAHOO.util.Dom.getElementsByClassName('header','div',this.elements[i])[0];
		this.elements[i].content = YAHOO.util.Dom.getElementsByClassName('content','div',this.elements[i])[0];
		
		// i'm using a tempObj variable here instead of passing in the scope because I want 'this' to evaluate to the scope of the element
		var tempObj = this;
		YAHOO.util.Event.addListener(this.elements[i].header, 'click', function() {
				tempObj.toggleDisplay(this.parentNode.className);
			});
		
	}
	
	// show first element by default
	YAHOO.util.Dom.setStyle(this.elements[0].content, 'display', 'block');
	
}

AEG_contentBox.prototype.toggleDisplay = function(elementToDisplay) {
	// elementToDisplay is the className of the element, not the element itself
	
	// first collapse all four content elements
	for (var i=0; i<this.elements.length; i++) {
		YAHOO.util.Dom.setStyle(this.elements[i].content, 'display', 'none');
	}
	
	// now use the class to find a match and the element to display
	for (var i=0; i<this.elements.length; i++) {
		if (elementToDisplay == this.elements[i].className) {
			YAHOO.util.Dom.setStyle(this.elements[i].content, 'display', 'block');
		}
	}
	
}

// this kicks everything off once the DOM is ready
YAHOO.util.Event.addListener(window, 'load', function() {
		
		// grab all the containers on the page to be cast as AEG_contentBoxes and save them into an array
		var contentBoxes = YAHOO.util.Dom.getElementsByClassName('contentBox','div');
		
		// loop through the array and cast each container as an AEG_contentBox
		for (var i=0; i<contentBoxes.length; i++) {
			// gets the content elements within the ContentBox and puts them into an array
			// we'll use this array length to find out how many contentBoxElements are inside the ContentBox
			var contentElements = YAHOO.util.Dom.getElementsByClassName('content','div',contentBoxes[i]);
			for (var j=0; j<contentElements.length; j++) {
				contentElements[j].style.display = 'none';
			}
			contentBoxes[i] = new AEG_contentBox(contentBoxes[i],contentElements.length);
		}
		
	});