var co = 1;
var tmpC = c;
var copyId;


var timeLineWidth = 288;

var timeLineDivs;

document.observe("dom:loaded", function() {
	
	// Wenn nur ein Teaserbilder vorhanden vor/zurueck ausblenden
	if ( c == 3 ){
		$('moveForward').hide();
		$('moveBackward').hide();
		
	}else{
		// Erstelle das Div vor dem ersten für den Fall, dass es gleich nach Links gehen soll
		
		moveElementsLeft();
		
		// wenn nur vier Einträge, dann wird der nächste rechte Eintrag nicht vorhanden sein und erst geladebn
		// wenn die Bewegung vollendet ist. Hier müssen wir den den Letzten bzw. den Div welcher nun vor dem ersten
		// steht kopieren und wieder hinten ran hengen.
		if(c == 4){
			copyElement();
		}
		
	}
	
});

// Aktiviert die Buttons
function activateButtons(){
	$('moveForward').onclick = new Function("moveright();");
	$('moveBackward').onclick = new Function("moveleft();");

}

// Deaktiviert die onClick Funktion
function deactivateButtons(){
	$('moveForward').onclick = new Function("");
	$('moveBackward').onclick = new Function("");
}

// Fügt am Anfang der Liste das letzte Element hinzu
function moveElementsLeft(){
	timeLineDivs = $('timeline').childElements()
	//timeLineTextDivs = $('timeline_text').childElements()
	
	
	$(timeLineDivs[0].id).insert({before: timeLineDivs[c-1]});
	//$(timeLineTextDivs[0].id).insert({before: timeLineTextDivs[c-1]});
	
	timeLineDivs = $('timeline').childElements()
	
	/*if(!timeLineDivs[0].style.backgroundImage)
		timeLineDivs[0].style.backgroundImage = "url(.."+$(timeLineDivs[0].id+"_background").innerHTML+")";
	*/
	setTimelineStyle();
}

// Fügt am Ende der Liste das erste Element hinzu
function moveElementsRight(){
	
	timeLineDivs = $('timeline').childElements()
	//timeLineTextDivs = $('timeline_text').childElements()
	
	
	
	$(timeLineDivs[c-1].id).insert({after: timeLineDivs[0]});
	//$(timeLineTextDivs[c-1].id).insert({after: timeLineTextDivs[0]});
	
	timeLineDivs = $('timeline').childElements()
	
	/*if(!timeLineDivs[2].style.backgroundImage)
		timeLineDivs[2].style.backgroundImage = "url(.."+$(timeLineDivs[2].id+"_background").innerHTML+")";
	*/
	setTimelineStyle();
}
	
// Setzt die Positionsdaten neu, da der Move Effekt nur zur Darstellung dient und nicht zur Positions-
// verschiebung
function setTimelineStyle(){
	
	$('timeline').style.position="relative";
	$('timeline').style.left= -timeLineWidth+"px";
	$('timeline').style.top="0px";
	
	/*$('timeline_text').style.position="relative";
	$('timeline_text').style.left= -timeLineTextWidth+"px";
	$('timeline_text').style.top="0px";
	*/
}


// Wenn der rechte Button gedrückt wurde, wird die Position der Timeline nach links geschoben 
function moveright(){		
	
	deactivateButtons();
	// erstelle eine Kopie des letzten Eintrages
	if(tmpC == 4 && tmpC == c){
		copyElement();
	}else 
	// die Kopie muss gelöscht werden und eine neue muss erstellt werden
	if(tmpC == 4 && tmpC != c){
		deleteElement();
		copyElement();
	}
	
	new Effect.Move($('timeline'), { x: -timeLineWidth, y: 0 });		
	//new Effect.Move($('timeline_text'), { x: -timeLineTextWidth, y: 0 });		
	co++;

	
	setTimeout('activateButtons()', 700);
	setTimeout('moveElementsRight()', 700);
	
	return;	
}

// Wenn der linke Button gedrückt wurde, wird die Position der Timeline nach rechts geschoben 
function moveleft(){		
	
	deactivateButtons();
	// die Kopie muss gelöscht werden, damit nicht zwei gleiche hintereinnader stehen
	if(tmpC == 4 && tmpC != c){
		deleteElement();
	
	}
	
	new Effect.Move($('timeline'), { x: timeLineWidth, y: 0 });		
	//new Effect.Move($('timeline_text'), { x: timeLineTextWidth, y: 0 });		
	co--;
	
	setTimeout('activateButtons()', 700);
	setTimeout('moveElementsLeft()', 700);
	
	return;		
}	
// wenn nur vier Einträge, dann wird der nächste rechte Eintrag nicht vorhanden sein und erst geladebn
// wenn die Bewegung vollendet ist. Hier müssen wir den den Letzten bzw. den Div welcher nun vor dem ersten
// steht kopieren und wieder hinten ran hengen.
function copyElement(){
	timeLineDivs = $('timeline').childElements()
	
	var cp = $(timeLineDivs[0].id).cloneNode(true);
	cp.id = cp.id+"_copy";
	$(timeLineDivs[c-1].id).insert({after: cp});
	copyId = cp.id;
	c = c+1;
}
// löscht das lezte element um zu verhindern, dass zwei gleiche Element hintereinnander stehen
function deleteElement(){
	
	
	$(copyId).remove();
	c = tmpC;
}