$(document).ready(function(){
	
	var imgPath = 'http://htmlcss.de/img/';
	//var imgPath = 'img/';
	// ___ use lieghtbox for rel="lightbox" hrefs _______________________________________
	$(function() {
		$('a[@rel*=lightbox]').lightBox({
				
			imageLoading:			imgPath+'lightbox-ico-loading.gif',		// (string) Path and the name of the loading icon
			imageBtnPrev:			imgPath+'lightbox-btn-prev_de.gif',			// (string) Path and the name of the prev button image
			imageBtnNext:			imgPath+'lightbox-btn-next_de.gif',			// (string) Path and the name of the next button image
			imageBtnClose:			imgPath+'lightbox-btn-close_de.gif',		// (string) Path and the name of the close btn
			imageBlank:				imgPath+'lightbox-blank.gif',			// (string) Path and the name of a blank image (one pixel)
			
			txtImage:				'Bild',	// (string) Specify text "Image"
			txtOf:					'von'		// (string) Specify text "of"
			
		}); // Select all links that contains lightbox in the attribute rel
	});
	
	// ___ extend link to whole work-listing li _______________________________________
	
	$("ul#list_work li div.work_info").click(function(){
	  window.location=$(this).find("a").attr("href");
	  return false;
	});
	
	
	// ___ animate work-listing _______________________________________
	
	// Standardhoehe eines Elements speichern
	var elementHeight = $("ul#list_work li").css("height");
	//alert(elementHeight);
	
	// "px" String entfernen
	elementHeight = parseInt(elementHeight);
	//alert(elementHeight);
	
	// Anzahl der enthaltenen Elemente zaehlen
	var allElementsCounted = $('ul#list_work li').size();
	//alert(elementCounted);
	
	// Erstes Element der anzuzeigenden Elemente definieren
	var elementStart = "start";
	// Anzahl der anzuzeigenden Elemente definieren
	var elementStep = 5;
	// Beim ersten ausfuehren ist die Anzahl der anzuzeigenden Elemente auch das letzte anzuzeigende Element
	var elementStop = elementStep;
	//showElements(elementStart, elementStop);
	
	// Alle Elemente nach der Standard-Anzeigeanzahl verstecken
	$("ul#list_work li").slice(elementStep).css({ height:"0px" });
	
	// "Neuere" Button durch span ersetzen
	$("li.newer a").hide();
	$("li.newer").append("<span>Neuere inaktiv</span>");
	
	// Alle Elemente ausfindig machen
	var listElements = $("ul#list_work li");
	//alert(listElements[1]);
	
	$("li.older a").click(function () {
	  showElements(listElements, allElementsCounted, elementStep, elementHeight, "next");
	  
	  return false;
    });
	
	$("li.newer a").click(function () {
	  showElements(listElements, allElementsCounted, elementStep, elementHeight, "last");
	  
	  return false;
    });
});

function showElements(listElements, allElementsCounted, elementStep, elementHeight, way) {
	//alert("in function");
	//alert(elementHeight);
	for (var i = 0; i <= allElementsCounted; i++) {
		//alert("in for");
		
		// von jedem Element die Hoehe speichern
		elementHeightTemp = listElements[i].offsetHeight;
		
		//alert(i+" "+elementHeightTemp+" "+elementHeight);
		
		// wenn die Hoehe gleich der urspruenglichen Hoehe ist, dann ...
		if (elementHeightTemp == elementHeight) {
			//alert(i);
			
			// das Erste der naechsten anzuzeigenden Elemente
			if (way == "next") {
				var elementNextStart = i+elementStep;
			} else {
				var elementNextStart = i-elementStep;
			}
			//alert(elementNextStart);
			
			// das Letzte der naechsten anzuzeigenden Elemente
			var elementNextStop = elementNextStart+elementStep;
			//alert(elementNextStop);
			
			if (way == "next") {
				if (elementNextStart <= allElementsCounted) {
					changeElementsAnimation(elementNextStart, elementNextStop, elementHeight);
					
					$("li.newer span").remove();
					$("li.newer a").show();
					
					if (elementNextStop >= allElementsCounted) {
						$("li.older a").hide();
						$("li.older").append("<span>&Auml;ltere inaktiv</span>");
					}
				}
			} else {
				if (elementNextStart >= 0) {
					changeElementsAnimation(elementNextStart, elementNextStop, elementHeight);
					
					$("li.older span").remove();
					$("li.older a").show();
					
					if (elementNextStart <= 0) {
						$("li.newer a").hide();
						$("li.newer").append("<span>Neuere inaktiv</span>");
					}
				}
			}
			
			break;
		}
	}
}

function changeElementsAnimation(elementNextStart, elementNextStop, elementHeight) {
	// alle Elemente verstecken, um gleich die naechsten sichtbar zu machen
	$("ul#list_work li").animate({
		  height: "0",
		  opacity: "hide"
	}, "slow");
	
	// naechste Elemente anzeigen
	$('ul#list_work li').slice(elementNextStart, elementNextStop).animate({
		  height: elementHeight,
		  opacity: "show"
	}, "slow");
}