var clipTop = 0;
var clipRight = 0;
var clipBottom = 0;
var clipLeft = 0;
var originalHeight = 0;
var originalWidth = 0;
var showCropBox = false;
var initialized = false;

function ToggleCropBox(forceon){
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	if(initialized)
	{
		forceon? showCropBox = true : showCropBox = !showCropBox;
		if(showCropBox)
		{
			mydiv.style.visibility = 'visible';
			mydiv.style.left = border.offsetLeft + (border.offsetWidth / 2) - (mydiv.offsetWidth / 2);
			mydiv.style.top = border.offsetTop + (border.offsetHeight / 2) - (mydiv.offsetHeight / 2);
		}
		else
		{
			mydiv.style.visibility = 'hidden';
		}
		SetHiddenValues();
	}
}

function Initialize(){
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	
	initialized = true;
	mypic.style.visibility = 'visible';

	mydiv.style.height = cropBoxHeight + (cropBoxBorderWidth * 2);
	mydiv.style.width = cropBoxWidth + (cropBoxBorderWidth * 2);
	mydiv.style.left = border.offsetLeft + (border.offsetWidth / 2) - (mydiv.offsetWidth / 2);
	mydiv.style.top = border.offsetTop + (border.offsetHeight / 2) - (mydiv.offsetHeight / 2);
	
	/*
	mydiv.style.height = mypic.offsetHeight + " + (this.m_divBorderWidth * 2) + ";
	mydiv.style.width = mypic.offsetWidth + " + (this.m_divBorderWidth * 2) + ";
	mydiv.style.left = mydiv.offsetLeft + mypic.offsetLeft - " + this.m_divBorderWidth + ";
	mydiv.style.top = mydiv.offsetTop + mypic.offsetTop - " + this.m_divBorderWidth + ";
	*/
	var borderPicHeightDif = border.offsetHeight - mypic.offsetHeight;
	var borderPicWidthDif = border.offsetWidth - mypic.offsetWidth;
	mypic.style.top = border.offsetTop + (borderPicHeightDif / 2);
	mypic.style.left = border.offsetLeft + (borderPicWidthDif / 2);
	
	mypic.style.pixelWidth = mypic.offsetWidth;
	mypic.style.pixelHeight = mypic.offsetHeight;
	originalHeight = mypic.offsetHeight;
	originalWidth = mypic.offsetWidth;
	document.getElementById('origHeight').value = originalHeight;
	document.getElementById('origWidth').value = originalWidth;
	SetHiddenValues();
	ClipPic();
	document.getElementById('originalX').value = document.getElementById('thumbnailX').value;
	document.getElementById('originalY').value = document.getElementById('thumbnailY').value;
}

var dragging = false;
var blockDrag = false;
var numDrags = 0;
var startPosX = 0;
var startPosY = 0;


function dragMouseDown(e) {
	dragging = true;
	startPosX = e.x;
	startPosY = e.y;
}

function dragMouseClick(e) {
	dragging = !dragging;
	if(dragging)
	{
		startPosX = e.x;
		startPosY = e.y;
	}
}


function dragMouseUp(e) {
	
	dragging = false;
	startPosX = 0;
	startPosY = 0;
}
//window.document.onmouseup = dragMouseUp;

function dragMouseOut(e) {
	dragMouseUp(e);
}

function DragSomething(e)
{
	if(showCropBox)
	{
		DragCropBox(e);
	}
	else
	{
		DragImage(e);
	}
}

