var theFinalWidth = 320;
var theFinalHeight = 240;
var useCropRatio = true;
var useCropPreview = true;

function onEndCrop( coords, dimensions ) {
	$('cropper_x1').value = coords.x1;
	$('cropper_y1').value = coords.y1;
	$('cropper_width').value = dimensions.width;
	$('cropper_height').value = dimensions.height;
}

function initializeCropper() {
	if (useCropRatio && useCropPreview) {
		if (theFinalWidth >= theFinalHeight) {
			theRatioX = (theFinalWidth / theFinalHeight);
			theRatioY = 1;
		} else {
			theRatioX = 1;
			theRatioY = (theFinalHeight / theFinalWidth);
		}
		new Cropper.ImgWithPreview( 
			'cropper_picture', 
			{ 
				previewWrap: 'cropper_preview',
				minWidth: theFinalWidth, 
				minHeight: theFinalHeight, 
				ratioDim: { x: theRatioX, y: theRatioY }, 
				displayOnInit: true, 
				onEndCrop: onEndCrop 
			}
		);
	} else if (useCropRatio) {
		if (theFinalWidth >= theFinalHeight) {
			theRatioX = (theFinalWidth / theFinalHeight);
			theRatioY = 1;
		} else {
			theRatioX = 1;
			theRatioY = (theFinalHeight / theFinalWidth);
		}
		new Cropper.Img( 
			'cropper_picture', 
			{ 
				minWidth: theFinalWidth, 
				minHeight: theFinalHeight, 
				ratioDim: { x: theRatioX, y: theRatioY }, 
				displayOnInit: true, 
				onEndCrop: onEndCrop 
			}
		);
	} else if (useCropPreview) {
		new Cropper.ImgWithPreview( 
			'cropper_picture', 
			{ 
				previewWrap: 'cropper_preview',
				minWidth: theFinalWidth, 
				minHeight: theFinalHeight, 
				displayOnInit: true, 
				onEndCrop: onEndCrop 
			}
		);
	} else {
		new Cropper.Img( 
			'cropper_picture', 
			{ 
				minWidth: theFinalWidth, 
				minHeight: theFinalHeight, 
				displayOnInit: true, 
				onEndCrop: onEndCrop 
			}
		);
	}
}