var pic_no=1,//Beinhaltet die aktuelle Bild-Nr. für die Slideshow.
	pic_selected,//Die Nr. des Auswahlbildes, auf das geklickt wurde.
	to_shrink="a",
	to_enlarge="b",
	reg=/\/p[1-9]{1}\//,//Definition des Suchausdrucks zum Extrahieren der ID.
	ie6=false,//Wird auf TRUE gesetzt, wenn es sich um einen IE kleiner Version 7 handelt.
	img_preload=new Array(),
	info_img_pos={1:'-320px -128px', 2:'-384px -128px', 3:'-448px -128px', 4:'-512px -128px', 5:'-576px -128px', 6:'-320px -192px'},
	fade_to, slide_to, loop_to;//Die Variablen speichern die Timeout-ids

//Diese Funktion gibt zu einem Event das entsprechende Element zurück (z.B. bei onclick das Element, auf das geklickt wurde).
//Damit nicht jedes Mal die Browser-Unterscheidung gemacht werden muss, wird beim 1. Aufruf der Funktion die Funktion selbst überschrieben.
function eventElement(ereignis) {
	if (ereignis) {//Notation für Netscape/Mozilla etc.
		eventElement=function(ereignis) {
			return ereignis.target;
		}
	}
	else if (window.event) {//Notation für IE.
		eventElement=function(ereignis) {
			return event.srcElement;
		}
	}
	return eventElement(ereignis);
}

//Diese Funktion spielt die Animation mit den Top-Bildern ab und ruft sich rekursiv selbst wieder auf.
function info_loop() {
	//Info_div einblenden
	$('info_div').appear({ duration: 1.0 });
	//Info_div ausblenden
	fade_to=setTimeout('fade_div()',14000);
}

//Info-Div ausblenden
function fade_div() {
	$('info_div').fade({ duration: 1.0 });
	
	//Bilder "umblättern" aufrufen.
	slide_to=setTimeout('slide_pics()',1000);
}

//Text im Info-Div Ändern
function change_text(first) {
	if (first) {text_no=pic_no-1;} else {text_no=pic_no;}
	if (text_no==0) {text_no=6;}//Kommt als 1. Bild Nr. 6 (first=true), wird für text_no 0 errechnet.
	//Überschrift
	$('info_header').innerHTML=headers[text_no];
	//Listen-Elemente
	str="";
	for (i=0; i<list_items[text_no].length; i++) {
		str+="<li>" + list_items[text_no][i] + "</li>";
	}
	$('info_list').innerHTML=str;
	
	//Grafik ändern.
	if (ie6) {
		$('info_img').style.background="none";
		$('info_img').style.filter='progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src="./img/top_pics/p' + text_no + '/info_img.png")';
	} else {	
		$('info_img').style.backgroundPosition=info_img_pos[text_no];
	}
	
}

