
	function ImageResizeTool(containerSelector, resultSelector, imageSrc, smallerLabel, largerLabel, heightLabel) {
		this.container = $(containerSelector);
		this.result = $(resultSelector);
		this.buildHtml(this.container, this.result, imageSrc, smallerLabel, largerLabel, heightLabel);
		this.init();
	}

	ImageResizeTool.prototype = {
		pageWidthMm: 210,
		originalImageRatio: null,
		sliderPercentage: 0,

		maximumImageWidthMm: 70,
		maximumImageHeightMm: 25,
		maximumResizeWidthMm: null,

		init: function() {
			this.preview = this.container.find('div.preview');
			this.resizedImage = this.container.find('img.resized-image');
			this.slide = this.container.find(' div.slide');

			var self = this;
			this.container.find('a.smaller').click(function() { return self.onSmaller(); });
			this.container.find('a.larger').click(function() { return self.onLarger(); });

			this.resultWidth = this.result.find('input.width');
			this.resultWidth.change(function() { self.slideToMM($(this).val()); });

			this.slide.slider({
				slide: function(e, ui) {
					self.updateImageSize(ui.value);
				},
				change: function(e, ui) {
					self.updateImageSize(ui.value);
				}
			});

			this.initImage();
			
			if(this.resultWidth.val()) this.slideToMM(this.resultWidth.val());
			else this.slideToPercent(50);
		},

		initImage: function() {
			this.originalImageRatio = (this.resizedImage.width() / this.resizedImage.height());

			if (!this.originalImageRatio) {
				var self = this;
				window.setTimeout(function() {
					self.initImage();
				}, 10);
				return;
			}

			if (this.originalImageRatio < this.maximumImageWidthMm/this.maximumImageHeightMm) {
				// In diesem Fall ist die Höhe des Bildes ausschlaggebend,
				// und die maximumResizeWidthMm muss verringert werden
				this.maximumResizeWidthMm = this.maximumImageHeightMm * this.originalImageRatio;
			} else {
				this.maximumResizeWidthMm = this.maximumImageWidthMm;
			}
		},

		slideToPercent: function(percent) {
			if (percent > 100) percent = 100;
			if (percent <= 0) percent = 0;
			this.slide.slider('value', percent);
		},
		
		slideToMM: function(mm) {
			this.slideToPercent(this.mmToPercent(mm));
		},

		getPxToMmRatio: function() { return this.pageWidthMm / this.container.width(); },
		round: function(f) {
			f = f * 10;
			f = Math.round(f);
			f = f / 10;
			return f;
		},
		pxToMm: function(px) { return px * this.getPxToMmRatio(); },
		mmToPx: function(mm) { return mm / this.getPxToMmRatio(); },
		percentToMm: function(percent) {
			return (this.round(this.maximumResizeWidthMm / (100 / percent)));
		},
		mmToPercent: function(mm) {
			return (mm / this.maximumResizeWidthMm) * 100;
		},

		updateImageSize: function(percent) {
			this.sliderPercentage = percent;
			if (percent == 0) percent = 0.01;

			var newWidthMM = this.percentToMm(percent);

			this.resizedImage.width(this.mmToPx(newWidthMM) + 'px');
			this.resultWidth.val(newWidthMM);
		},

		onSmaller: function() {
			this.slideToPercent(this.sliderPercentage - 10);
			return false;
		},
		onLarger: function() {
			this.slideToPercent(this.sliderPercentage + 10);
			return false;
		},

		buildHtml: function(container, result, imageSrc, smallerLabel, largerLabel, heightLabel) {
			container.append('<div class="preview"><div class="organisation-signature"><img class="resized-image" src="' + imageSrc + '" alt="Resized Image" /><img class="signer" src="/static/common/img/image-resize-signer.gif" alt="Signature" /></div></div>');
			container.append('<a href="#" class="smaller"><img src="/static/common/img/slider-button-smaller.png" alt="' + smallerLabel + '"/></a>');
			container.append('<div class="slider"><div class="slide"></div></div>');
			container.append('<a href="#" class="larger"><img src="/static/common/img/slider-button-larger.png" alt="' + largerLabel + '"/></a>');
			container.append(result);
		}
	};



