jCrop 0.9.12 and jQuery 1.9.1

jQuery 1.9.1 and jCrop v0.9.12

HTML

<script src="https://raw.github.com/tapmodo/Jcrop/master/js/jquery.Jcrop.js"></script>
<div class="row-fluid" id="cropContainer">
	<div class="span7">
		<h2>Original Image</h2>
		<img id="cropBox" src="http://placekitten.com/200/200" width="200" height="200"> 
	</div>
	<div class="span5">
		<h2>Cropped Image</h2>
		<div style="width:100px;height:100px;overflow:hidden;">
			<img id="preview" class="jcrop-preview" src="http://placekitten.com/200/200">
		</div>
	</div>
</div>
<div id="coordinates"></div>
<div>
	<form action="#" method="get" class="form-horizontal">
		<input type="hidden" name="cropImg_X" id="cropImg_X" value="0">
		<input type="hidden" name="cropImg_Y" id="cropImg_Y" value="0">
		<input type="hidden" name="cropImg_W" id="cropImg_W" value="0">
		<input type="hidden" name="cropImg_H" id="cropImg_H" value="0">
		<button class="btn btn-large">Crop It</button>
	</form>
</div>

CSS

/* jquery.Jcrop.css v0.9.12 - MIT License */
/*
  The outer-most container in a typical Jcrop instance
  If you are having difficulty with formatting related to styles
  on a parent element, place any fixes here or in a like selector

  You can also style this element if you want to add a border, etc
  A better method for styling can be seen below with .jcrop-light
  (Add a class to the holder and style elements for that extended class)
*/
.jcrop-holder {
  direction: ltr;
  text-align: left;
}
/* Selection Border */
.jcrop-vline,
.jcrop-hline {
  background: #ffffff url("http://deepliquid.com/Jcrop/css/Jcrop.gif");
  font-size: 0;
  position: absolute;
}
.jcrop-vline {
  height: 100%;
  width: 1px !important;
}
.jcrop-vline.right {
  right: 0;
}
.jcrop-hline {
  height: 1px !important;
  width: 100%;
}
.jcrop-hline.bottom {
  bottom: 0;
}
/* Invisible click targets */
.jcrop-tracker {
  height: 100%;
  width: 100%;
  /* "turn off" link highlight */
  -webkit-tap-highlight-color: transparent;
  /* disable callout, image save panel */
  -webkit-touch-callout: none;
  /* disable cut copy paste */
  -webkit-user-select: none;
}
/* Selection Handles */
.jcrop-handle {
  background-color: #333333;
  border: 1px #eeeeee solid;
  width: 7px;
  height: 7px;
  font-size: 1px;
}
.jcrop-handle.ord-n {
  left: 50%;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -4px;
  margin-left: -4px;
}
.jcrop-handle.ord-e {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 50%;
}
.jcrop-handle.ord-w {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 50%;
}
.jcrop-handle.ord-nw {
  left: 0;
  margin-left: -4px;
  margin-top: -4px;
  top: 0;
}
.jcrop-handle.ord-ne {
  margin-right: -4px;
  margin-top: -4px;
  right: 0;
  top: 0;
}
.jcrop-handle.ord-se {
  bottom: 0;
  margin-bottom: -4px;
  margin-right: -4px;
  right: 0;
}
.jcrop-handle.ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -4px;
 ...

JavaScript

$gCropBoxer = $('#cropBox');

	var cropBoxArea = {
			width: 100,
			height: 100
		},
		currentImage = {
			width: $gCropBoxer.width(),
			height: $gCropBoxer.height()
		};

	// set the initial select area
	var	boxX1 = Math.round( ($gCropBoxer.attr('width') / 2) - (cropBoxArea.width / 2) ),
		boxY1 = Math.round( ($gCropBoxer.attr('height') / 2) - (cropBoxArea.height / 2) ),
		boxX2 = Math.round( boxX1 + cropBoxArea.width ),
		boxY2 = Math.round( boxY1 + cropBoxArea.height );

	console.log(currentImage.width + ' x ' + currentImage.height);

	function updateCoords(coords)
	{
		$("#cropImg_X").val(coords.x);
		$("#cropImg_Y").val(coords.y);
		$("#cropImg_W").val(coords.w);
		$("#cropImg_H").val(coords.h);

		$('#coordinates').html('jx='+coords.x + ' ' + 'jy='+coords.y + ' ' + 'jw='+coords.w + ' ' + 'jh='+coords.h);

		var rx = cropBoxArea.width / coords.w;
		var ry = cropBoxArea.height / coords.h;

		$('#preview').css({
			width: Math.round(rx * currentImage.width) + 'px',
			height: Math.round(ry * currentImage.height) + 'px',
			marginLeft: '-' + Math.round(rx * coords.x) + 'px',
			marginTop: '-' + Math.round(ry * coords.y) + 'px'
		});

	}

	$gCropBoxer.Jcrop({
		trueSize: [ currentImage.width, currentImage.height],
		aspectRatio:	1,
		bgOpacity:		0.5,
		bgColor:		'white',
		addClass:		'jcrop-dark',
        setSelect:		[ boxX1, boxY1, boxX2, boxY2 ],
        onSelect:		updateCoords,
        onChange:		updateCoords
	});