var accordion;
var accordionTogglers;
var accordionContents;

window.onload = function() {
  accordionTogglers = document.getElementsByClassName('accToggler'); 
  accordionTogglers.each(function(toggler){
    //remember the original color
    toggler.origColor = toggler.getStyle('background-color');
    //set the effect
    toggler.fx = new Fx.Style(toggler, 'background-color');
  });
  //
  // Mouse effects
	accordionTogglers.each(function(toggler) {    
		var mouseFxs = new Fx.Styles(toggler, {duration: 250, wait: false});
		toggler.addEvents({
			'mouseover': function(){
				if (!toggler.hasClass('selected')) {
					mouseFxs.start({
						'background-color': '#e7ecf4',/*Mousover BG*/
						'color': '#336699',
						'border-bottom-color': '#fff',
						'border-right-color': '#fff',
						'padding-left': 10
					});
				}
			},
			'mouseout': function(){
				if (!toggler.hasClass('selected')) {
					mouseFxs.start({
						'background-color': '#004494',/*Mousout*/
						'color': '#fff',
						'border-bottom-color': '#fff',
						'border-right-color': '#fff',
						'padding-left': 0
					});
				}
			}
		});
	});
  //
  
  accordionContents = document.getElementsByClassName('accContent');
  
  accordion = new Fx.Accordion(accordionTogglers, accordionContents,{
    //when an element is opened change the background color to blue
    start: 'open-first', //all closed
	display:0,
	//opacity: true,
	alwaysHide:true,
	onActive: function(toggler){
      //toggler.fx.start('#685555');
	  toggler.addClass('selected');
				var accTitleOnOff = new Fx.Styles(toggler, {wait: false, duration: 350});
				accTitleOnOff.start({
					'background-color': '#e7ecf4',/*aktiver BG*/
					'color': '#396995', /*aktive Textfarbe*/
					'border-bottom-color': '#fff', /*aktiver Rahmen unten*/
					'border-right-color': '#fff',
					'padding-left': 10
				});
	  
    },
    onBackground: function(toggler){
      //change the background color to the original (green)
      //color when another toggler is pressed
	  //
      //toggler.setStyle('background-color', toggler.origColor);
	  //
	  	toggler.removeClass('selected');
				var accTitleOnOff = new Fx.Styles(toggler, {wait: false, duration: 350});
				accTitleOnOff.start({
					'background-color': '#004494',/*erster Staus nach Laden*/
					'color': '#fff',
					'border-bottom-color': '#fff',
					'border-right-color': '#fff',
					'padding-left': 0
				});
    }
  });
};