view src/nabble/view/web/util/image-crop.js @ 0:7ecd1a4ef557

add content
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 21 Mar 2019 19:15:52 -0600
parents
children
line wrap: on
line source

/*
(C) www.dhtmlgoodies.com, April 2006
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
*/
var crop_script_alwaysPreserveAspectRatio = true;
var crop_script_fixedRatio = false;
var crop_script_browserIsOpera = navigator.userAgent.indexOf('Opera') >= 0 ? true : false;
var cropDiv_left = false;
var cropDiv_top = false;
var cropDiv_right = false;
var cropDiv_bottom = false;
var cropDiv_dotted = false;
var crop_currentResizeType = false;
var cropEvent_posX;
var cropEvent_posY;
var cropEvent_eventX;
var cropEvent_eventY;
var crop_resizeCounter = -1;
var crop_moveCounter = -1;
var crop_imageDiv = false;
var imageDiv_currentWidth = false;
var imageDiv_currentHeight = false;
var imageDiv_currentLeft = false;
var imageDiv_currentTop = false;
var smallSquare_tl;
var smallSquare_tc;
var smallSquare_tr;
var smallSquare_lc;
var smallSquare_rc;
var smallSquare_bl;
var smallSquare_bc;
var smallSquare_br;

var offsetSmallSquares = Math.floor(smallSquareWidth / 2);

var cropScriptAjaxObjects = new Array();
var preserveAspectRatio = false;

var cropWidthRatio = false;
// width of cropping area relative to height
function crop_createDivElements(basedir) {
	crop_imageDiv = document.getElementById('imageContainer');

	cropDiv_left = document.createElement('DIV');
	cropDiv_left.className = 'crop_transparentDiv';
	cropDiv_left.style.visibility = 'visible';
	cropDiv_left.style.left = '0px';
	cropDiv_left.style.top = '0px';
	cropDiv_left.style.height = crop_imageHeight + 'px';
	cropDiv_left.style.width = '0px';
	cropDiv_left.innerHTML = '<span></span>';
	crop_imageDiv.appendChild(cropDiv_left);

	cropDiv_top = document.createElement('DIV');
	cropDiv_top.className = 'crop_transparentDiv';
	cropDiv_top.style.visibility = 'visible';
	cropDiv_top.style.left = '0px';
	cropDiv_top.style.top = '0px';
	cropDiv_top.style.height = '0px';
	cropDiv_top.style.width = crop_imageWidth + 'px';
	cropDiv_top.innerHTML = '<span></span>';
	crop_imageDiv.appendChild(cropDiv_top);

	cropDiv_right = document.createElement('DIV');
	cropDiv_right.className = 'crop_transparentDiv';
	cropDiv_right.style.visibility = 'visible';
	cropDiv_right.style.left = (crop_imageWidth) + 'px';
	cropDiv_right.style.top = '0px';
	cropDiv_right.style.height = crop_imageHeight + 'px';
	cropDiv_right.style.width = '0px';
	cropDiv_right.innerHTML = '<span></span>';
	crop_imageDiv.appendChild(cropDiv_right);

	cropDiv_bottom = document.createElement('DIV');
	cropDiv_bottom.className = 'crop_transparentDiv';
	cropDiv_bottom.style.visibility = 'visible';
	cropDiv_bottom.style.left = '0px';
	cropDiv_bottom.style.top = (crop_imageHeight) + 'px';
	cropDiv_bottom.style.height = '0px';
	cropDiv_bottom.style.width = crop_imageWidth + 'px';
	cropDiv_bottom.innerHTML = '<span></span>';
	crop_imageDiv.appendChild(cropDiv_bottom);

	cropDiv_dotted = document.createElement('DIV');
	cropDiv_dotted.className = 'crop_dottedDiv';
	cropDiv_dotted.style.left = '0px';
	cropDiv_dotted.style.top = '0px';
	cropDiv_dotted.style.width = (crop_imageWidth - (cropToolBorderWidth * 2)) + 'px';
	cropDiv_dotted.style.height = (crop_imageHeight - (cropToolBorderWidth * 2)) + 'px';
	cropDiv_dotted.innerHTML = '<div></div>';
	cropDiv_dotted.style.cursor = 'move';

	if (crop_script_browserIsOpera) {
		var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
		div.style.backgroundColor = 'transparent';
		cropDiv_bottom.style.backgroundColor = 'transparent';
		cropDiv_right.style.backgroundColor = 'transparent';
		cropDiv_top.style.backgroundColor = 'transparent';
		cropDiv_left.style.backgroundColor = 'transparent';
	}

	cropDiv_dotted.onmousedown = cropScript_initMove;

	smallSquare_tl = document.createElement('IMG');
	smallSquare_tl.src = basedir + '/images/small_square.gif';
	smallSquare_tl.style.position = 'absolute';
	smallSquare_tl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_tl.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_tl.style.cursor = 'nw-resize';
	smallSquare_tl.id = 'nw-resize';
	smallSquare_tl.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_tl);

	smallSquare_tr = document.createElement('IMG');
	smallSquare_tr.src = basedir + '/images/small_square.gif';
	smallSquare_tr.style.position = 'absolute';
	smallSquare_tr.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_tr.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_tr.style.cursor = 'ne-resize';
	smallSquare_tr.id = 'ne-resize';
	smallSquare_tr.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_tr);

	smallSquare_bl = document.createElement('IMG');
	smallSquare_bl.src = basedir + '/images/small_square.gif';
	smallSquare_bl.style.position = 'absolute';
	smallSquare_bl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_bl.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_bl.style.cursor = 'sw-resize';
	smallSquare_bl.id = 'sw-resize';
	smallSquare_bl.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_bl);

	smallSquare_br = document.createElement('IMG');
	smallSquare_br.src = basedir + '/images/small_square.gif';
	smallSquare_br.style.position = 'absolute';
	smallSquare_br.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_br.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_br.style.cursor = 'se-resize';
	smallSquare_br.id = 'se-resize';
	smallSquare_br.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_br);

	smallSquare_tc = document.createElement('IMG');
	smallSquare_tc.src = basedir + '/images/small_square.gif';
	smallSquare_tc.style.position = 'absolute';
	smallSquare_tc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_tc.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_tc.style.cursor = 's-resize';
	smallSquare_tc.id = 'n-resize';
	smallSquare_tc.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_tc);

	smallSquare_bc = document.createElement('IMG');
	smallSquare_bc.src = basedir + '/images/small_square.gif';
	smallSquare_bc.style.position = 'absolute';
	smallSquare_bc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_bc.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_bc.style.cursor = 's-resize';
	smallSquare_bc.id = 's-resize';
	smallSquare_bc.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_bc);

	smallSquare_lc = document.createElement('IMG');
	smallSquare_lc.src = basedir + '/images/small_square.gif';
	smallSquare_lc.style.position = 'absolute';
	smallSquare_lc.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_lc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_lc.style.cursor = 'e-resize';
	smallSquare_lc.id = 'w-resize';
	smallSquare_lc.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_lc);

	smallSquare_rc = document.createElement('IMG');
	smallSquare_rc.src = basedir + '/images/small_square.gif';
	smallSquare_rc.style.position = 'absolute';
	smallSquare_rc.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_rc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_rc.style.cursor = 'e-resize';
	smallSquare_rc.id = 'e-resize';
	smallSquare_rc.onmousedown = cropScript_initResize;
	cropDiv_dotted.appendChild(smallSquare_rc);

	crop_imageDiv.appendChild(cropDiv_dotted);
};

