//
//	Set up all accordions
//
function loadAccordions() {
	var topAccordion = new accordion('vertical_container', {
		classNames : {
			toggle : 'horizontal_accordion_toggle',
			toggleActive : 'horizontal_accordion_toggle_active',
			content : 'horizontal_accordion_content'
		},
		defaultSize : {
			width : 165
		},
		direction : 'horizontal'
	});
	
	var bottomAccordion = new accordion('vertical_container');
	
	var nestedVerticalAccordion = new accordion('vertical_nested_container', {
	  classNames : {
			toggle : 'horizontal_accordion_toggle',
			toggleActive : 'horizontal_accordion_toggle_active',
			content : 'horizontal_accordion_content'
		}
	});
	
	// Open first one
	//bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
	
	// Open second one
	//topAccordion.activate($$('#vertical_container .horizontal_accordion_toggle')[2]);
}

//
//  In my case I want to load them onload, this is how you do it!
// 
Event.observe(window, 'load', loadAccordions, false);

//
// You can hide the accordions on page load like this, it maintains accessibility
//
// Special thanks go out to Will Shaver @ http://primedigit.com/
//
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
	$(accordion.next(0)).setStyle({
	  height: '0px'
	});
});