/**
*	@author Tobias Strunz
*	@version 1.0
*	@date 26.01.2010
*
*	@short Content Slider auf Prototype Basis
*
*	Dieses Script Simuliert den Accordion Effect ohne auto Height
*	Dabei ist wichtig, dass niemals ein Element "display:none" gesetzt
*	wird. Es wird mit "overflow:hidden" und "height:0px" ausgeblendet (SEO)
*
**/

// Variablendeklarationen
var accordionWrapper 		= null;
var accordionHeadlines		= null;

var headlineClass 			= '.accordionHeadline';					
var headlineActiveClass 	= '.accordionHeadlineActive';
var contentClass 			= '.accordionContent';
var headlineClassName 		= 'accordionHeadline';
var headlineActiveClassName = 'accordionHeadlineActive';
var wrapperId 				= 'accordionReferenz';

document.observe("dom:loaded", function(){	
	// Variableninitialisierungen
	accordionWrapper = $(wrapperId);
	accordionHeadlines = $$(headlineClass);
	accordionContents = $$(contentClass);
	
	//Alle Contentelemente ausblenden
	accordionContents.each(function(content){
			content.setStyle({
				overflow: 'hidden',
				height: '0px'
			});
	});
	
	accordionHeadlines.each(function(element){
		element.observe("click", function(){
			accordionClick(element);
		});
	});	
});

/*
*
*	Diese Funktion ist für das auf und zuklappen zuständig
*
*/
function accordionClick(element){

	var activeHeadline = $$(headlineActiveClass);
	
	/*
	*
	*	Falls das angeklickte Element identisch ist mit dem Aktiven, dann wird es eingeklappt,
	*	ansonsten wird erst das gerade Aktive (falls vorhanden) eingeklappt und danach das an-
	*	geklickte Element ausgeklappt
	*
	*/
	if(!(activeHeadline[0] === element)){	
		if(activeHeadline.length > 0) {
			activeHeadline[0].next(contentClass,0).morph(
				'height: 0px;'
			);
					
			activeHeadline[0].removeClassName(headlineActiveClassName);
			activeHeadline[0].addClassName(headlineClassName);	
		}		
		
		var contentElemente = element.next(contentClass ,0).childElements();
		var toHeight = 10;
		for(var x = 0; x < contentElemente.length; x++){
			toHeight += contentElemente[x].getHeight();
		}
		
		element.next(contentClass,0).morph(
				'height: ' + toHeight + 'px;'
			);
		element.addClassName(headlineActiveClassName);
		element.removeClassName(headlineClassName);	
	}
	else{
			element.next(contentClass,0).morph(
				'height: 0px;'
			);
					
			element.removeClassName(headlineActiveClassName);
			element.addClassName(headlineClassName);	
	}

}