//JavaScript Document
//Place functions within this document
//Call functions within the dom ready in the html page

 
//look for the functions within the external javascript file

window.addEvent('domready', function() {
	//send the toggle and content arrays to vars
	var toggles = $$('.togglers');
	var content = $$('.elements');
	
	//set up your object var
	//create a "new" Accordian object
	//set the toggle array
	//set the content array
	//set your objects and events 
	var AccordionObject = new Accordion(toggles, content, {
		//when you load the page
		//will "show" the content (by index)
		//with NO transition, it will just be open
		//also note: if you use "fixedHeight," 
		//show will not work when the page first loads
		//"show" will override "display"
		show: 8, 
	
	
		//when you load the page
		//this will "display" the content (by index)
		//and the content will transition open
		//if both display and show are set, 
		//show will override display
		
		display:false,
		//display:1,
		
		
		//defaults to true
		//this creates a vertical accordian
		height : true,
		
		//this is for horizontal accordians
		//tricky to use due to the css involved
		//maybe a tutorial for another day?
		width : false,
		
		//defaults to true
		//will give the content an opacity transition
		opacity: true,
		
		//defaults to false, can be integar - 
		//will fix height of all content containters
		//would need an overflow css rule
		//wont work on page load if you use "show"
		fixedHeight: false, 
		
		//can be false or an integer
		//similiar to fixedHeight above, 
		//but for horizontal accordians
		fixedWidth: false,
		
		//lets you toggle an open item closed
		alwaysHide: false,
	
		//standard onComplete event
		//passes a variable containing the element for each content element		
		onComplete: function(one, two, three, four, five){
			one.highlight('#fff'); //blue
			two.highlight('#fff');
			three.highlight('#fff');
			four.highlight('#fff'); 
			five.highlight('#fff'); //the added section
			$('complete').highlight('#fff');
		},
		
		//this will fire when you toggle open an element
		//will pass the toggle control element
		//and the content element that is opening
		onActive: function(toggler, element) {
			//toggler.highlight('#fff'); //jaune
			//element.highlight('#fff');
		//	$('active').highlight('#000');
		},
		
		//this will fire when an element starts to hide
		//will pass all other elements
		//the one closing or not opening
		onBackground: function(toggler, element) {
			//toggler.highlight('#fff'); //red
			//element.highlight('#fff');	
			//$('background').highlight('#fff');	
		}
	});
	
	

});