function DragImage(e)
{
    var mypic = document.getElementById('imgEdit');	
    var border = document.getElementById('imgBorder');
    var borderright = border.offsetLeft + border.offsetWidth;
    var picright = mypic.offsetLeft + mypic.offsetWidth;
    if((border.offsetLeft < mypic.offsetLeft) && ((border.offsetLeft + border.offsetWidth) > (mypic.offsetLeft + mypic.offsetWidth)))
    {
		// do nothing, since border is wider than picture
	}
	else
	{
		if((border.offsetLeft - mypic.offsetLeft  - (e.x - startPosX) + borderWidth >= 0) && ((mypic.offsetLeft + mypic.offsetWidth) - (border.offsetLeft + border.offsetWidth) - (startPosX - e.x) + borderWidth >= 0))
		{
			if(e.x != startPosX)
			{
				mypic.style.left = mypic.offsetLeft - (startPosX - e.x);
				startPosX = e.x;
			};
		}
		else if(border.offsetLeft - mypic.offsetLeft  - (e.x - startPosX) + borderWidth <= 0)
		{
			mypic.style.left = border.offsetLeft + borderWidth;
			startPosX = e.x;
		}
		else if((mypic.offsetLeft + mypic.offsetWidth) - (border.offsetLeft + border.offsetWidth) - (startPosX - e.x) + borderWidth < 0)
		{
			mypic.style.left = border.offsetLeft + border.offsetWidth - mypic.offsetWidth - borderWidth;
			startPosX = e.x;
		}
    }

	if((border.offsetTop < mypic.offsetTop) && ((border.offsetTop + border.offsetHeight) > (mypic.offsetTop + mypic.offsetHeight)))			    
	{
		// do nothing, since border is taller than picture
	}
	else
	{
		if((border.offsetTop - mypic.offsetTop  - (e.y - startPosY) + borderWidth >= 0) && ((mypic.offsetTop + mypic.offsetHeight) - (border.offsetTop + border.offsetHeight) - (startPosY - e.y) + borderWidth >= 0))
		{
			if(e.y != startPosY)
			{
				mypic.style.top = mypic.offsetTop - (startPosY - e.y);
				startPosY = e.y;
			};
		}
		else if(border.offsetTop - mypic.offsetTop  - (e.y - startPosY) + borderWidth < 0)
		{
			mypic.style.top = border.offsetTop + borderWidth;
			startPosY = e.y;
		}
		else if((mypic.offsetTop + mypic.offsetHeight) - (border.offsetTop + border.offsetHeight) - (startPosY - e.y) + borderWidth < 0)
		{
			mypic.style.top = border.offsetTop + border.offsetHeight - mypic.offsetHeight - borderWidth;
			startPosY = e.y;
		}
    }
    SetHiddenValues();
    ClipPic();
}