function cropScript_initMove(e) {
	if (document.all)e = event;

	if (e.target) source = e.target;
	else if (e.srcElement) source = e.srcElement;
	if (source.nodeType == 3) // defeat Safari bug
		source = source.parentNode;

	if (source.id && source.id.indexOf('resize') >= 0)return;

	imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1;
	imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1;
	imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1;
	imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1;
	cropEvent_eventX = e.clientX;
	cropEvent_eventY = e.clientY;

	crop_moveCounter = 0;
	cropScript_timerMove();
	return false;
};

function cropScript_timerMove() {
	if (crop_moveCounter >= 0 && crop_moveCounter < 10) {
		crop_moveCounter++;
		setTimeout('cropScript_timerMove()', 1);
		return;
	}
};

function cropScript_initResize(e) {
	if (document.all)e = event;

	cropDiv_dotted.style.cursor = 'default';
	crop_currentResizeType = this.id;

	cropEvent_eventX = e.clientX;
	cropEvent_eventY = e.clientY;
	crop_resizeCounter = 0;
	imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1;
	imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1;
	imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1;
	imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1;

	cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
	if (crop_script_fixedRatio)cropWidthRatio = crop_script_fixedRatio;

	if (document.all) {
		var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
		div.style.display = 'none';
	}

	cropScript_timerResize();
	return false;
};

