jQuery(function ($) {

	var config = {
		imageSelector: '.detailImages img', // CSS-Selektor der zu vergrössernden Bilder
		path: '', // Pfad zu den grossen Bildern (leerer String, wenn sie an derselben Position liegen wie die kleinen Bilder und nur anders heissen)
		fileSuffix: '_big', // Naming-Convention der grossen Bilder, z.B. wenn das kleine "abc.jpg" und das grosse "abc_big.jpg" heisst, ist "_big" der Suffix (leerer String, wenn die Bilder gleich heissen aber an anderen Orten liegen)
		bigContainerClass: 'magnifierContainer', // CSS-Klasse des überlagerten DIV-Containers für das grosse Bild
		mouseOffset: 20 // Offset des überlagerten DIV-Containers zum Maus-Cursor [Pixel]
	};

	var bigContainer = $('<div class="' + config.bigContainerClass + '" />').appendTo('body');
	var bigImg, myImg;

	var magnifierShow = function (e) {
		myImg = $(this);
		myImg.data('offset', myImg.offset());
		if (bigImg) bigImg.remove();
		bigImg = $('<img src="' + myImg.data('magnifierImgPath') + '" />').appendTo(bigContainer);
		bigContainer.show();
		if (!bigContainer.data('size'))
			bigContainer.data('size', {
				width: bigContainer.width(),
				height: bigContainer.height()
			});
		myImg.trigger('mousemove', e);
	};
	var magnifierHide = function () {
		bigContainer.hide();
	};
	var magnifierMove = function (e) {
		if (bigContainer.is(':hidden')) {
			$(this).trigger('mouseover', e);
			return;
		}
		bigContainer.css({
			left: (e.pageX + config.mouseOffset) + "px",
			top: (e.pageY + config.mouseOffset) + "px"
		});
		bigImg.css({
			left: -Math.round(((e.pageX - myImg.data('offset').left) / myImg.data('size').width * myImg.data('bigSize').width) - (bigContainer.data('size').width / 2)) + "px",
			top: -Math.round(((e.pageY - myImg.data('offset').top) / myImg.data('size').height * myImg.data('bigSize').height) - (bigContainer.data('size').height / 2)) + "px"
		});
	};

	var processImg = function (me) {
		var container = $('<div style="position:absolute; visibility:hidden; top:-9999px; left:-9999px;" />').prependTo('body');
		var newImgSrc = me.attr('src');
		if (config.path.length) newImgSrc = config.path + newImgSrc.substr(newImgSrc.lastIndexOf("/") + 1);
		if (config.fileSuffix.length) newImgSrc = newImgSrc.substr(0, newImgSrc.lastIndexOf(".")) + config.fileSuffix + newImgSrc.substr(newImgSrc.lastIndexOf("."));
		var img = $('<img src="' + newImgSrc + '" />').bind('load', function () {
			me.data('magnifierImgPath', newImgSrc);
			me.data('size', {
				width: me.width(),
				height: me.height()
			});
			me.data('bigSize', {
				width: $(this).width(),
				height: $(this).height()
			});
			container.remove();
			me.bind('mouseover', magnifierShow)
				.bind('mouseout', magnifierHide)
				.bind('mousemove', magnifierMove);
		}).bind('error', function () {
			container.remove();
		}).appendTo(container);
	};
	$(config.imageSelector).each(function () {
		if (this.complete) processImg($(this));
		else $(this).bind('load', function () { processImg($(this)); });
	});

});