function DragCropBox(e){
	var mydiv = document.getElementById('imgCropBox');
    var mypic = document.getElementById('imgEdit');
    var border = document.getElementById('imgBorder');

    if(((mydiv.offsetLeft + cropBoxBorderWidth) < mypic.offsetLeft) && ((mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth) > (mypic.offsetLeft + mypic.offsetWidth)))
    {
		// do nothing, since div border is wider than picture
	}
	else
	{
		if((border.offsetWidth - (2 * borderWidth)) > mypic.offsetWidth) // div is constrained to pic, width ways
		{
			if(((mydiv.offsetLeft + cropBoxBorderWidth) - mypic.offsetLeft  - (startPosX - e.x) >= 0) && ((mypic.offsetLeft + mypic.offsetWidth) - (mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth) - (e.x - startPosX) >= 0))
			{
				if(e.x != startPosX)
				{
					mydiv.style.left = mydiv.offsetLeft - (startPosX - e.x);
					startPosX = e.x;
				};
			}
			else if((mypic.offsetLeft + mypic.offsetWidth) - (mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth) - (e.x - startPosX) < 0)
			{
				mydiv.style.left = mypic.offsetLeft + mypic.offsetWidth - mydiv.offsetWidth + cropBoxBorderWidth;
				startPosX = e.x;
			}
			else if(((mydiv.offsetLeft + cropBoxBorderWidth) - mypic.offsetLeft  - (startPosX - e.x)) < 0)
			{
				mydiv.style.left = mypic.offsetLeft - cropBoxBorderWidth;
				startPosX = e.x;
			}
		}
		else // div is constrained to border, width ways
		{
			if(((mydiv.offsetLeft + cropBoxBorderWidth) - (border.offsetLeft + borderWidth) - (startPosX - e.x) >= 0) && ((border.offsetLeft + border.offsetWidth - borderWidth) - (mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth) - (e.x - startPosX) >= 0))
			{
				if(e.x != startPosX)
				{
					mydiv.style.left = mydiv.offsetLeft - (startPosX - e.x);
					startPosX = e.x;
				};
			}
			else if((border.offsetLeft + border.offsetWidth - borderWidth) - (mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth) - (e.x - startPosX) < 0)
			{
				mydiv.style.left = (border.offsetLeft + border.offsetWidth - borderWidth) - mydiv.offsetWidth + cropBoxBorderWidth;
				startPosX = e.x;
			}
			else if((mydiv.offsetLeft - (border.offsetLeft + borderWidth) - (startPosX - e.x)) + cropBoxBorderWidth < 0)
			{
				mydiv.style.left = (border.offsetLeft + borderWidth) - cropBoxBorderWidth;
				startPosX = e.x;
			}
		}
    }

	if(((mydiv.offsetTop + cropBoxBorderWidth) < mypic.offsetTop) && ((mydiv.offsetTop + mydiv.offsetHeight - cropBoxBorderWidth) > (mypic.offsetTop + mypic.offsetHeight)))
	{
		// do nothing, since div border is taller than picture
	}
	else
	{
		if(border.offsetHeight > mypic.offsetHeight) // div is constrained to pic, height ways
		{
			if((mydiv.offsetTop - mypic.offsetTop  - (startPosY - e.y) + cropBoxBorderWidth >= 0) && ((mypic.offsetTop + mypic.offsetHeight) - (mydiv.offsetTop + mydiv.offsetHeight) - (e.y - startPosY) + cropBoxBorderWidth >= 0))
			{
				if(e.y != startPosY)
				{
					mydiv.style.top = mydiv.offsetTop - (startPosY - e.y);
					startPosY = e.y;
				};
			}
			else if((mypic.offsetTop + mypic.offsetHeight) - (mydiv.offsetTop + mydiv.offsetHeight) - (e.y - startPosY) + cropBoxBorderWidth < 0)
			{
				mydiv.style.top = mypic.offsetTop + mypic.offsetHeight - mydiv.offsetHeight + cropBoxBorderWidth;
				startPosY = e.y;
			}
			else if((mydiv.offsetTop - mypic.offsetTop  - (startPosY - e.y)) + cropBoxBorderWidth < 0)
			{
				mydiv.style.top = mypic.offsetTop - cropBoxBorderWidth;
				startPosY = e.y;
			}
		}
		else // div is constrained to border, height ways
		{
			if((mydiv.offsetTop - (border.offsetTop + borderWidth) - (startPosY - e.y) + cropBoxBorderWidth >= 0) && ((border.offsetTop + border.offsetHeight - borderWidth) - (mydiv.offsetTop + mydiv.offsetHeight - cropBoxBorderWidth) - (e.y - startPosY) >= 0))
			{
				if(e.y != startPosY)
				{
					mydiv.style.top = mydiv.offsetTop - (startPosY - e.y);
					startPosY = e.y;
				};
			}
			else if((border.offsetTop + border.offsetHeight - borderWidth) - (mydiv.offsetTop + mydiv.offsetHeight - cropBoxBorderWidth) - (e.y - startPosY) < 0)
			{
				mydiv.style.top = (border.offsetTop + border.offsetHeight - borderWidth) - mydiv.offsetHeight + cropBoxBorderWidth;
				startPosY = e.y;
			}
			else if((mydiv.offsetTop - (border.offsetTop + borderWidth) - (startPosY - e.y)) + cropBoxBorderWidth < 0)
			{
				mydiv.style.top = border.offsetTop + borderWidth - cropBoxBorderWidth;
				startPosY = e.y;
			}
		}
    }
    SetHiddenValues();
}

