// accordion.js

/**
 * The Accordion class creates a group of Elements that are toggled when 
 * their handles are clicked. When one Element toggles into view, the others 
 * toggle out.
 * The new Accordion is created when the DOM has loaded.
 */
window.addEvent('domready', function() {
	
	// Hover styling
	var active = function() {
		setTogglerBG(this, 'active');
	};
	var normal = function() {
		setTogglerBG(this, 'normal');
	};
	var hover = function() {
		setTogglerBG(this, 'hover');
	}
	
	var acc1 = new Accordion ( 
		$$('.accordionHeader.one', '.accordionHeader.one.first', '.accordionHeader.one.last'), 
		'div.accordionContent.one', {	
			opacity : true,
			alwaysHide : true,
			display: 0, // -1,
			onActive: function(toggler, element) {
				toggler.removeEvent('mouseover', hover);
				toggler.removeEvent('mouseout', normal);
				setTogglerBG(toggler, 'active');
			},
			onBackground: function(toggler, element) {
				toggler.addEvent('mouseover', hover)
				toggler.addEvent('mouseout', normal);
				setTogglerBG(toggler, 'normal');
			}
		}
	);
	
	var acc2 = new Accordion (
		$$('.accordionHeader.two', '.accordionHeader.two.first', '.accordionHeader.two.last'), 
		'div.accordionContent.two', {	
			opacity : true,
			alwaysHide : true,
			display: 0, // -1,
			onActive: function(toggler, element) {
				toggler.removeEvent('mouseover', hover);
				toggler.removeEvent('mouseout', normal);
				setTogglerBG(toggler, 'active');
			},
			onBackground: function(toggler, element) {
				toggler.addEvent('mouseover', hover)
				toggler.addEvent('mouseout', normal);
				setTogglerBG(toggler, 'normal');
			}
		}
	);
} );

/**
 * Sets the appropriate BG for accordion togglers.
 * 
 * @param {Object} toggler The toggler element.
 * @param {String} state Active, normal or hover state BG.
 */
function setTogglerBG(toggler, state) {
	if (toggler.hasClass('first')) {
		if (state == 'active') {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_head_active.gif) top left no-repeat');
		} else if (state == 'hover') {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_head_hover.gif) top left no-repeat');
		} else {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_head.gif) top left no-repeat');
		}
	} else if (toggler.hasClass('last')) {
		if (state == 'active') {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_center_active.gif) top left no-repeat');
		} else if (state == 'hover') {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_bottom_hover.gif) top left no-repeat');
		} else {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_bottom.gif) top left no-repeat');
		}
	}	else {
		if (state == 'active') {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_center_active.gif) top left no-repeat');
		} else if (state == 'hover') {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_center_hover.gif) top left no-repeat');
		} else {
			toggler.setStyle('background', 
				'url(http://www.surf-magazin.de/wp-content/themes/index_theme/gfx/accordion/accordion_center.gif) top left no-repeat');
		}
	}
}