$(document).ready(function () {
	// Set Up Accordion Menu
	// Start with changing classes from default to the ones used by JavaScript
	var $needsAndProvisions = $('#needs-and-provisions');
		$needs = $('.need'),
		$provisions = $('.provision'),
		$descriptions = $('.description');
	
	$needs.addClass('jquery-need').removeClass('need');
	$provisions.addClass('jquery-provision').removeClass('provision');
	$descriptions.addClass('jquery-description').removeClass('description');

	// Make each menu open up on hover
	var individualHeight = 26; // == .jquery-need height + border width
	var rightColumnTopMargin = 0;
	var totalHeight = individualHeight * $provisions.length;
	var descriptionHeight = totalHeight - 24 - 10 - 4 + 2; // don't know why it needed the +2, but it did
	// totalHeight - .title height - .selected-provision.title padding-top - .selected-provision border width

	$needsAndProvisions.css({
		height : totalHeight + 2, // + 2 is for the border at the bottom
		overflow : 'hidden'
	});

	// Group all .jquery-provision elements at the end of #needs-and-provisions
	$needs.css('position', 'absolute').appendTo($needsAndProvisions);

	// Close all menus
	$descriptions.height(0);
	
	// Fix CSS for Safari
	if ($.layout.name == 'webkit') {
		$needs.height(28).width(310); // .jquery-need height + border width
		$('.title', $provisions).height(26).width(312);
		descriptionHeight += 8;
	}

	// Accordion Menu
	/*
		There was a bug that prevented the user from moving the mouse from the need to the provision and keep the accordion open. This is because a mouseout even occurs when the mouse leaves the need side. To prevent this, I am removing mouseout events from the needs and moving them only to the provisions and then firing a mouseout event for each provision whenever a need is moused in so that it will close any open provisions.
		
		The mouseout even will also need to fire when #needs-and-provisions is moused out
	*/

	$needs.each(function (index) {
		$(this).css('top', ''+(index*individualHeight)+'px')
		.mouseenter(function () {
			// Fire mouse out events for all jquery-provisions
			$('.selected-provision').mouseleave();
	
			// Add class so for the selected elements
			$(this).addClass('selected-need');
			if ($.layout.name == 'webkit') {
				// CSS Fix for webkit, this will connect the two sides without a border in the middle
				$(this).width(312);
			}
			$($provisions.get(index)).addClass('selected-provision');
	
			// Animate the accordion functions
			$($provisions.get(0)).stop().animate({
				marginTop : '-'+(index*individualHeight+rightColumnTopMargin)+'px'
			});
			$($descriptions.get(index)).stop().animate({
				height : descriptionHeight
			})
			.css('overflow', 'auto');
		});
	});
	
	$provisions.each(function (index) {
		$(this).mouseleave(function () {
			
			// Revert classes back to normal
			$($needs.get(index)).removeClass('selected-need');
			if ($.layout.name == 'webkit') {
				// CSS Fix for webkit, this will connect the two sides without a border in the middle
				$($needs.get(index)).width(310);
			}
			$(this).removeClass('selected-provision');
			
			// Get the accordion menu back to closed
			$($provisions.get(0)).stop().animate({
				marginTop : 0
			});
			$($descriptions.get(index)).stop().animate({
				height : 0
			});
		});
	});
	
	$needsAndProvisions.mouseleave(function () {
		$('.selected-provision').mouseleave();
	});
});