var mask_width;
var mask_height;

var mask_ratio;

var resizes = 0;

var image_width;
var image_height;

var jcrop_api;

function updateRatio(ratio, image, mask, method) {

	//
	//	Set the global mask_ratio
	//

	if (ratio != null) {
		mask_ratio = ratio;
		$("#ratio").val(ratio);
	}

	//
	//	Get the width and height of the image
	//

	if (image == null) {
		image = $("#image_mask > img");
	}

	if (resizes == 0) {
		image_width = $(image).width();
		image_height = $(image).height();
	}

	//
	//	Fix stupid bug where IE won't display the border around the picture until Jcrop is called
	//

	if (mask_ratio == null && isIE()) {
		jcrop_api = $.Jcrop(image);
	}

	//
	//	If Jcrop has been set, destroy any previous selections
	//

	if (jcrop_api != null) {
		jcrop_api.destroy();
		jcrop_api = null;
	}

	//
	//	If updateRatio is called before the global mask_ratio has been set, do nothing
	//

	if (mask_ratio != null && image_width > 0 && image_height > 0) {

		//
		//	Save the dimensions of the image
		//

		$("#iw").val(image_width);
		$("#ih").val(image_height);

		//
		//	Calculate the orientation of the image
		//

		var image_ratio = image_width / image_height;

		var landscape = false;
		var portrait = false;

		if (image_width >= image_height) {
			landscape = true;
		}
		else if (image_height > image_width) {
			portrait = true;
		}

		//
		//	Get the width and height of the mask object
		//

		if (mask == null) {
			mask = $("#image_mask");
		}

		if (mask_width == null) mask_width = $(mask).width();
		if (mask_height == null) mask_height = $(mask).height();

		//
		//	Standardise the mask ratio -
		//		if landscape and the ratio is less than 1,
		//		or portrait and the ratio is greater than 1,
		//	divide one by it so it represents width * height
		//

		if ((landscape && mask_ratio < 1) || (portrait && mask_ratio > 1)) {
			mask_ratio = 1 / mask_ratio;
		}

		//
		//	Now adjust the image accordingly
		//

		resizes++; // remember that the image is about to be resized so the original width and height are preserved

		if (method == null) {
			method = $("#crop_type > input:radio:checked").attr("id");
		}

		if (method == "fit") {

			//
			//	Hide crop orientation buttons
			//

			$("#crop_orient").hide();

			//
			//	Show / hide relevant explanatory notes
			//

			$("#fit_desc").show();
			$("#crop_desc").hide();

			//
			//	Fix stupid bug where IE does not reposition the image inside the mask correctly
			//

			if (isIE()) {
				$(mask).width(10);
				$(mask).height(10);
				$(image).width(10);
				$(image).height(10);
			}

			//
			//	Calculate the size of the mask, to be in the right proportion for the selected product
			//

			var new_mask_width = mask_width;
			var new_mask_height = mask_width;

			if ((landscape && mask_ratio > 1) || (portrait && mask_ratio < 1)) {
				new_mask_height = mask_width / mask_ratio;
			}
			else if ((landscape && mask_ratio < 1) || (portrait && mask_ratio > 1)) {
				new_mask_height = mask_width * mask_ratio;
			}

			//
			//	Resize the mask to the new mask width and height
			//

			$(mask).width(new_mask_width);
			$(mask).height(new_mask_height);

			//
			//	Recalculate the mask ratio so it can be compared to the image ratio
			//

			mask_ratio = new_mask_width / new_mask_height;

			//alert("mask ratio: " + mask_ratio + ", image ratio: " + image_ratio);

			if (image_ratio > mask_ratio) {
				// the width of the image will fill the mask, borders top and bottom for landscape, left and right for portrait
				$(image).width(new_mask_width);
				$(image).height(new_mask_width / image_ratio);
			}
			else if (image_ratio < mask_ratio) {
				// the height of the image will fill the mask, borders top and bottom for portrait, left and right for landscape
				$(image).width(new_mask_height * image_ratio);
				$(image).height(new_mask_height);
			}
			else {
				// the image will fill the mask entirely, with no borders
				$(image).width(new_mask_width);
				$(image).height(new_mask_height);
			}
		}
		else if (method == "crop") {

			//
			//	Show crop orientation buttons
			//

			$("#crop_orient").show();

			//
			//	Show / hide relevant explanatory notes
			//

			$("#fit_desc").hide();
			$("#crop_desc").show();

			//
			//	Get the selected crop orientation, and if it is different to the image orientation, set flip to true
			//

			var flip = false;
			if ($("#crop_orient input:radio:checked").length == 0) {
				if (landscape) {
					$("#landscape").attr("checked", true);
				}
				else if (portrait) {
					$("#portrait").attr("checked", true);
				}
				$("#crop_orient").buttonset("refresh"); // refresh the buttons to reflect changes in checked
			}
			else {
				var orient = $("#crop_orient input:radio:checked").attr("id");
				if ((orient == "landscape" && portrait) || (orient == "portrait" && landscape)) {
					flip = true;
				}
			}

			//
			//	Reset the width and height of the mask and image
			//

			$(image).width(image_width);
			$(image).height(image_height);

			$(mask).width(mask_width);
			$(mask).height(mask_height);

			//
			//	If the user has chosen to flip the selection, so the crop selection
			//	is the reverse orientation of the image, flip the mask ratio
			//

			if (flip) {
				mask_ratio = 1 / mask_ratio;
			}

			//
			//	Calculate the height and width of the mask
			//	this works, do NOT fiddle with the calculations!
			//

			var new_mask_width = image_width;
			var new_mask_height = image_height;

			if ((landscape && image_ratio > mask_ratio) || (portrait && image_ratio > mask_ratio)) {
				if (flip && landscape) {
					new_mask_width = image_height * mask_ratio;
				}
				else if (flip && portrait) {
					new_mask_width = image_height / mask_ratio;
				}
				else {
					new_mask_width = image_height * mask_ratio;
				}
			}
			else if ((landscape && image_ratio < mask_ratio) || (portrait && image_ratio > mask_ratio)) {
				if (flip && landscape) {
					new_mask_height = image_width * mask_ratio;
				}
				else if (flip && portrait) {
					new_mask_height = image_width / mask_ratio;
				}
				else {
					new_mask_height = image_width * mask_ratio;
				}
			}

			//
			//	Initialise the JCrop plugin and select the correct portion of the image
			//

			var min_ratio = 0.85; // the minimum size of the selection, as a proportion of the selection width / height
			jcrop_api = $.Jcrop(image, {
				aspectRatio: mask_ratio,
				minSize: [(new_mask_width * min_ratio), (new_mask_height * min_ratio)],
				maxSize: [new_mask_width, new_mask_height],
				setSelect: [0, 0, new_mask_width, new_mask_height],
				allowSelect: false,
				onChange: captureCoordinates,
				bgOpacity: 0.35
			});
		}
	}
}

