// Ein AjaxRequest holt immer max+1 Bilder um zu schauen ob es einen Next Button braucht. angezeigt werden immer nur max Bilder!
function initGalerie() {
	curPicPos=0; // globale Variable
	if($("photos")) {
		if($("photos").getElements("li").length>max) {
			$("photos").setStyle("height",$("photos").getSize().y+"px");
			var loading = new Element("img", {
				"id": "loading",
				"src": "/fileadmin/images/layout/25-1.gif",
				"styles": {
					"position": "absolute",
					"display": "block",
					"margin-left": (($("photos").getSize().x / 2) - 30).toInt() +"px",
					"margin-top": (($("photos").getSize().y / 2) - 30).toInt() + "px",
					"display": "none",
					"z-index": "666"
				}
			});
			$("photos").adopt(loading);
			$("photos").getElement("ul").setStyles({
				"position": "absolute",
				"width": $("photos").getSize().x+"px"
			});
			// es gibt mind. noch ein 15tes Bild
			// erstelle Navi
			var next = new Element("h4", {
				"id": "next_pics",
				"text": ">",
				"styles": {
					"cursor": "pointer",
					"margin": "0 0 0 7px"
				}
			});
			var prev = new Element("h4", {
				"id": "prev_pics",
				"text": "<",
				"styles": {
					"cursor": "pointer",
					"margin": "0 7px 0 0",
					"display": "none"
				}
			});
			$("photos").getElement("h4").addClass("title");
			prev.inject($("photos").getElement("h4.title"),"before");			
			next.inject($("photos").getElement("h4.title"),"after");
			addNextPrevEvents();
		}
	}
}

function changeImgs(begin) {
    removeNextPrevEvents();
    new Fx.Tween($("photos").getElement("ul"), { "property": "opacity", "duration": "short", "onComplete": function() {
	    $("loading").setStyle("display","block");
	    $("photos").getElement("ul").dispose();
		picsRequest = new Request({ 
			"url": "/index.php?id="+pageId+"&type=661&begin="+begin,
			"link": "ignore",
			"onComplete": function(respText,respXML) {
				var root = respXML.getElementsByTagName("pics");
				var items = root[0].getElementsByTagName("item");
				if(items.length>0) {
					var newUl = new Element("ul",{
						"styles": {
							"position": "absolute",
							"width": $("photos").getSize().x+"px"
						}
					});
					var length = items.length;
					if(items.length>max) {
						// next bleibt bestehen, letztes Bild wird nicht ausgeben
						length=length-1;
					}
					var imgStr = Array();
					for (var i=0; i<length; i++) {
						imgStr[i] = items[i].childNodes[0].firstChild.nodeValue;
					}
					/* preload all images */
					var myImages = new Asset.images(imgStr,{
						"onComplete": function () {
							for(var i=0; i<length; i++) {
								var li = new Element("li");
								var mLink = new Element("a",{
									"rel": "lightbox[park_"+begin+"_pics]",
									"href": items[i].childNodes[1].firstChild.nodeValue
								}).adopt(myImages[i]);
								li.adopt(mLink);
								newUl.adopt(li);
							}
							newUl.setProperty("class",begin);
//							new Fx.Tween($("photos").getElement("ul"), { "property": "opacity", "duration": "short", "onComplete": showNewUl.bind(newUl)}).start(0);
							showNewUl.run("",newUl);
							if(items.length>max) {
								$("next_pics").setStyle("display","inline");
							}
							else {
								$("next_pics").setStyle("display","none");
							}
							if(curPicPos>=max) {
								$("prev_pics").setStyle("display","inline");
							}
							else {
								$("prev_pics").setStyle("display","none");
							}
						}
					});
				}
				picsRequest = null;
			}
		}).send();
	}}).start(0);
}

var showNewUl = function() {
	this.setStyle("opacity",0);
    $("loading").setStyle("display","none");
	$("photos").adopt(this);
	this.fade(1);
    Mediabox.scanPage();
	addNextPrevEvents();
}

function addNextPrevEvents() {
	// next
	$("next_pics").addEvent("click", function(el) {
		if(!picsRequest) {
			curPicPos = curPicPos + max;
			changeImgs(curPicPos);
		}
	});
	// prev
	$("prev_pics").addEvent("click", function(el) {
		if(!picsRequest) {
			curPicPos = curPicPos-max;
			changeImgs(curPicPos);
		}
	});
}

function removeNextPrevEvents() {
	$("next_pics").removeEvents();
	$("prev_pics").removeEvents();
}