/*

Creates a list of elements, each of which when clicked, reveals extra content beneathe the item.

The HTML should be set up as follows:

<div id="menu">

	<div class="menu-item">
		<div class="visible-content">
			content
		</div>
		<div class="hidden-content">
			content
		</div>
	</div>
	
	<div class="menu-item">
		<div class="visible-content">
			content
		</div>
		<div class="hidden-content">
			content
		</div>
	</div>
	
</div>

*/

//these variables denote what content to show and what content to reveal when clicked
var containers; //list of all itemContainers
var lastClicked = null; //the location of the last item clicked

var menu = "#menu"; //the class of the container for the entire menu
var itemContainer = ".menu-item"; //the class of the container of each item
var visibleContent = ".visible-content"; //the class of the container of the visible content within the item
var hiddenContent = ".hidden-content"; //the class of the container of the hidden content within the item
var selectedClass = "selected"; //for extra polish, add this class to the selected. NAME OF THE CLASS ONLY, NO "."

//don't run anything until the document is loaded
$(document).ready(menuSetup);

function menuSetup() {


	//list of everything with the menu-item class (or whatever class that will extend)
	containers = $(itemContainer);
	
	//find the height of the largest hiddenContent, for use in computing the new div height (see **)
	var heightToAdd = heightAddition();
	
	//hide the part that will extend (in this case, the <p> )
	$(hiddenContent, containers).hide();
	
	//create a new object out of each item, so that each holds the individual location
	for (var i = 0; i < containers.length; i++) {
		var menuItem = new MenuItem(containers[i]);
		menuItem.whenClicked();
	}
	
	// ** add the height of the largest hiddenContent to the div height
    setMenuHeight(heightToAdd);
		
}

//compute height to add to div height
function heightAddition() {
	var allHiddenContent = $(hiddenContent);
	var hiddenContentHeight = 0;
	var largestHiddenContentHeight = 0;
	
	
	for (var i = 0; i < allHiddenContent.length; i++) {
		hiddenContentHeight = $(allHiddenContent[i]).outerHeight(true);
		if (hiddenContentHeight > largestHiddenContentHeight) {
			largestHiddenContentHeight = hiddenContentHeight;
		}
	
	}
	
	(largestHiddenContentHeight);
	return largestHiddenContentHeight;
}

//set the new menu height
function setMenuHeight(_heightToAdd) {
	var oldMenuHeight;
	var newMenuHeight;
	
	oldMenuHeight = $(menu).outerHeight(true);
	newMenuHeight = oldMenuHeight + _heightToAdd;
	
	$(menu).height(newMenuHeight);
}

//create the MenuItem object to retain the individual locations
function MenuItem(location) {
	this.location = location;
}

//the function that will occur when the item is clicked
MenuItem.prototype.whenClicked = function() {
	var location = this.location;
	var isClicked = false;
	
	
	
	$(visibleContent, location).click(
		function() {
			//CONTEXT IS EVERYTHING!!!!! This is how you chooses children based upon the parent. Amazing.
			$(location).addClass(selectedClass); 
			$(hiddenContent, location).slideDown(500);
			
			isClicked = true;
			
			//if a previous menuItem was clicked, close it
			if (lastClicked && location != lastClicked) {
				$(hiddenContent, lastClicked).slideUp(500);
				$(lastClicked).removeClass(selectedClass);
			}
			
			//set the current location as the new location to close on click
			lastClicked = location;
		}
	);
		
}