//// Initialisierung
$(document).ready(function(){
	$("img.dpaArticlePic:first").show().attr("active", "true");
	$("#dpaSinglePic").css("height", $("img.dpaArticlePic:first").height() + "px");

	//// Bildunterschrift setzen
	$("#dpaPicCaption").html($("img.dpaArticlePic:first").attr("title"));

	//// Text fuer dieNavigation
	$("div.dpaPicCount:first").html("<b>1</b> von " + $("img.dpaArticlePic").length + " Bildern");

	//// Navigation einblenden
	if($("img.dpaArticlePic").length > 1){
		$("#dpaPicsNav").show().animate({height:"20px"}, 500);
	}

	//// das zweite Bild wird vorgeladen
	$.preload($("img.dpaArticlePic").eq(1).attr("src"));

	//// Navigation per Klick
	$("#dpaNextPic").click(function(){ dpaPicNav(1); });
	$("#dpaPrevPic").click(function(){ dpaPicNav(0); });

	//// Vergroesserung
	$("img.dpaArticlePic").click(function(){
		$("body").append("<div id='dpaLayer'></div><div id='dpaCloseLargePic'>schliessen x</div><img id='dpaLayerPic'></img>");
		$("#dpaLayer").css("filter","alpha(opacity=0)").height($(document).height()+"px").show();

		//// Grosses Bild vorladen - ist das Bild komplett geladen, wird es per Callback angezeigt
		$.preload($(this).attr("src").replace(/\/th/, "").replace(/_dpa_article/, ""), {"load":function(r){
			$("embed, object, iframe").css({"visibility":"hidden"});
			$("#dpaLayer").fadeTo("normal", 0.7);
			$("#dpaLayerPic").show().fadeTo("fast", 1);
			$("#dpaLayerPic").attr("src", r.currentTarget.src).height(r.currentTarget.height).width(r.currentTarget.width).css({
				marginLeft:-(r.currentTarget.width/2)+"px",
				marginTop:-(r.currentTarget.height/2)+"px"
			});
			$("#dpaCloseLargePic").css({
				marginLeft:((r.currentTarget.width/2)-$("#dpaCloseLargePic").width())+"px",
				marginTop:-(r.currentTarget.height/2)+"px"
			});

			dpaReloadETracker();
		}});

		//// Grossansicht schliessen
		$("#dpaLayerPic, #dpaCloseLargePic").click(function(){
			$("#dpaLayerPic, #dpaLayer, #dpaCloseLargePic").fadeOut("fast", function(){
				$(this).remove();
				dpaReloadETracker();
			});
			$("embed, object, iframe").css({"visibility":"visible"});
		});
	}).css("cursor", "pointer");
});


//// Navigation durch die einzelnen Bilder
function dpaPicNav(direction){
	dpaReloadETracker();
	//// aktuelles Bild ausblenden
	$("img.dpaArticlePic[active='true']").fadeOut("fast", function(){
		$pic = $(this);
		if(direction == 0){
			$next = $pic.prev();
			var walkDirection = -1;
		} else {
			$next = $pic.next();
			var walkDirection = 1;
		}

		//// aktuelle Nr des Bildes aus dem Text der Navigation holen,
		//// um beim Ende der Liste zum ersten / letzten Bild zu springen
		$pic.picNo = $("div.dpaPicCount b").html()*1;
		if($pic.picNo == 1 && direction == 0){
			$next = $("img.dpaArticlePic:last");
			$pic.picNo = $("img.dpaArticlePic").length+1;
		}
		if($pic.picNo == $("img.dpaArticlePic").length && direction == 1){
			$next = $("img.dpaArticlePic:first");
			$pic.picNo = 0;
		}

		//// aeusseren Container ggf. vergroessern / verkleinern
		if($next.height() !== 0){
			$("#dpaSinglePic").animate({height:$next.height() + "px"}, 500);
		}

		//// neue Nr des Bildes in die Navigation schreiben
		$("div.dpaPicCount b").html($pic.picNo+walkDirection);

		//// das neue Bild bekommt das Attribut 'active'
		$pic.removeAttr("active");
		$next.attr("active", "true").fadeIn("fast");
		//// neue Bildunterschrift setzen
		$("#dpaPicCaption").html($next.attr("title"));

		//// naechstes Bild vorladen
		$.preload($next.next().attr("src"));
	});
}