function ClipPic()
{
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	
	var borderPicHeightDif = border.offsetHeight - (2 * borderWidth) - mypic.offsetHeight;
	var borderPicWidthDif = border.offsetWidth - (2 * borderWidth) - mypic.offsetWidth;

	var borderPicTopDif = border.offsetTop - mypic.offsetTop;
	var borderPicLeftDif = border.offsetLeft - mypic.offsetLeft;
	
	if(borderPicTopDif > 0) // top of picture outside border
	{
		clipTop = borderPicTopDif;
		clipBottom = clipTop + border.offsetHeight;
	}
	else
	{
		if(borderPicHeightDif > 0) // picture inside border
		{
			clipTop = 0;
			clipBottom = mypic.offsetHeight;
		}
		else // picture on border
		{
			clipTop = borderPicTopDif;
			clipBottom = clipTop + border.offsetHeight;
		}
		
	}
	
	if(borderPicLeftDif > 0) // picture outside left border
	{
		clipLeft = borderPicLeftDif;
		clipRight = clipLeft + border.offsetWidth;
	}
	else
	{
		if(borderPicWidthDif > 0) // picture inside border
		{
			clipLeft = 0;
			clipRight = mypic.offsetWidth;
		}
		else // picture on border
		{
			clipLeft = borderPicLeftDif;
			clipRight = clipLeft + border.offsetWidth;
		}
	}
	
	mypic.style.clip = 'rect(' + clipTop + 'px ' + clipRight + 'px ' + clipBottom + 'px ' + clipLeft + 'px)';
}

function ResetSize()
{
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	var heightDif = mypic.offsetHeight - originalHeight;
	var widthDif = mypic.offsetWidth - originalWidth;
	mypic.style.top = mypic.offsetTop + (heightDif / 2);
	mypic.style.left = mypic.offsetLeft + (widthDif / 2);
	mypic.style.pixelHeight = originalHeight;
	mypic.style.pixelWidth = originalWidth;
	/*
	var borderPicHeightDif = border.offsetHeight - mypic.offsetHeight;
	var borderPicWidthDif = border.offsetWidth - mypic.offsetWidth;
	if(borderPicHeightDif < 0) // picture taller than border, recenter
	{
		mypic.style.top = border.offsetTop + (borderPicHeightDif / 2);
	}
	if(borderPicWidthDif < 0) // picture wider than border, recenter
	{
		mypic.style.left = border.offsetLeft + (borderPicWidthDif / 2);
	}
	*/
	
	UpdatePicPosition();
	if(showCropBox)
	{
		UpdateCropBoxPosition();
	}
	ClipPic();
}


function ZoomIn(){
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	var widthDif = Math.round(.1 * mypic.width);
	(widthDif % 2) != 0 ? widthDif = (widthDif + 1) / 2 : widthDif = widthDif / 2;
	var heightDif = Math.round(.1 * mypic.height);
	(heightDif % 2) != 0 ? heightDif = (heightDif + 1) / 2 : heightDif = heightDif / 2;
				
	mypic.style.left = mypic.offsetLeft - widthDif;
	mypic.style.top = mypic.offsetTop - heightDif;
	mypic.style.pixelWidth = mypic.offsetWidth + (2 * widthDif);
	mypic.style.pixelHeight = mypic.offsetHeight + (2 * heightDif);
	
	//mydiv.style.left = mydiv.offsetLeft - widthDif;
	//mydiv.style.top = mydiv.offsetTop - heightDif;
	//mydiv.style.height = mydiv.offsetHeight + (2 * heightDif);
	//mydiv.style.width = mydiv.offsetWidth + (2 * widthDif);
	
	SetHiddenValues();
	ClipPic();
}