function cropScript_timerResize()
{
	if (crop_resizeCounter >= 0 && crop_resizeCounter < 10) {
		crop_resizeCounter = crop_resizeCounter + 1;
		setTimeout('cropScript_timerResize()', 1);
		return;
	}
};

function cropScript_executeCrop(buttonObj)
{
	buttonObj.style.visibility = 'hidden';
	var ajaxIndex = cropScriptAjaxObjects.length;
	cropScriptAjaxObjects[ajaxIndex] = new sack();
	var url = crop_script_server_file + '?image_ref=' + document.getElementById('input_image_ref').value
			+ '&x=' + document.getElementById('input_crop_x').value
			+ '&y=' + document.getElementById('input_crop_y').value
			+ '&width=' + document.getElementById('input_crop_width').value
			+ '&height=' + document.getElementById('input_crop_height').value
			+ '&percentSize=' + document.getElementById('crop_percent_size').value
			+ '&convertTo=' + document.getElementById('input_convert_to').options[document.getElementById('input_convert_to').selectedIndex].value;

	cropScriptAjaxObjects[ajaxIndex].requestFile = url;
	// Specifying which file to get
	cropScriptAjaxObjects[ajaxIndex].onCompletion = function() {
		cropScript_cropCompleted(ajaxIndex, buttonObj);
	};
	cropScriptAjaxObjects[ajaxIndex].runAJAX();
};

function cropScript_cropCompleted(ajaxIndex, buttonObj)
{
	buttonObj.style.visibility = '';
	eval(cropScriptAjaxObjects[ajaxIndex].response);
	cropScriptAjaxObjects[ajaxIndex] = false;
};

function crop_cancelEvent(e)
{
	if (document.all)e = event;
	if (e.target) source = e.target;
	else if (e.srcElement) source = e.srcElement;
	if (source.nodeType == 3) // defeat Safari bug
		source = source.parentNode;

	if (source.tagName && source.tagName.toLowerCase() == 'input')return true;
	return false;
};

var mouseMoveEventInProgress = false;
function cropScript_mouseMove(e)
{
	if (mouseMoveEventInProgress)return;
	if (crop_moveCounter < 10 && crop_resizeCounter < 10)return;
	if (document.all)mouseMoveEventInProgress = true;
	if (document.all)e = event;

	if (crop_resizeCounter == 10) {
		if (crop_currentResizeType == 'e-resize' || crop_currentResizeType == 'ne-resize' || crop_currentResizeType == 'se-resize') {
			cropDiv_dotted.style.width = Math.max(crop_minimumWidthHeight, (imageDiv_currentWidth + e.clientX - cropEvent_eventX)) + 'px';
		}
		if (crop_currentResizeType == 's-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'se-resize') {
			cropDiv_dotted.style.height = Math.max(crop_minimumWidthHeight, (imageDiv_currentHeight + e.clientY - cropEvent_eventY)) + 'px';
		}

		if (crop_currentResizeType == 'w-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'nw-resize') {
			var tmpTop = cropDiv_dotted.style.left.replace('px', '') / 1;
			var newTop = Math.max(0, (imageDiv_currentLeft + e.clientX - cropEvent_eventX));
			if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1)) {
				newTop = (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1) - crop_minimumWidthHeight;
			}
			cropDiv_dotted.style.left = newTop + 'px';
			cropDiv_dotted.style.width = (cropDiv_dotted.style.width.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.left.replace('px', '') / 1) + 'px';
		}

		if (crop_currentResizeType == 'n-resize' || crop_currentResizeType == 'nw-resize' || crop_currentResizeType == 'ne-resize') {
			var tmpTop = cropDiv_dotted.style.top.replace('px', '') / 1;
			var newTop = Math.max(0, (imageDiv_currentTop + e.clientY - cropEvent_eventY));
			if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1)) {
				newTop = (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1) - crop_minimumWidthHeight;
			}
			cropDiv_dotted.style.top = newTop + 'px';
			cropDiv_dotted.style.height = (cropDiv_dotted.style.height.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.top.replace('px', '') / 1) + 'px';
		}

		if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight)
			cropDiv_dotted.style.height = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px';

		if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth)
			cropDiv_dotted.style.width = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px';

		if (e.ctrlKey || crop_script_alwaysPreserveAspectRatio)preserveAspectRatio = true; else preserveAspectRatio = false;

		if (preserveAspectRatio) {
			var tmpRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
			if (tmpRatio < cropWidthRatio) {
				cropDiv_dotted.style.width = (cropDiv_dotted.style.height.replace('px', '') / 1 * cropWidthRatio) + 'px';
			} else {
				cropDiv_dotted.style.height = (cropDiv_dotted.style.width.replace('px', '') / 1 / cropWidthRatio) + 'px';
			}

			if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight) {
				var ratioToAdjust = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1) / (cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2));
				if (Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) {
					cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
					cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
				} else {
					cropDiv_dotted.style.top = (crop_imageHeight - cropDiv_dotted.style.height.replace('px', '')) + 'px';
				}
			}

			if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth) {
				var ratioToAdjust = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1) / (cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2));
				if (Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) {
					cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
					cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
				} else {
					cropDiv_dotted.style.left = (crop_imageWidth - cropDiv_dotted.style.width.replace('px', '')) + 'px';
				}
			}
		}
		if (!crop_script_fixedRatio && !e.ctrlKey)cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
	}

	if (crop_moveCounter == 10) {
		var tmpLeft = imageDiv_currentLeft + e.clientX - cropEvent_eventX;
		if (tmpLeft < 0)tmpLeft = 0;
		if ((tmpLeft + imageDiv_currentWidth + (cropToolBorderWidth * 2)) > crop_imageWidth)tmpLeft = crop_imageWidth - imageDiv_currentWidth - (cropToolBorderWidth * 2);
		cropDiv_dotted.style.left = tmpLeft + 'px';
		var tmpTop = imageDiv_currentTop + e.clientY - cropEvent_eventY;
		if (tmpTop < 0)tmpTop = 0;
		if ((tmpTop + imageDiv_currentHeight + (cropToolBorderWidth * 2)) > crop_imageHeight)tmpTop = crop_imageHeight - imageDiv_currentHeight - (cropToolBorderWidth * 2);
		cropDiv_dotted.style.top = tmpTop + 'px';
	}

	var w = cropDiv_dotted.style.width.replace('px', '') / 1;
	var h = cropDiv_dotted.style.height.replace('px', '') / 1;
	if (w < 100) {
		cropDiv_dotted.style.width = '100px';
		cropDiv_dotted.style.left = '0px';
	}
	if (h < 100) { 
		cropDiv_dotted.style.height = '100px';
		cropDiv_dotted.style.top = '0px';
	}

	repositionSmallSquares();
	resizeTransparentSquares();
	if (updateFormValuesAsYouDrag)cropScript_updateFormValues();
	mouseMoveEventInProgress = false;
};

