function preview(img, selection) {
		
		var thumb_width = $('#thumb_width').val();
		var thumb_height = $('#thumb_height').val();
		var current_large_image_width = $('#current_large_image_width').val();
		var current_large_image_height = $('#current_large_image_height').val();
		
		var scaleX = thumb_width / selection.width; 
		var scaleY = thumb_height / selection.height; 
		
		$('#thumbnail + div > img').css({ 
			width: Math.round(scaleX * current_large_image_width) + 'px', 
			height: Math.round(scaleY * current_large_image_height) + 'px',
			marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
			marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
		});
		$('#x1').val(selection.x1);
		$('#y1').val(selection.y1);
		$('#x2').val(selection.x2);
		$('#y2').val(selection.y2);
		$('#w').val(selection.width);
		$('#h').val(selection.height);
	} 
	
	$(document).ready(function () { 
		$('#save_thumb').click(function() {
			var x1 = $('#x1').val();
			var y1 = $('#y1').val();
			var x2 = $('#x2').val();
			var y2 = $('#y2').val();
			var w = $('#w').val();
			var h = $('#h').val();
			if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
				alert("You must make a selection first");
				return false;
			}else{
				return true;
			}
		});
	}); 
	
	$(window).load(function () {
		var thumb_width = $('#thumb_width').val();
		var thumb_height = $('#thumb_height').val();
		var ratio = thumb_width / thumb_height;
		$('#thumbnail').imgAreaSelect({ aspectRatio: '1:'+ratio, onSelectChange: preview }); 
	});