function ZoomOut(){
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	var widthDif = Math.round(.09 * mypic.width);
	(widthDif % 2) != 0 ? widthDif = (widthDif + 1) / 2 : widthDif = widthDif / 2;
	var heightDif = Math.round(.09 * mypic.height);
	(heightDif % 2) != 0 ? heightDif = (heightDif + 1) / 2 : heightDif = heightDif / 2;
	
	mypic.style.left = mypic.offsetLeft + widthDif;
	mypic.style.top = mypic.offsetTop + heightDif;
	mypic.style.pixelWidth = mypic.offsetWidth - (2 * widthDif);
	mypic.style.pixelHeight = mypic.offsetHeight - (2 * heightDif);
	
	
	
	//mydiv.style.left = mydiv.offsetLeft + widthDif;
	//mydiv.style.top = mydiv.offsetTop + heightDif;
	//mydiv.style.height = mydiv.offsetHeight - (2 * heightDif);
	//mydiv.style.width = mydiv.offsetWidth - (2 * widthDif);
	
	UpdatePicPosition();
	if(showCropBox)
	{
		UpdateCropBoxPosition();
	}
	
	SetHiddenValues();
	ClipPic();
}

function UpdatePicPosition()
{
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	if(mypic.offsetLeft > border.offsetLeft) // inside the left border
	{
		if((mypic.offsetLeft + mypic.offsetWidth) < (border.offsetLeft + border.offsetWidth - borderWidth)) // inside the right border
		{
			HCenterPic();
		}
		else // overhanging ride border
		{
			if((mypic.offsetLeft - border.offsetLeft) < ((mypic.offsetLeft + mypic.offsetWidth) - (border.offsetLeft + border.offsetWidth - borderWidth))) // enough overhang to move
			{
				mypic.style.left = border.offsetLeft + borderWidth;
			}
			else // not enough overhang, center
			{
				HCenterPic();
			}
		}
	}
	if(mypic.offsetTop > (border.offsetTop + borderWidth)) // inside the top border
	{
		if((mypic.offsetTop + mypic.offsetHeight) < (border.offsetTop + border.offsetHeight - borderWidth)) // inside the bottom border
		{
			VCenterPic();
		}
		else // outside bottom border
		{
			if(((mypic.offsetTop + mypic.offsetHeight) - (border.offsetTop + border.offsetHeight - borderWidth)) > ((border.offsetTop + borderWidth) - mypic.offsetTop)) // enough overhang
			{
				mypic.style.top = border.offsetTop + borderWidth;
			}
			else // not enough overhang, center
			{
				VCenterPic();
			}
		}
	}
	if((mypic.offsetLeft + mypic.offsetWidth) < (border.offsetLeft + border.offsetWidth - borderWidth)) // inside the right border
	{
		if(mypic.offsetLeft > border.offsetLeft) // inside the left border
		{
			HCenterPic();
		}
		else
		{
			if(((border.offsetLeft + border.offsetWidth - borderWidth) - (mypic.offsetLeft + mypic.offsetWidth)) < (border.offsetLeft - mypic.offsetLeft)) // enough overhang to move
			{
				mypic.style.left = border.offsetLeft + border.offsetWidth - borderWidth - mypic.offsetWidth;
			}
			else
			{
				HCenterPic();
			}
		}
	}
	if((mypic.offsetTop + mypic.offsetHeight) < (border.offsetTop + border.offsetHeight - borderWidth)) // inside the bottom border
	{
		if(mypic.offsetTop > (border.offsetTop + borderWidth)) // inside the top border
		{
			VCenterPic();
		}
		else // outside the top border
		{
			if(((border.offsetTop + borderWidth) - mypic.offsetTop) > ((border.offsetTop + border.offsetHeight - borderWidth) - (mypic.offsetTop + mypic.offsetHeight))) // enough overhang
			{
				mypic.style.top = border.offsetTop + border.offsetHeight - borderWidth - mypic.offsetHeight;
			}
			else // not enough overhang
			{
				VCenterPic();
			}
		}
	}
}