//
//	Insert the co-ordinates of the Jcrop selection, and the image height and width
//

function captureCoordinates(c) {
	$("#x1").val(c.x);
	$("#y1").val(c.y);
	$("#x2").val(c.x2);
	$("#y2").val(c.y2);
	$("#w").val(c.w);
	$("#h").val(c.h);
}

//
//	Used when viewing the basket, apply the fit to the thumbnail
//

function applyFit(id, data) {
	updateRatio(getValue("ratio", data), $("#thumb_" + id + " img"),
		$("#thumb_" + id + " > div.image_mask"), "fit");

	//
	//	Reset global javascript variables so it works every time
	//

	mask_width = null;
	mask_height = null;

	mask_ratio = null;

	resizes = 0;

	image_width = null;
	image_height = null;

	jcrop_api = null;
}

//
//	Used when viewing the basket, apply the crop to the thumbnail
//

function applyCrop(id, data) {

	//
	//	Get required crop information from the data string
	//

	var x1 = getValue("x1", data);
	var y1 = getValue("y1", data);
	var x2 = getValue("x2", data);
	var y2 = getValue("y2", data);
	var iw = getValue("iw", data);

	//
	//	Now calculate the ratio of the original image to the current thumbnail
	//

	var thumb = $("#thumb_" + id + " img");
	var thumb_ratio = thumb.width() / iw;

	x1 = parseInt(x1 * thumb_ratio);
	y1 = parseInt(y1 * thumb_ratio);
	x2 = parseInt(x2 * thumb_ratio);
	y2 = parseInt(y2 * thumb_ratio);

	//
	//	Apply the Jcrop to the image - for display only so don't allow moving / resizing / selecting
	//

	$.Jcrop(thumb, {
		setSelect: [x1, y1, x2, y2],
		allowMove: false,
		allowResize: false,
		allowSelect: false,
		bgOpacity: 0.2
	});
}

function getValue(key, data) {
	var re = new RegExp(key + "\\[([\\d\\.]+)\\]", "i");
	if (re.exec(data)) {
		var match = re.exec(data);
		return (match[1]);
	}
}

//
//	Used for fixing IE-only bugs
//

function isIE() {
	if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) {
		return (true);
	} else {
		return (false);
	}
}