function Timeline(te, instanz) {
	//CONSTRUKTOR*********
		var timeEvents = te;	
		//letztes Array-Element kommt an den Anfang
		//damit der erste Eintrag beim Start sichtbar wird
		//timeEvents.unshift(timeEvents.pop());
		
		var schritte = 10;
		var breite = 100;
		
		/*
		Gleiche Jahreszahlen werden ausgelassen da diese nachher auf der 
		Timeline zusammen dargestellt werden	
		*/
		var anzahl=0;
		for(var i=0,tmp=""; i < timeEvents.length; ++i) { 
			if(tmp!=timeEvents[i][0]) anzahl++;
			tmp=timeEvents[i][0] 
		}
		
		var sichtbar = anzahl-2;	
		var divBezeichnung = "timediv";
		var idGoRight = null;
		var idGoLeft = null;
		var INSTANZ  = instanz;
        var infojustierung= new Array(0,0);
		var IEBug = false;
		if(navigator.appVersion.match(/MSIE 6/)) IEBug=true;
		if(navigator.appVersion.match(/MSIE 5/)) IEBug=true; 
	//********************
	
	
	//initialisierung
	this.init = function() {
		//Mouseover der Buttons erstellen
		var elem = document.getElementsByTagName("IMG");		
		for(var i=0; i < elem.length; ++i) {
			if(elem[i].getAttribute("set") == "mouseover") {
				elem[i].onmouseover = over;
				elem[i].onmouseout = over;
			}
		}
		writeTimeline();
		window[INSTANZ].move("rechts",0);
	}

	//justiert den Infolayer in der Position
    this.setInfoJustierung = function(x,y) {
        infojustierung[0] = x;
        infojustierung[1] = y;
    }
	
	//setzt das element für den event scroll right
	this.setIdGoRight = function(id) {
		idGoRight = id;
		document.getElementById(idGoRight).setAttribute("richtung","rechts");
		document.getElementById(idGoRight).setAttribute("start","0");
		document.getElementById(idGoRight).onmousedown = startMove;
	}
	
	//setzt das element für den event scroll left
	this.setIdGoLeft = function(id) {
		idGoLeft = id;
		document.getElementById(idGoLeft).setAttribute("richtung","links");
		document.getElementById(idGoLeft).setAttribute("start","0");
		document.getElementById(idGoLeft).onmousedown = startMove;
	}

	//Startet bei event die function move
	function startMove(dasEreignis) {
		var meinEreignis = dasEreignis || window.event;
		var ereignisQuelle = meinEreignis.target || meinEreignis.srcElement;
		
		var richtung = ereignisQuelle.getAttribute("richtung");
		var start = ereignisQuelle.getAttribute("start");
		if(richtung!="" && start!="")
			window[INSTANZ].move(richtung,start);
	}

	//lässt die divs in der timeline nach rechts bzw. links scrollen
	this.move = function(richtung,i) {
		if(richtung == "rechts" && i < breite/schritte) {
			for(var z=0; z < anzahl; ++z) {
				right(divBezeichnung+(z+1));
			}
			i++;		
			setTimeout("window."+INSTANZ+".move('rechts',"+i+")", 10);
		}
		
		if(richtung == "links" && i < breite/schritte) {		
			for(var z=0; z < anzahl; ++z) {
				left(divBezeichnung+(z+1));
			}		
			i++;		
			setTimeout("window."+INSTANZ+".move('links',"+i+")", 10);
		}
		
		function left(id) {
			var div = document.getElementById(id);
			var left = parseInt(div.style.left.replace(/px/, ""))-schritte;
			if(left < 0 - breite*2) left = breite*sichtbar - schritte;
			div.style.left = left+"px";
		}
		
		function right(id) {
			var div = document.getElementById(id);
			var left = parseInt(div.style.left.replace(/px/, ""))+schritte;
			if(left > breite*sichtbar) left = 0 - (breite*2) + schritte;;
			div.style.left = left+"px";
		}
	}

	//schreibt die Timeline in Verwendung von div's
	function writeTimeline() {
			var inhalt = "";
            var left = (0 - breite);
			var lastData = timeEvents[0][0];
			var data = new Array();
			
            for(var z=0,i=0; z < timeEvents.length; ++z) {
				
				if(lastData == timeEvents[z][0]) { //wenn letzter datensatz in der JahresZahl gelich dann sammeln
					data.push(z);	
					lastData = timeEvents[z][0]
				}
				else {	//wenn andere Jahreszahl dann die werte schreiben
					inhalt += writeJahrContent(data, left, i); //schreiben
					i++;
					
					data = new Array();	// löschen								
					data.push(z);		//aktuellen datensatz speichern
					lastData = timeEvents[z][0]					
					left += breite;
				}
				
				if(z+1 >= timeEvents.length) { //den letzten datensatz auch schreiben
					inhalt += writeJahrContent(data, left, i); //schreiben
				}
            }
			
			document.getElementById("timeline").innerHTML = inhalt;	
			anpassungHoehe();
			
			var infoField = document.getElementById("timlineInfofield");
			infoField.onmouseover = showinfoField;
			infoField.onmouseout = showinfoField;
			
			var elem = document.getElementsByTagName("DIV");		
			for(var i=0; i < elem.length; ++i) {
				if(elem[i].getAttribute("set") == "tc") {
					elem[i].onmouseover = showinfoField;
					elem[i].onmouseout = showinfoField;
				}
			}
	}

	//schreibt eine Jahreszahl mit allen inhalten
	function writeJahrContent(data, left, i) { //array mit ids // breite des divs // index der divs
		var tmp="";
		if(IEBug) tmp="timeDivsIEBug"; else tmp="timeDivs";
		
		var inhalt = '<div class="' +tmp+ '" id="'+divBezeichnung+(i+1)+'" style="position:absolute; float:left; left:'+left+'px; top:0px; height:auto; width:'+breite+'px;">';
			for(var i=0; i < data.length; ++i) {
				inhalt += '<div set="tc" content="'+data[i]+'" class="timeContent pngtrans">'+timeEvents[data[i]][1]+'</div>';	
			}
			inhalt += '<div id="timeJahr'+data[0]+'" class="timeJahr"><table border="0" cellspacing="0" cellpadding="0"><tr><td height="30" valign="top">'+timeEvents[data[0]][0]+'</td></tr></table></div>';
		inhalt +='</div>';	
		return inhalt;
	}

	function anpassungHoehe() {
		var hoehe = 0;
		
		var elem = document.getElementsByTagName("DIV");
		for(var i=0; i < elem.length; ++i) {
			if(elem[i].getAttribute("id"))
				if(elem[i].getAttribute("id").match(divBezeichnung)) {
					if(elem[i].offsetHeight > hoehe)
						hoehe = elem[i].offsetHeight;
				}		
		}		
		
		if(hoehe > 114) document.getElementById("timeline").style.height = hoehe+30+"px";
		else document.getElementById("timeline").style.height = 114+10+"px";
		var elem = document.getElementsByTagName("DIV");
		for(var i=0; i < elem.length; ++i) {
			if(elem[i].getAttribute("id")) {
				if(elem[i].getAttribute("id").match(divBezeichnung)) {
					if(hoehe > 114) elem[i].style.height = hoehe+30+"px";
					else elem[i].style.height = 114+10+"px";
				}
				if(elem[i].getAttribute("id").match(/timeJahr/)) {
					if(hoehe > 114) elem[i].style.top = hoehe - elem[i].offsetTop +"px";
					else elem[i].style.top =  100 - elem[i].offsetTop +"px";
				}
			}
		}
	}

	//setzt den Infodiv mit inhalt an die position einens Timestones
	function showinfoField(dasEreignis) {
		var meinEreignis = dasEreignis || window.event;
		var ereignisQuelle = meinEreignis.target || meinEreignis.srcElement;		
		
		if(ereignisQuelle.nodeName == "TD") return;
		if(ereignisQuelle.getAttribute("id") == "timlineInfofield") {
			infoField.style.display = "block";
			return;
		}
				
		var infoField = document.getElementById("timlineInfofield");
		if(infoField.style.display == "none") {
						
			//setzten der position top relativ zum eintrag
			infoField.style.top = (ereignisQuelle.offsetHeight + ereignisQuelle.offsetTop + infojustierung[1]) +"px";
			
			//content des Infodivs schreiben
			if(ereignisQuelle.getAttribute("content")) {
				infoField.style.left= (parseInt(ereignisQuelle.parentNode.style.left.replace("px",""))+45+infojustierung[0])+"px";
				
				var inhalt =   '<table width="248"  height="100%" border="0" cellspacing="0" cellpadding="0" >';
				inhalt +=  '	<tr>';
				inhalt +=  '		<td height="15" class="info_tbBack_top pngtrans"></td>';
				inhalt +=  '	</tr>';
				inhalt +=  '	<tr >';
				inhalt +=  '		<td height="100%" class="info_tbBack pngtrans" valign="top">';
				inhalt +=  '			<div class="info_content">' + timeEvents[parseInt(ereignisQuelle.getAttribute("content"))][2] + '</div>';
				inhalt +=  '		</td>';
				inhalt +=  '	</tr>';
				inhalt +=  '	<tr>';
				inhalt +=  '		<td height="10" class="info_tbBack_bottom pngtrans"></td>';
				inhalt +=  '	</tr>';
				inhalt +=  '</table>';				
				infoField.innerHTML = inhalt;
			}
			infoField.style.display = "block";
		}
		else{
			infoField.style.display = "none";
		}
	}


	//wechselt bilder für mouseover aus (*_over.* // *_norm.*)
	function over(dasEreignis) {
		var meinEreignis = dasEreignis || window.event;
		var ereignisQuelle = meinEreignis.target || meinEreignis.srcElement;
					
		if(ereignisQuelle.src.match(/over/)) {
			ereignisQuelle.src = ereignisQuelle.src.replace("_over", "_norm");
		}
		else {
			ereignisQuelle.src = ereignisQuelle.src.replace("_norm", "_over");
		}
	}	
}