function UpdateCropBoxPosition()
{
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	if(((mypic.offsetTop + mypic.offsetHeight) < (mydiv.offsetTop + mydiv.offsetHeight - cropBoxBorderWidth)) && (mypic.offsetTop > (mydiv.offsetTop + cropBoxBorderWidth))) // crop box outside, recenter
	{
		VCenterCropBox();
	}
	else if((mypic.offsetTop + mypic.offsetHeight) < (mydiv.offsetTop + mydiv.offsetHeight - cropBoxBorderWidth)) // crop box too low
	{
		if(((mydiv.offsetTop + mydiv.offsetHeight - cropBoxBorderWidth) - (mypic.offsetTop + mypic.offsetHeight)) > ((mydiv.offsetTop + cropBoxBorderWidth) - mypic.offsetTop))
		{
			VCenterCropBox();
		}
		else // enough room to move up
		{
			mydiv.style.top = mypic.offsetTop + mypic.offsetHeight - mydiv.offsetHeight + cropBoxBorderWidth;
		}
	}
	else if(mypic.offsetTop > (mydiv.offsetTop + cropBoxBorderWidth)) // crop box too high
	{
		if((mypic.offsetTop - (mydiv.offsetTop + cropBoxBorderWidth)) > ((mypic.offsetTop + mypic.offsetHeight) - (mydiv.offsetTop + mydiv.offsetHeight - cropBoxBorderWidth)))
		{
			VCenterCropBox();
		}
		else // enough room to move down
		{
			mydiv.style.top = mypic.offsetTop - cropBoxBorderWidth;
		}
	}
	
	if(((mypic.offsetLeft + mypic.offsetWidth) < (mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth)) && (mypic.offsetLeft > (mydiv.offsetLeft + cropBoxBorderWidth))) // crop box outside, recenter
	{
		HCenterCropBox();
	}
	else if((mypic.offsetLeft + mypic.offsetWidth) < (mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth)) // crop box too far right
	{
		if(((mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth) - (mypic.offsetLeft + mypic.offsetWidth)) > ((mydiv.offsetLeft + cropBoxBorderWidth) - mypic.offsetLeft))
		{
			HCenterCropBox();
		}
		else // enough room to align right
		{
			mydiv.style.left = mypic.offsetLeft + mypic.offsetWidth - mydiv.offsetWidth + cropBoxBorderWidth;
		}
	}
	else if(mypic.offsetLeft > (mydiv.offsetLeft + cropBoxBorderWidth)) // crop box too far left
	{
		if((mypic.offsetLeft - (mydiv.offsetLeft + cropBoxBorderWidth)) > ((mypic.offsetLeft + mypic.offsetWidth) - (mydiv.offsetLeft + mydiv.offsetWidth - cropBoxBorderWidth)))
		{
			HCenterCropBox();
		}
		else // enough room to align left
		{
			mydiv.style.left = mypic.offsetLeft - cropBoxBorderWidth;
		}
	}
}

function HCenterCropBox()
{
	var mydiv = document.getElementById('imgCropBox');
	var border = document.getElementById('imgBorder');
	mydiv.style.left = border.offsetLeft + (border.offsetWidth / 2) - (mydiv.offsetWidth / 2);
}
function VCenterCropBox()
{
	var mydiv = document.getElementById('imgCropBox');
	var border = document.getElementById('imgBorder');
	mydiv.style.top = border.offsetTop + (border.offsetHeight / 2) - (mydiv.offsetHeight / 2);
}

function HCenterPic()
{
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	mypic.style.left = border.offsetLeft + (border.offsetWidth / 2) - (mypic.offsetWidth / 2);
}

function VCenterPic()
{
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	mypic.style.top = border.offsetTop + (border.offsetHeight / 2) - (mypic.offsetHeight / 2);
}

function imageEditInitialSetup()
{
	var imageFilePath = document.getElementById('imageFilePath');
	if(imageFilePath.value != '')
	{
		updateEditImage(imageFilePath.value);
	}
}

