var elemno = 1;
var elemCount = 0;
var clickDisabled = false;
var manuell = false;

$(document).ready(function(){	
	portoInit();
	portoEventInit();	
	scrollAnimation(0);
	
	//window.setTimeout("slideNext()", "10000");
});

function portoInit(){
	
	var listOfElements = $("ul#items li"); //Liste mit allen Elementen
	elemCount = listOfElements.length;

	$("ul#items li:first").css("margin-right", "125px");
	$("ul#items li:eq(1)").addClass("active elem1"); //Start-Element
	$("ul#items li:eq(1) img:gt(0)").fadeOut(1); //StartElement: Ausblenden ab der 2. Grafik einer Referenz
	
	for (i = 0; i < listOfElements.length; i++) {
		if (i != 1) {		
			$(listOfElements[i]).addClass("preview elem" + i);
			//Größe der Grafiken verkleinern
			$(".elem" + i + " img").animate({
				width: "300px"
			}, 0);
			//Ausblenden ab der 2. Grafik einer Referenz
			$(".elem" + i + " img:gt(0)").fadeOut(1);
		}
	}
	

}

function portoEventInit(){

 	//Sperrung des Klicks während des Ein/Ausblendens
	$("#next").mouseover(function(){
		$("#next").attr("src", "tl_files/img/portofolio_slider/next_hover.png");
	});
	$("#next").mouseout(function(){
		$("#next").attr("src", "tl_files/img/portofolio_slider/next.png");
	});
	
	$("#prev").mouseover(function(){
		$("#prev").attr("src", "tl_files/img/portofolio_slider/prev_hover.png");
	});
	$("#prev").mouseout(function(){
		$("#prev").attr("src", "tl_files/img/portofolio_slider/prev.png");
	});
	
	$("#next").click(function(){
		manuell = true;
		slideNext();
	});
	$("#prev").click(function(){
		manuell = true;
		slidePrev();
	});
	
}

function slideNext(){
	if (!clickDisabled) {
		if (elemno < elemCount - 1) {
			elemnolast = elemno;
			elemno++;
			slide(elemno, elemnolast, "-=441px");
		}
	}
}

function slidePrev(){
	if (!clickDisabled) {
		if (elemno > 0) {
			elemnolast = elemno;
			elemno--;
			slide(elemno, elemnolast, "+=441px");
		}
	}
}

function slide(elemno, elemnolast, slide){
	//Laufende Animation stoppen und auf Anfangszustand setzen
	$(".elem" + elemnolast + " img").stop(true, false);
	$(".elem" + elemnolast + " img").animate({
		marginTop: "0px"}, 500);
	
	//Nächstes Element vergrößern
	$(".elem" + elemno).animate({
		height: "176px",
		width: "345px",
		marginTop: "0px",
		marginRight: "95px"
	}, 200);
	//Größe der Grafik vergrößern
	$(".elem" + elemno + " img").animate({
		width: "345px"}, 200);
	
	//Eine Position schieben
	$("ul#items").animate({
		marginLeft: slide
	}, 800, function(){ //Nach Animation aktives Element verkleinern
		$(".elem" + elemnolast).animate({
			height: "173px",
			width: "320px",
			marginRight: "+=25",
			marginTop: "10"}, 200);
		//Größe der Grafik verkleinern
		$(".elem" + elemnolast + " img").animate({
			width: "320px"}, 200);
		
		//Klassen tauschen der alten Elements
		$(".elem" + elemnolast).addClass("preview"); 
		$(".elem" + elemnolast).removeClass("active animate");
	});
	
	//Klassen tauschen des neuen aktiven Elements
	$(".elem" + elemno).addClass("active animate");
	$(".elem" + elemno).removeClass("preview");
	
	scrollAnimation(0);
}


function scrollAnimation(index){
	//Berechne die maximale Verschiebung
	var referenz = $(".elem" + elemno + " img");
	offset = (referenz[index].height - 172) * -1; 

	//scrollen
	$(".elem" + elemno + " img:eq(" + index +")").delay(2000).animate({
		marginTop: offset + "px"}, 2500).delay(2000).animate({
		marginTop: 0}, 2500, function(){
			if (referenz.length > 1) {
				//Aktuelles Element ausblenden
				clickDisabled = true;
				$(".elem" + elemno + " img:eq(" + index + ")").fadeOut(500);
				
				if (index + 1 >= referenz.length) 
					index = 0; //Index reseten	
				else 
					index++; //Index erhöhen
				//nächstes Element einblenden
				$(".elem" + elemno + " img:eq(" + index + ")").fadeIn(500, function(){
					clickDisabled = false; //Sperrung des Clicks aufheben
				});
			}
			
			//Verzögerung bis zur erneuten Wiedergabe
			$(".elem" + elemno + " img:eq(" + index +")").animate({
				marginTop: 0}, 8000, function(){
					/*if(!manuell) slideNext();
					else scrollAnimation(index);*/
					 scrollAnimation(index);
				});
		});
	
}