//Bilder "umblättern", währenddessen den Text im Info_div wechseln.
function slide_pics() {
	change_text();//Text im Info-Div Ändern
		
	slide_time=0.7;
	
	function change_style() {
		//Buchstaben wechseln.
		if (to_shrink=="a") {to_shrink="b"; to_enlarge="a";}
		else  {to_shrink="a"; to_enlarge="b";}
		
		//Jeweils die Angabe für left oder Right auf Null setzten, da ansonsten beide gesetzt wären und somit left vorgezogen wird.
		with ($('pict_left_' + to_enlarge).style) {width="0px";		left=null; right="475px";	zIndex=1;}
		with ($('pict_right_' + to_enlarge).style) {width="0px";	right=null; left="475px";	zIndex=1;}
		with ($('pict_left_' + to_shrink).style) {width="475px";	right=null; left="0px";	zIndex=2;}
		with ($('pict_right_' + to_shrink).style) {width="475px";	left=null; right="0px";zIndex=2;}
		
		$('pic_sel' + pic_no).style.backgroundPosition='-269px -32px'//Das bisherige Select-Rechteck auf inaktiv färben
		bf=pic_no;
		//Für die "to_enlarge"-Bilder eine neue src definieren.
		if (pic_selected) {//Wenn auf die Auswahl manuell geklickt wurdem wird dieses Bild verwendet.
			pic_no=pic_selected;
			pic_selected=false;//Zurücksetzen, damit bei einem "automatischen" Durchlauf hochgezählt wird.
		}
		else pic_no= pic_no==6 ? 1 : pic_no+1;//Ist 6 erreicht, wird wieder mit 1 begonnen, sonst um 1 hochgezählt.
		
		$('pic_sel' + pic_no).style.backgroundPosition='-277px -32px'//Das nun aktive Select-Rechteck auf aktiv färben
		
		$('pict_left_' + to_enlarge).src=$('pict_left_' + to_enlarge).src.replace(reg,"/p" + pic_no + "/");
		$('pict_left_' + to_enlarge).alt=alt_left[pic_no];
		
		$('pict_right_' + to_enlarge).src=$('pict_right_' + to_enlarge).src.replace(reg,"/p" + pic_no + "/");
		$('pict_right_' + to_enlarge).alt=alt_right[pic_no];
	}
	
	new Effect.Scale('pict_left_' + to_shrink, 0,
	{
		transition: Effect.Transitions.sinoidal,
		scaleY: false,//Verkleinerung nur in x-Richtung.
		duration: slide_time,
		scaleMode: {originalWidth: 475}
	}
	);
	new Effect.Scale('pict_right_' + to_shrink, 0,
	{
		transition: Effect.Transitions.sinoidal,
		scaleY: false,//Verkleinerung nur in x-Richtung.
		duration: slide_time,
		scaleMode: {originalWidth: 475}
	}
	);
	new Effect.Scale('pict_left_' + to_enlarge, 100,
	{
		transition: Effect.Transitions.sinoidal,
		scaleY: false,//Verkleinerung nur in x-Richtung.
		duration: slide_time,
		scaleMode: {originalWidth: 475},
		scaleFrom: 0
	}
	);
	new Effect.Scale('pict_right_' + to_enlarge, 100,
	{
		transition: Effect.Transitions.sinoidal,
		scaleY: false,//Verkleinerung nur in x-Richtung.
		duration: slide_time,
		scaleMode: {originalWidth: 475},
		scaleFrom: 0,
		afterFinish: change_style //Funktion zum Ändern der Style-Eigenschaften aller 4 Bilder
	}
	);
	
	//Start von vorne mit der Info_loop.
	loop_to=setTimeout('info_loop()',12000);
}

window.onload=function() { //Diese Funktion wird ausgeführt, sobald die Seite vollständig geladen ist.
		
	//Feststellen, ob es sich um IE6 handelt.
	var name = navigator.appName;
    var ua = navigator.userAgent;
    
	if (name == "Microsoft Internet Explorer") {
		var pos = ua.indexOf("MSIE");
		var version = ua.substring(pos + 5, pos + 9);
		version=parseFloat(version);
		
		if (version < 7) {//IE Version unter 7 benötigt einen Filter für transparente pngs.
			ie6=true;
		}
	}
	
	//------------------------------------
	//Eintragen der Bildschirmauflösung in die hidden-Felder mit der id "res1" bzw. "res2"
	var res=screen.width + 'x' + screen.height;
	if ($('res1')) $('res1').value=res;
	if ($('res2')) $('res2').value=res;
	
	//------------------------------------
	
	/*$('lang_arrow').onclick=function() {
		if ($('lang_select').style.display=="none") {$('lang_select').style.display="inline";}
		else {$('lang_select').style.display="none";}
	}*/
	
	//Text im info_div festlegen und Animation starten.
	if ($('pict_left_a')) {
		var pic_no_str=String($('pict_left_a').src.match(reg));
		pic_no=parseInt(pic_no_str.substr(2,2));
		
		var pic_no_b= pic_no==1 ? 6 : pic_no-1;
		$('pict_left_a').alt=alt_left[pic_no];
		$('pict_right_a').alt=alt_right[pic_no];
			
		$('pict_left_b').alt=alt_left[pic_no_b];
		$('pict_right_b').alt=alt_right[pic_no_b];
		
		change_text(true);
		fade_to=setTimeout('info_loop()',11000);
	}
	
	if ($('pic_sel')) $('pic_sel').onclick=function(e) {
		var element=eventElement(e),
			matches=element.id.match(/^pic_sel([1-6])$/);
		pic_selected=matches ? parseInt(matches[1]) : false;
		if (pic_selected && pic_selected!=pic_no) {
			
			//Die Timeouts bereinigen und die neuen Bilder aufrufen
			clearTimeout(fade_to);
			clearTimeout(slide_to);
			clearTimeout(loop_to);
			
			$('pict_left_' + to_enlarge).src=$('pict_left_' + to_enlarge).src.replace(reg,"/p" + pic_selected + "/");
			$('pict_right_' + to_enlarge).src=$('pict_right_' + to_enlarge).src.replace(reg,"/p" + pic_selected + "/");
			
			$('info_div').fade({ duration: 0.3 });
			
			slide_pics();
		}
	}
	
	var l=img_preload.length;
	img_preload[l] = new Image();
	img_preload[l].src="../img/sprites/spr_hv_a.png";
}