function updateEditImage(imgPath)
{
	if(imgPath && imgPath != '')
	{
		var img = document.getElementById('imgEdit');
		if(img)
		{
			var filepath;
			
			if(imgPath.indexOf('http') == -1 && imgPath.indexOf('file:///') == -1)
			{
				var newImgPath = "";
				var firstpos = imgPath.indexOf('\\');
				var pairs = imgPath.substring(firstpos + 1,imgPath.length).split('\\');
				for(i = 0; i < pairs.length; i++)
				{
					if(i > 0 || firstpos < 1) newImgPath += '\\';
					var querypair = pairs[i].split('?');
					if(querypair.length > 1)
					{
						newImgPath = newImgPath + escape(querypair[0]);
					}
					else
					{
						newImgPath = newImgPath + escape(pairs[i]);
					}
				}
				imgPath = imgPath.substring(0, firstpos + 1) + newImgPath;
				filepath = 'file:///' + imgPath;
			}
			else
			{
				filepath = imgPath;
			}
			img.src = filepath + '?' + (new Date()).getTime();
			var newImg = new Image();
			newImg.onload = function() {applySize(this);};
			newImg.src = filepath + '?' + (new Date()).getTime();
			var imageFilePath = document.getElementById('imageFilePath');
			imageFilePath.value = imgPath;
		}
	}
}

function applySize(loadedImage)
{
	var unloadedImage = document.getElementById('imgEdit');
	unloadedImage.style.pixelHeight = loadedImage.height;
	unloadedImage.style.pixelWidth = loadedImage.width;
	Initialize();
}

function insertImageFromFileInput(src)
{
    var imagePath = src.value.toLowerCase();
    if(imagePath.indexOf('.jpg') == -1 && imagePath.indexOf('.jpeg') == -1 && imagePath.indexOf('.gif') == -1 &&
        imagePath.indexOf('.bmp') == -1 && imagePath.indexOf('.tiff') == -1 && imagePath.indexOf('.png') == -1) {
            alert('Please select an image file: (.jpg / .gif / .bmp / .tiff / .png)');
            document.Form2.reset();
    } else {
        updateEditImage(imagePath);
    }
    ToggleCropBox(true);
}

function ShrinkToFitBorder(){
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	var widthRatio = mypic.offsetWidth / border.offsetWidth;
	var heightRatio = mypic.offsetHeight / border.offsetHeight;
	var widthHeightRatio = mypic.offsetWidth / mypic.offsetHeight;
	if(heightRatio > widthRatio)
	{
		mypic.style.pixelHeight = border.offsetHeight - (2 * borderWidth);
		mypic.style.pixelWidth = Math.round(mypic.offsetHeight * widthHeightRatio);
		mypic.style.top = border.offsetTop + borderWidth;
		mypic.style.left = border.offsetLeft + (border.offsetWidth - mypic.offsetWidth) / 2 ;
	}
	else
	{
		mypic.style.pixelWidth = border.offsetWidth - (2 * borderWidth);
		mypic.style.pixelHeight = Math.round(mypic.offsetWidth / widthHeightRatio);
		mypic.style.top = border.offsetTop + (border.offsetHeight - mypic.offsetHeight) / 2 ;
		mypic.style.left = border.offsetLeft + borderWidth;
	}
	ClipPic();
}

function ClipToFitBorder(){
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	var widthRatio = mypic.offsetWidth / border.offsetWidth;
	var heightRatio = mypic.offsetHeight / border.offsetHeight;
	var widthHeightRatio = mypic.offsetWidth / mypic.offsetHeight;
	if(heightRatio > widthRatio)
	{
		mypic.style.pixelWidth = border.offsetWidth - (2 * borderWidth);
		mypic.style.pixelHeight = Math.round(mypic.offsetWidth / widthHeightRatio);
		mypic.style.top = border.offsetTop - (mypic.offsetHeight - border.offsetHeight) / 2 ;
		mypic.style.left = border.offsetLeft + borderWidth;
	}
	else
	{
		mypic.style.pixelHeight = border.offsetHeight - (2 * borderWidth);
		mypic.style.pixelWidth = Math.round(mypic.offsetHeight * widthHeightRatio);
		mypic.style.top = border.offsetTop + borderWidth;
		mypic.style.left = border.offsetLeft - (mypic.offsetWidth - border.offsetWidth) / 2 ;
	}
	ClipPic();
}