function repositionSmallSquares()
{
	var w = cropDiv_dotted.style.width.replace('px', '') / 1;
	var h = cropDiv_dotted.style.height.replace('px', '') / 1;
	smallSquare_tc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_bc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_tr.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_rc.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_br.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';

	smallSquare_br.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_bc.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_bl.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_lc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
	smallSquare_rc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
};

function resizeTransparentSquares()
{
	var w = cropDiv_dotted.style.width.replace('px', '') / 1;
	cropDiv_left.style.width = cropDiv_dotted.style.left;
	cropDiv_right.style.width = Math.max(0, crop_imageWidth - (cropToolBorderWidth * 2) - (w + cropDiv_dotted.style.left.replace('px', '') / 1)) + 'px';
	cropDiv_right.style.left = (w + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) + 'px';
	cropDiv_bottom.style.height = Math.max(0, crop_imageHeight - (cropToolBorderWidth * 2) - (cropDiv_dotted.style.height.replace('px', '') / 1 + cropDiv_dotted.style.top.replace('px', '') / 1)) + 'px';
	cropDiv_bottom.style.top = (cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) + 'px';

	cropDiv_top.style.height = cropDiv_dotted.style.top;

	cropDiv_bottom.style.left = cropDiv_dotted.style.left;
	cropDiv_bottom.style.width = (w + (cropToolBorderWidth * 2)) + 'px';
	cropDiv_top.style.left = cropDiv_dotted.style.left;
	cropDiv_top.style.width = (w + (cropToolBorderWidth * 2)) + 'px';

	if (cropDiv_left.style.width == '0px')cropDiv_left.style.visibility = 'hidden'; else cropDiv_left.style.visibility = 'visible';
	if (cropDiv_right.style.width == '0px')cropDiv_right.style.visibility = 'hidden'; else cropDiv_right.style.visibility = 'visible';
	if (cropDiv_bottom.style.width == '0px')cropDiv_bottom.style.visibility = 'hidden'; else cropDiv_bottom.style.visibility = 'visible';
};

