var cropper = 0;
var crop_margin_top = 0;
var crop_margin_left = 0;
var orig_width = 0;
var orig_height = 0;


function toggleCropper(borderdiv,imgwrapperdiv,imgname,fieldupdater) {
	tx = document.getElementById(imgwrapperdiv);
	ta = document.getElementById(imgname);
	tb = document.getElementById(borderdiv);
	tb.style.width = tx.style.width;
	tb.style.height = tx.style.height;
	cropper = cropper==0 ? 1:0;
	if(cropper == 0) {
		hideBounder(borderdiv,0);
		cropImage(borderdiv,imgwrapperdiv,imgname,fieldupdater)
	}
	else {
		hideBounder(borderdiv,1);
		orig_width = tx.style.width;;
		orig_height =tx.style.height;		
		tx.style.width = ta.width;
		tx.style.height = ta.height;
		ta.style.marginTop = "0px";
		ta.style.marginLeft = "0px";
		tx.style.overflow = "hidden";	
	}
	
}

function cropImage(borderdiv,imgwrapperdiv,imgname,fieldupdater) {
		tx = document.getElementById(imgwrapperdiv);
		ta = document.getElementById(imgname);
		ty = document.getElementById(borderdiv);
		tx.style.width = orig_width;
		tx.style.height=orig_height;
		tx.style.overflow = "hidden";
		newname = parseImageName(ta.src);
		cropzone = "?"+crop_margin_top+"&"+crop_margin_left;
		newname = newname+cropzone;
		ta.src=newname;	
		if(document.getElementById(fieldupdater)) {
			if(document.getElementById(fieldupdater).value != "") {
				document.getElementById(fieldupdater).value=parseImageName(document.getElementById(fieldupdater).value)+cropzone;
			}
			else {
				document.getElementById(fieldupdater).value=newname; }
		}
}

function hideBounder(borderdiv,onoff) {
	theborder= document.getElementById(borderdiv);
	if(onoff == 0) {
		theborder.style.display='none';
	}
	else {
		theborder.style.display='';
	}		
	
}

function moveBord(event, borderdiv, imgname, panImage) {
	if(cropper == 0) {	return;	}	
	x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("imgdiv").offsetLeft;
	y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("imgdiv").offsetTop;
	theborder= document.getElementById(borderdiv)
	imgheight= document.getElementById(imgname).clientHeight;
	imgwidth = document.getElementById(imgname).clientWidth;	
	theborder.style.display='';	
	bh = theborder.style.height.replace('px','');
	bw = theborder.style.width.replace('px','')
	
	if( (parseInt(y) + parseInt(bh)>imgheight) || (parseInt(x) + parseInt(bw)>imgwidth)  ) {
		theborder.style.borderColor = "#ff0000"; }	
	else {
		theborder.style.borderColor = "#ffff00"; }	
		theborder.style.marginTop=(imgheight*-1)+y
		theborder.style.marginLeft=x;
		crop_margin_top = y*-1;
		crop_margin_left = x*-1;
	
		if(panImage!='') {
			if(document.getElementById(panImage)) {
				document.getElementById(panImage).style.marginTop = y*-1
				document.getElementById(panImage).style.marginLeft = x*-1		
			}
	}
}

	function parseImageName(imgname) {
		bx = imgname.split("?");
		return bx[0];
	}

	function simulCrop(imgdiv) {
		tx = document.getElementById(imgdiv);
		cropzone = tx.src.replace(parseImageName(tx.src)+"?","");
		cropzone = cropzone.split("&");
		topmargin = cropzone[0];
		leftmargin =  cropzone[1];
		tx.style.marginTop = topmargin+"px";
		tx.style.marginLeft = leftmargin+"px";	
	}