$(document).ready(function() {
	$(".openprev").click(function() {
		$("#page").append('<div id="layer" class="closable"></div>')
		$("#page").append('<div id="screen" class="closable"><div id="imgprev"></div></div>')
		var topic = $(this).attr("topic")
		var loader = $("#loader").clone().removeClass("hidden")
		$("#imgprev").append(loader)
		var img = new Image()
		img.src = $(this).attr("path")
		img.onload = function() {
			$(loader).remove()
			var w = this.width
			var h = this.height
			if (this.width > 640 || this.height > 480) {
				if (this.width > this.height) {				
					this.width = 640
					this.height = this.height / (w / 640)
					w = this.width
					h = this.height
				}
				else {				
					this.height = 480
					this.width = this.width / (h / 480)
					w = this.width
					h = this.height
				}
			}
			var top = "-" + Math.round(h/2) + "px"
			var left = "-" + (Math.round(w/2) - 90) + "px"
			$("#imgprev").append('<div id="imgwrap"></div>')
			$("#imgwrap").append('<div class="prevtopic">'+ topic + '</div>')
			$("#imgwrap").css('width', w + "px")
			$("#imgwrap").css('margin-top', top)
			$("#imgwrap").css('margin-left', left)
			$("#imgwrap").css('border', '1px solid #000')
			$("#imgwrap").append(this)
			$("#imgwrap").append('<div class="cllink">Schliessen</div>')
			$("#imgwrap").append('<br class="clear" />')
			$(".closable").click(function() {
				$("#layer").remove()
				$("#screen").remove()
			})
		}
	});
});