function cropScript_updateFormValues()
{
	document.getElementById('input_crop_x').value = Math.round(cropDiv_dotted.style.left.replace('px', '') / 1 * (crop_originalImageWidth / crop_imageWidth));
	document.getElementById('input_crop_y').value = Math.round(cropDiv_dotted.style.top.replace('px', '') / 1 * (crop_originalImageHeight / crop_imageHeight));
	document.getElementById('input_crop_width').value = Math.round((cropDiv_dotted.style.width.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageWidth / crop_imageWidth));
	document.getElementById('input_crop_height').value = Math.round((cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageHeight / crop_imageHeight));
};

function cropScript_stopResizeMove()
{
	crop_resizeCounter = -1;
	crop_moveCounter = -1;
	cropDiv_dotted.style.cursor = 'move';
	cropScript_updateFormValues();
	if (document.all) {
		var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
		div.style.display = 'block';
	}
};

function cropScript_setCropSizeByInput()
{
	var obj_x = document.getElementById('input_crop_x');
	var obj_y = document.getElementById('input_crop_y');
	var obj_width = document.getElementById('input_crop_width');
	var obj_height = document.getElementById('input_crop_height');

	obj_x.value = obj_x.value.replace(/[^0-9]/gi, '');
	obj_y.value = obj_y.value.replace(/[^0-9]/gi, '');
	obj_width.value = obj_width.value.replace(/[^0-9]/gi, '');
	obj_height.value = obj_height.value.replace(/[^0-9]/gi, '');

	if (obj_x.value.length == 0)obj_x.value = 0;
	if (obj_y.value.length == 0)obj_y.value = 0;
	if (obj_width.value.length == 0)obj_width.value = crop_originalImageWidth;
	if (obj_height.value.length == 0)obj_height.value = crop_originalImageHeight;

	if (obj_x.value > (crop_originalImageWidth - crop_minimumWidthHeight))obj_x.value = crop_originalImageWidth - crop_minimumWidthHeight;
	if (obj_y.value > (crop_originalImageHeight - crop_minimumWidthHeight))obj_y.value = crop_originalImageHeight - crop_minimumWidthHeight;

	if (obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value / 1;
	if (obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value / 1;

	if (obj_x.value / 1 + obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value;
	if (obj_y.value / 1 + obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value;

	cropDiv_dotted.style.left = Math.round(obj_x.value / 1 * (crop_imageWidth / crop_originalImageWidth)) + 'px';
	cropDiv_dotted.style.top = Math.round(obj_y.value / 1 * (crop_imageHeight / crop_originalImageHeight)) + 'px';
	cropDiv_dotted.style.width = Math.round((obj_width.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageWidth / crop_originalImageWidth)) + 'px';
	cropDiv_dotted.style.height = Math.round((obj_height.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageHeight / crop_originalImageHeight)) + 'px';

	repositionSmallSquares();
	resizeTransparentSquares();
};

function cropScript_setBasicEvents()
{
	document.documentElement.ondragstart = crop_cancelEvent;
	document.documentElement.onselectstart = crop_cancelEvent;
	document.documentElement.onmousemove = cropScript_mouseMove;
	document.documentElement.onmouseup = cropScript_stopResizeMove;

	document.getElementById('input_crop_x').onblur = cropScript_setCropSizeByInput;
	document.getElementById('input_crop_y').onblur = cropScript_setCropSizeByInput;
	document.getElementById('input_crop_width').onblur = cropScript_setCropSizeByInput;
	document.getElementById('input_crop_height').onblur = cropScript_setCropSizeByInput;
	document.getElementById('crop_percent_size').onblur = cropScript_validatePercent;
};

function cropScript_validatePercent()
{
	this.value = this.value.replace(/[^0-9]/gi, '');
	if (this.value.length == 0)this.value = '1';
	if (this.value / 1 > crop_maximumPercent)this.value = '100';
	if (this.value / 1 < crop_minimumPercent)this.value = crop_minimumPercent
};

function crop_initFixedRatio()
{
	crop_script_fixedRatio = 1;
	document.getElementById('input_crop_width').value = Math.round(document.getElementById('input_crop_height').value) / crop_script_fixedRatio;
	cropScript_setCropSizeByInput();
};

function init_imageCrop(basedir)
{
	cropScript_setBasicEvents();
	crop_createDivElements(basedir);
	cropScript_updateFormValues();
	crop_initFixedRatio();

	cropDiv_dotted.style.left = '0px';
	cropDiv_dotted.style.top = '0px';
	cropDiv_dotted.style.width = '100px';
	cropDiv_dotted.style.height = '100px';
	repositionSmallSquares();
	resizeTransparentSquares();
};