/*
	accordion.js
	
	Diese Klasse ist abhängig von folgenden Funktionen aus global.js:
		- addLoadEvent
		- addEvent
		- getElementsByClassName
		- Function.prototype.bind
*/

var Accordion = {
	
	//Start der Konfiguration
	
	timeInterval: 5, //Durchschnittliche Geschwindigkeit der Animation (kleinerer Wert = schneller)
	expSpeed: 4, //Beschleunigung der Animation (höherer Wert = geringere Beschleunigung)
	startExpanded: false, //erstes Item ist beim Laden der Seite bereits geöffnet
	
	//Ende der Konfiguration
	
	
	//---------------------------------
	
	init: function()
	{
		var accordions = getElementsByClassName("accordion_box");
		for (var i in accordions)
			new AccordionClass(accordions[i]);
	}
};

var AccordionClass = function(accordionBox)
{
	//Initialisierung
	this.accordionBox = accordionBox;
	this.expSpeed = Accordion.expSpeed;
	this.timeInterval = Accordion.timeInterval;
	
	this.headers = getElementsByClassName("accordion_header", accordionBox);
	for (var i in this.headers)
	{
		this.headers[i].state = "collapsing";
		
		var href = document.createAttribute("href");
		href.nodeValue = "javascript:";
		this.headers[i].setAttributeNode(href);
		addEvent(this.headers[i], "click", this.getClick.bind(this));
	}
	
	//schliesse alle Inhaltsboxen
	this.contents = getElementsByClassName("accordion_content", accordionBox);
	for (var i in this.contents)
	{
		this.contents[i].maxHeight = this.contents[i].offsetHeight;
		this.contents[i].style.overflow = "hidden";
		this.contents[i].style.height = 0;
	}
	
	if (Accordion.startExpanded)
	{
		this.addActiveClassName(this.headers[0]);
		this.contents[0].state = "expanding";
		this.contents[0].style.height = this.contents[0].maxHeight + "px";
	}
};

AccordionClass.prototype = {
	getClick: function(e)
	{
		var target = e.target || e.srcElement;
		for (var i in this.headers)
		{
			if (this.headers[i] == target)
				var contentElement = this.contents[i];
		}
		
		if (contentElement.state == "expanding")
		{
			//setze Klasse auf Header, damit mit CSS stylebar
			this.removeActiveClassNames();
			this.startCollapse(contentElement);
		}
		else
		{
			this.removeActiveClassNames();
			this.addActiveClassName(target);
			this.startExpand(contentElement);
		}
	},
	
	setHeight: function(element, value)
	{
		element.style.height = value + "px";
	},
	
	getCurrentHeight: function(element)
	{
		return element.offsetHeight;
	},
	
	addActiveClassName: function(element)
	{
		element.className = element.className + " accordion_header_active";
	},
	
	removeActiveClassNames: function(element)
	{
		for (i in this.headers)
			this.headers[i].className = this.headers[i].className.replace("accordion_header_active", "");
	},
	
	startExpand: function(element)
	{
		//ermittle alle Elemente mit Status "expanding", und schliesse diese wieder
		for (i in this.contents)
		{
			if (this.contents[i].state == "expanding")
			{
				this.startCollapse(this.contents[i]);
			}
		}
		clearInterval(element.interval);
		element.state = "expanding";
		element.interval = setInterval(function(){this.animateBox(element, element.maxHeight)}.bind(this), this.timeInterval);
	},
	
	startCollapse: function(element)
	{
		clearInterval(element.interval);
		element.state = "collapsing";
		element.interval = setInterval(function(){this.animateBox(element, 0)}.bind(this), this.timeInterval);
	},
	
	animateBox: function(element, destHeight)
	{
		var currentHeight = this.getCurrentHeight(element);
		var maxHeight = element.maxHeight;
		var diff = destHeight - currentHeight;
		var dir = (diff < 0) ? -1 : 1;
		
		if(currentHeight != destHeight)
		{
			var moveHeight = Math.round((diff) / this.expSpeed);
			if (moveHeight == 0) moveHeight = 1 * dir;
			var newHeight = (currentHeight + moveHeight);
			this.setHeight(element, newHeight);
			var rate = (newHeight / maxHeight);
			element.style.opacity = rate;
			element.style.filter= "alpha(opacity=" + (rate * 100) + ")"; //IE
		}
		else
		{
			clearInterval(element.interval);
		}
	}
};

onDomLoaded(function(){Accordion.init()});
//addLoadEvent(function(){Accordion.init()}); //Initialisiere Accordions

