function showImagePopup(theimage, allimages) {

	// Loading- container anzeigen
	$('overImageWall').show();
	$('overImageContainer').hide();

	// Knöpfe positionieren, wenn nicht schon geschehen
	if($('pic_prev').getStyle('top') == null || $('pic_fwd').getStyle('top') == null){
		var btn_top = ($('popup').getWidth()-$('pic_prev').getWidth())/2;
		$('pic_prev').setStyle	({
								  position: 'absolute',
								  top: btn_top+"px",
								  left: "0px"
								});
		$('pic_fwd').setStyle	({
								  position: 'absolute',
								  top: btn_top+"px",
								  right: "0px"
								});
	}
	// popup sichtbar machen
	$('popup').show();

	//Alle img durchlaufen um aktuelles zu finden
	var timgs = allimages.split('|');
    var title	= "";
    var cur_img	= "";
    var cur_img_id = 0;
    for(var i = 0; i < timgs.length; i++) {
    	// Titel und Bild trennen
    	var tempdata = timgs[i].split(';');
    	title = tempdata[0];
    	cur_img = tempdata[1];
    	
    	if(theimage==cur_img){
    		cur_img_id = i;
			$('popuphead').update((title==""? "Bild "+(cur_img_id+1) : title));
    	}
    }
    // Nächstes und vorangegangenes Bild
    var prev_id = cur_img_id-1;
    prev_id = (prev_id<0)? (timgs.length-1) : prev_id;
    var fwd_id = cur_img_id+1;
    fwd_id = (fwd_id>=timgs.length)? 0 : fwd_id;
    
    var tmpprev = timgs[prev_id].split(";");
    var tmpfwd = timgs[fwd_id].split(";");
    var fwd = tmpfwd[1];
    var prev = tmpprev[1];
    
   // Grafik zeigen
	var newIMG = new Image();
	newIMG.src = theimage;
	$('overImage').src = newIMG.src;
	
	// nach dem laden Bild positionieren und anzeigen
	Event.observe('overImage', 'load', function() {
	    $('overImageWall').hide();
		$('overImageContainer').show();
		positionImage($('overImage'));
	    Event.stopObserving('overImage', 'load');
	});
	
	// ZURÜCKbutton verlinken
    Event.stopObserving('pic_prev', 'click');
	Event.observe('pic_prev', 'click', function() {
		showImagePopup(prev, allimages);
	});
	// VORbutton verlinken
    Event.stopObserving('pic_fwd', 'click');
	Event.observe('pic_fwd', 'click',function() {
		showImagePopup(fwd, allimages);
	});
	// CLOSEbutton verlinken
    Event.stopObserving('close', 'click');
	Event.observe('close', 'click', function() {
		$('popup').hide();
	});
   // 2. Pfeile rechts u. links mit korrektem Link erzeugen.

}

function positionImage(theimg){
//	alert($('overImage').height+" - "+$('overImage').width);
	
	//Berechnung für den Abstand, damit das Bild in der Mitte steht
	var max_width = $('popup').getWidth();
	var max_height = $('popup').getHeight()+$('popuphead').getHeight();
	
	var querformat = (theimg.height < max_height);
	var hochformat = (theimg.width < max_height);
	
	var calc_left = (Math.ceil((max_width-$('overImage').width)/2)-2);
	var calc_top = (Math.ceil((max_height-$('overImage').height)/2)-2);

	theimg.setStyle({
					  position: 'absolute',
					  top: calc_top+"px",
					  left: calc_left+"px"
					});
}

function initPopup(){
	new Draggable('popup',{revert: false});
}