function ShrinkToFitCropBox(){
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	ToggleCropBox(true);
	if(mydiv.style.visibility == 'visible')
	{
		var insideWidth = (mydiv.offsetWidth - (2 * cropBoxBorderWidth));
		var insideHeight = (mydiv.offsetHeight - (2 * cropBoxBorderWidth));
		var widthRatio = mypic.offsetWidth / insideWidth;
		var heightRatio = mypic.offsetHeight / insideHeight;
		var widthHeightRatio = mypic.offsetWidth / mypic.offsetHeight;
		if(heightRatio > widthRatio)
		{
			mypic.style.pixelHeight = insideHeight;
			mypic.style.pixelWidth = Math.round(mypic.offsetHeight * widthHeightRatio);
			mypic.style.top = mydiv.offsetTop + cropBoxBorderWidth;
			mypic.style.left = mydiv.offsetLeft + cropBoxBorderWidth + ((insideWidth - mypic.offsetWidth) / 2) ;
		}
		else
		{
			mypic.style.pixelWidth = insideWidth;
			mypic.style.pixelHeight = Math.round(mypic.offsetWidth / widthHeightRatio);
			mypic.style.top = mydiv.offsetTop + cropBoxBorderWidth + ((insideHeight - mypic.offsetHeight) / 2);
			mypic.style.left = mydiv.offsetLeft + cropBoxBorderWidth;
		}
		SetHiddenValues();
		ClipPic();
	}
}

function ClipToFitCropBox(){
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	var border = document.getElementById('imgBorder');
	ToggleCropBox(true);
	var insideWidth = (mydiv.offsetWidth - (2 * cropBoxBorderWidth));
	var insideHeight = (mydiv.offsetHeight - (2 * cropBoxBorderWidth));
	var widthRatio = mypic.offsetWidth / insideWidth;
	var heightRatio = mypic.offsetHeight / insideHeight;
	var widthHeightRatio = mypic.offsetWidth / mypic.offsetHeight;
	if(heightRatio > widthRatio)
	{
		mypic.style.pixelWidth = insideWidth;
		mypic.style.pixelHeight = Math.round(mypic.offsetWidth / widthHeightRatio);
		mypic.style.top = mydiv.offsetTop + cropBoxBorderWidth + ((insideHeight - mypic.offsetHeight) / 2);
		mypic.style.left = mydiv.offsetLeft + cropBoxBorderWidth;
	}
	else
	{
		mypic.style.pixelHeight = insideHeight;
		mypic.style.pixelWidth = Math.round(mypic.offsetHeight * widthHeightRatio);
		mypic.style.top = mydiv.offsetTop + cropBoxBorderWidth;
		mypic.style.left = mydiv.offsetLeft + cropBoxBorderWidth + ((insideWidth - mypic.offsetWidth) / 2);
	}
	SetHiddenValues();
	ClipPic();
}

function SetHiddenValues()
{
	var mydiv = document.getElementById('imgCropBox');
	var mypic = document.getElementById('imgEdit');
	if(mypic.offsetHeight < mydiv.offsetHeight)
	{
		document.getElementById('zoomFactor').value = mypic.offsetWidth / originalWidth;
	}
	else
	{
		document.getElementById('zoomFactor').value = mypic.offsetHeight / originalHeight;
	}
	if(mydiv.offsetWidth > mypic.offsetWidth)
	{
		document.getElementById('thumbNailWidth').value = mypic.offsetWidth;
	}
	else
	{
		document.getElementById('thumbNailWidth').value = mydiv.offsetWidth - (2 * cropBoxBorderWidth);
	}
	if(mydiv.offsetHeight > mypic.offsetHeight)
	{
		document.getElementById('thumbNailHeight').value = mypic.offsetHeight;
	}
	else
	{
		document.getElementById('thumbNailHeight').value = mydiv.offsetHeight - (2 * cropBoxBorderWidth);
	}
	document.getElementById('thumbNailX').value = (mydiv.offsetLeft + cropBoxBorderWidth) - mypic.offsetLeft;
    document.getElementById('thumbNailY').value = (mydiv.offsetTop + cropBoxBorderWidth) - mypic.offsetTop;
}