var tabs = new Array();
var tabs_nodes = new Array ();
var tabActiveIndex = 0;
var firstTab = document.URL.substr(document.URL.lastIndexOf('#')+1);
firstTab=firstTab.replace(/%C3%BC/g, "ue");
firstTab=firstTab.replace(/%C3%B6/g, "oe");
firstTab=firstTab.replace(/%C3%A4/g, "ae");
firstTab=firstTab.replace(/%C3%9C/g, "Ue");
firstTab=firstTab.replace(/%C3%96/g, "Oe");
firstTab=firstTab.replace(/%C3%84/g, "Ae");


function init() {
	//hole alle Frames und speichere deren namen
	
	
	if ($('tabs1') != null)
	{
		
		if(Prototype.Browser.Gecko||!!navigator.userAgent.match('Chrome')||Prototype.Browser.Opera)
			var b_i=3;
		else 
			var b_i=0;
		//baue alle tabs nach 
		/*
		"<div class=\"ro\"><div class=\"lo\"><div class=\"ru\"><div class=\"lumitte\"><div class=\"tab_inhalt\"> 
		<a href=\"#zubehoer\" onclick=\"return false\" ><img src=\"/js/tab/images/zubehoer_icon.gif\" />".ZUBEHOER."</a>
		</div></div></div></div></div>";
		*/
		var text;
		var tab_headers = $$('#tabs1 li');
		var original_node;
		var ro;
		var lo;
		var ru;
		var lu;
		var tab_inhalt;
		var i = 0;
		tab_headers.each(function(e){
			
			original_node = e.firstDescendant();
			
			
			//text = e.firstChild.text
			ro = new Element('div', { 'class': 'ro'});
			lo = new Element('div', { 'class': 'lo'});
			ru = new Element('div', { 'class': 'ru'});
			if (i >0 )
				lu = new Element('div', { 'class': 'lumitte'});
			else
				lu = new Element('div', { 'class': 'lu'});
			
			tab_inhalt = new Element('div', { 'class': 'tab_inhalt'});
			
			ro.appendChild(lo);
			lo.appendChild(ru);
			ru.appendChild(lu);
			lu.appendChild(tab_inhalt);
			tab_inhalt.appendChild(original_node);
			
			
			for(i = 0; i < e.childNodes.length; i++)
				e.removeChild(e.firstChild);

			e.appendChild(ro);
			
			i++;
		});
		
		for (var i = 0; i < $('example1').childNodes.length ; i++)
		{
			if($('example1').childNodes[i].nodeName == 'DIV')
			{	
				tabs_nodes.push($('example1').childNodes[i]);
				
			}
		}
		for(var i = 0; i<tabs_nodes.length; i++)
			tabs.push(tabs_nodes[i].id.substr(0,tabs_nodes[i].id.length-5));
		
		//setze auf jedes element ein on click event
		
		
		
		for(var j = 0; j < tabs.length; j++)
		{
			
			$$('a[href="#'+tabs[j]+'"]').each(function(element){
				
				element.observe('click', function(s) {
					
					changeTab(s);
				});
				
			});
//			$$('a[href="#'+tabs[j]+'"]')[0].setAttribute("onclick", "return false;");
			$$('a[href="#'+tabs[j]+'"]').each(function(element){
				element.onclick= function (){ return false; };

			});
			
		}
		
		//alle Elemente außer das erste unsichtbar machen
		for(var i = 1; i < tabs.length; i++)
		{
			
			$(tabs[i] + '_text').toggle();
			
		}	
		
		//das erste markieren
		var first_i;
		
		
		
		if($(firstTab.toLowerCase() + '_text') != undefined)
		{
			
			for(var i = 0; i<tabs.length; i++)
			{
				
				if (tabs[i].toLowerCase() == firstTab.toLowerCase())
				{
					first_i = i;
					break;
				}
			}
			
			//setze den aktiven tab hidden falls es nicht der angeklickte ist
			if (tabActiveIndex != i)
			{
				//setze den alten hidden
				
				$(tabs_nodes[tabActiveIndex]).hide();
				
				//den neuen visible
				$(tabs_nodes[i]).show();
				tabActiveIndex = i;
				setActive(i);
			}
			
			setActive(first_i);
		}
		else
			setActive(0);
	
	}
}

function changeTab( i ) {
	
	//falls event target ein image ist == undefined, else ...
	if($(Event.element(i).parentNode).href == undefined)
		var result = $(Event.element(i)).href;
	else
		var result = ($(Event.element(i).parentNode).href);
	
	result = result.substr(result.indexOf('#')+1);
	
	
	
	//suche den index des tabs
	Ende: for (var j = 0 ; j < tabs.length; j++)
	{
		if (result == tabs[j])
		{
			i = j;
		
			break Ende;
		}
	}
	
	
	
	//setze den aktiven tab hidden falls es nicht der angeklickte ist
	if (tabActiveIndex != i)
	{
		//setze den alten hidden
		
		$(tabs_nodes[tabActiveIndex]).hide();
		
		//den neuen visible
		$(tabs_nodes[i]).show();
		tabActiveIndex = i;
		setActive(i);
	}
	
	
}


document.observe("dom:loaded", function() { 
	init();
});

function setActive(i)
{
	
	//altes deaktivieren
	var exist = document.getElementsByClassName('lo_aktiv')[0];
	if(exist != undefined)
	{
		document.getElementsByClassName('lo_aktiv')[0].className = 'lo';
		document.getElementsByClassName('ro_aktiv')[0].className = 'ro';
		if(document.getElementsByClassName('lu_aktiv')[0] != undefined)
			document.getElementsByClassName('lu_aktiv')[0].className = 'lu';
		else
			document.getElementsByClassName('lumitte_aktiv')[0].className = 'lumitte';
		document.getElementsByClassName('ru_aktiv')[0].className = 'ru';
		document.getElementsByClassName('tab_inhalt_aktiv')[0].className = 'tab_inhalt';
	}
	
	var target = $$('#tabs1 li')[i];

	var target_divs = target.select('div');
	
	target_divs.each(function(item) {
		item.className = item.className + '_aktiv';
	});
}