function preview(img, selection) {
	
	document.getElementById('cropWidth').value = selection.width;
	document.getElementById('cropHeight').value = selection.height;
	document.getElementById('cropX1').value = selection.x1;
	document.getElementById('cropX2').value = selection.x2;
	document.getElementById('cropY1').value = selection.y1;
	document.getElementById('cropY2').value = selection.y2;

	example_image = document.getElementById('uploaded');
	
	var iw = example_image.width;
	var ih = example_image.height;
	
	var x_scale = 200 / selection.width;
	var y_scale = 200 / selection.height;
	var x_margin = x_scale * selection.x1;
	var y_margin = y_scale * selection.y1;
	$("#live_preview").css("width", x_scale * iw );
	$("#live_preview").css("height", y_scale * ih );
	$("#live_preview").css("margin-left", (x_margin - x_margin - x_margin));
	$("#live_preview").css("margin-top", (y_margin - y_margin - y_margin));
}

	function preview2(img, selection) {
		if (!selection.width || !selection.height)
			return;
		
		example_image = document.getElementById('uploaded');
		var img_width = example_image.width;
		var img_height = example_image.height;
		var scaleX = 200 / selection.width;
		var scaleY = 200 / selection.height;
			
		document.getElementById('cropWidth').value = selection.width;
		document.getElementById('cropHeight').value = selection.height;
		document.getElementById('cropX1').value = selection.x1;
		document.getElementById('cropX2').value = selection.x2;
		document.getElementById('cropY1').value = selection.y1;
		document.getElementById('cropY2').value = selection.y2;


		//document.getElementById('scaleX').value = scaleX;
		//document.getElementById('scaleY').value = scaleY;
		
		//document.getElementById('imgWidth').value = img_width;
		//document.getElementById('imgHeight').value = img_height;

		$('#live_preview_box img').css({
			width: Math.round(scaleX * img_width),
			height: Math.round(scaleY * img_height),
			marginLeft: -Math.round(scaleX * selection.x1),
			marginTop: -Math.round(scaleY * selection.y1)
		});
	
	}



$(document).ready(function () {
	$('img#uploaded').imgAreaSelect({  x1: 1, y1: 1, x2: 50, y2: 50, aspectRatio: "2:2", handles: true, onSelectChange: preview2 });
	$('img#logo').imgAreaSelect({ sectionColor: 'blue', borderWidth: 2, maxWidth: 250, handles: true, onSelectChange: preview });
});