var image_template = new Template('<div id="image_container" style="display:none;margin-left:-#{margin}px"><img src="#{url}" width="#{width}" height="#{height}" alt="#{alt}"><div id="close_container">zurück</div></div>');
var blackout_template = new Template('<div id="blackout" style="display:none"></div>');

function show_full(e){
	var image = Event.element(e);
	var url = image.getAttribute("full:src");
	var width = image.getAttribute("full:width");
	var height = image.getAttribute("full:height");
	
	var blackout = blackout_template.evaluate({});
	var img_container = image_template.evaluate({'margin':(width/2), 'width':width, 'height':height, 'alt':image.alt, 'url':url });
	var body = document.getElementsByTagName("body")[0];
	new Insertion.Top(body, img_container);
	new Insertion.Top(body, blackout);


	new Effect.Appear('blackout',{duration:0.5,from:0.0, to:0.5, transition:Effect.Transitions.linear, afterFinish:function(el){
		$('image_container').show();
		
		var body_height = Element.getHeight(body);var computed_height = Position.positionedOffset($('image_container'))[1]+Element.getHeight($('image_container'))+20;var computed_height_1 = Element.getHeight($('area')) + Element.getHeight($('topbar')) + 20;var new_height;
		if (body_height > computed_height){if (body_height > computed_height_1){ new_height = body_height; } else { new_height = computed_height_1;}}
		else {if (computed_height > computed_height_1){new_height = computed_height;} else {new_height = computed_height_1;}}
		$('blackout').setStyle({'height':new_height+"px"});
		Element.scrollTo('image_container');

		Event.observe('close_container','mousedown',function(e){
			Element.remove('image_container');
			new Effect.Fade('blackout',{duration:0.5,afterFinish:function(el){ Element.remove('blackout');}});
			Element.scrollTo(image);
		});
	}});
	Event.stop(e);
}