function cropVals(d,f,g,h,i,j)  {
	this.fieldupdater = f;
	this.classname = d;
	this.imgsrc = g;
	this.outerdiv = h;
	this.targetwidth = i;
	this.targetheight = j;
}

cropVals.prototype.cropper = 0;
cropVals.prototype.crop_margin_top = 0;
cropVals.prototype.crop_margin_left = 0;
cropVals.prototype.resizex = 0;
cropVals.prototype.orig_width = 0;
cropVals.prototype.orig_height = 0;
cropVals.prototype.offsetcontrols = 1;
cropVals.prototype.panImage = '';
cropVals.prototype.panImageDiv = '';

cropVals.prototype.cancelX = function() {
	this.cropper = 0;
	hideBounder(this,0);
	document.getElementById(this.cropcontroldiv) ? document.getElementById(this.cropcontroldiv).style.display = 'none':false;
	document.getElementById(this.wrapperdiv).style.width = this.targetwidth + 'px';
	document.getElementById(this.wrapperdiv).style.height = this.targetheight + 'px';
	if(	document.getElementById(this.imgname).src.indexOf("?")<1) {
		document.getElementById(this.imgname).src=this.imgsrc+"?0&0&"+this.orig_width;
		simulCrop(this.imgname);
		document.getElementById(this.imgname).src=this.imgsrc;
	}
	else {
		document.getElementById(this.imgname).src = this.imgsrc;
		simulCrop(this.imgname);
	}	
}

cropVals.prototype.showPan = function() {
	whichclass = this;
	tx = document.getElementById(whichclass.outerdiv).innerHTML;
	whichclass.panImage = whichclass.classname+"x_panimager_x";
	whichclass.panImageDiv = whichclass.classname+"x_panimager_x_divholder";
	pandiv = '<br /><div id="'+whichclass.panImageDiv+'" style="width:'+whichclass.targetwidth+'px; height:'+whichclass.targetheight+'px; overflow: hidden; border:solid 2px #333333; display:none; "><img id="'+ whichclass.panImage +'" src="'+ whichclass.imgsrc +'" onload="simulCrop(this.id);"  /></div>';
	document.getElementById(whichclass.outerdiv).innerHTML = tx + pandiv;
}

cropVals.prototype.enlargeX = function() {
	tx = document.getElementById(this.imgname);
	tx.width = parseInt(tx.width*1.1);
	this.maxY = tx.height-this.targetheight;
	this.maxX = tx.width-this.targetwidth;
	
	document.getElementById(this.wrapperdiv).style.width = tx.width + 'px';
	document.getElementById(this.wrapperdiv).style.height = tx.height + 'px';
	this.resizex = tx.width;
	if(this.panImage!='') {
		if(document.getElementById(this.panImage)) {
			document.getElementById(this.panImage).width = tx.width;
		}
	}
}

cropVals.prototype.reduceX = function() {
	tx = document.getElementById(this.imgname)
	tx.width = parseInt(tx.width*.9);
	document.getElementById(this.wrapperdiv).style.width = tx.width + 'px';
	document.getElementById(this.wrapperdiv).style.height = tx.height + 'px';
	this.maxY = tx.height-this.targetheight;
	this.maxX = tx.width-this.targetwidth;	
	this.resizex = tx.width;
	if(this.panImage!='') {
		if(document.getElementById(this.panImage)) {
			document.getElementById(this.panImage).width = tx.width;
		}
	}
}

cropVals.prototype.toggleCropper = function() {
	tx = document.getElementById(this.wrapperdiv);
	ta = document.getElementById(this.imgname);
	tb = document.getElementById(this.borderdiv);
	tb.style.width = tx.style.width;
	tb.style.height = tx.style.height;
	this.cropper = this.cropper==0 ? 1:0;
	if(this.cropper == 0) {
		hideBounder(this,0);
		cropImage(this);
		document.getElementById(this.cropcontroldiv).style.display = 'none'
		this.panImageDiv != '' ? document.getElementById(this.panImageDiv).style.display = 'none':false;
	}
	else {
		hideBounder(this,1);
		orig_src = tx.innerHTML;
		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 = "none";	
		document.getElementById(this.cropcontroldiv).style.display = ''
		this.panImageDiv != '' ? document.getElementById(this.panImageDiv).style.display = '':false;
	}
	
}

function cropImage(classobj) {
		tx = document.getElementById(classobj.wrapperdiv);
		ta = document.getElementById(classobj.imgname);
		ty = document.getElementById(classobj.borderdiv);
		//tx.innerHTML = orig_src;
		tx.style.width = orig_width;
		tx.style.height=orig_height;
		tx.style.overflow = "hidden";
		newname = parseImageName(ta.src);
		cropzone = "?"+classobj.crop_margin_top+"&"+classobj.crop_margin_left+"&"+classobj.resizex;
		newname = newname+cropzone;
		ta.src=newname;	
		/// Added by Israel to include saving cropped image
		document.getElementById('savebutton').style.display='block';
		document.getElementById('savebutton').name=newname;
		///
		if(document.getElementById(classobj.fieldupdater)) {
			if(document.getElementById(classobj.fieldupdater).value != "") {
	document.getElementById(classobj.fieldupdater).value=parseImageName(document.getElementById(classobj.fieldupdater).value)+cropzone;	}
			else {
				document.getElementById(classobj.fieldupdater).value=newname; 
							
				}
		}
}

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

function moveBord(whichE, event, classobj) {

	if(classobj.cropper == 0) {	return;	}	
	x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(classobj.wrapperdiv).offsetLeft;
	y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(classobj.wrapperdiv).offsetTop;
	y = y-classobj.offsetcontrols;
	x = x-classobj.offsetcontrols;
	theborder= document.getElementById(classobj.borderdiv)
	imgheight= document.getElementById(classobj.imgname).clientHeight;
	imgwidth = document.getElementById(classobj.imgname).clientWidth;	
	theborder.style.display='';	
	bh = parseNumval(theborder.style.height);
	bw = parseNumval(theborder.style.width);
	
	newT = parseNumval(theborder.style.marginTop)+y;
	newL = parseNumval(theborder.style.marginLeft)+x;
	
	x = whichE == 0 ? x : newL ;
	y = whichE == 0 ? y : newT+imgheight ;
	
	decideToMove(x,y,classobj,theborder);
}


function decideToMove(x,y,classobj,theborder) {
	imgheight= document.getElementById(classobj.imgname).clientHeight;
	y = y>classobj.maxY ? classobj.maxY : y;
	x = x>classobj.maxX ? classobj.maxX : x;
	y = y<classobj.minY ? classobj.minY : y;
	x = x<classobj.minX ? classobj.minX : x;	
	theborder.style.marginTop=(imgheight*-1)+y;
	theborder.style.marginLeft=x;
	
	cropTop =  y*-1;
	cropLeft =	x*-1;
	

	classobj.crop_margin_top = cropTop;
	classobj.crop_margin_left = cropLeft;

	if(classobj.panImage!='') {
		if(document.getElementById(classobj.panImage)) {
			document.getElementById(classobj.panImage).style.marginTop = cropTop; 
			document.getElementById(classobj.panImage).style.marginLeft =cropLeft;		}
	}
}

function parseNumval(v) {
	t = v.replace("px","");
	return parseFloat(t);
}

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];
	resizerx = cropzone[2] ? cropzone[2] : 0;
	resizerx != 0 ? tx.width=resizerx : false;
	if(IsNumeric(topmargin)){tx.style.marginTop = topmargin+"px";}
	if(IsNumeric(leftmargin)){tx.style.marginLeft = leftmargin+"px";}
}
	
cropVals.prototype.init = function() {
	whichclass = this;
	whichclass.cropcontroldiv = whichclass.classname+'_'+'x_crop_controls_x';
	whichclass.wrapperdiv = whichclass.classname+'_'+'x_wrapper_div_x';
	whichclass.imgname = whichclass.classname+'_'+'x_img_div_x';
	whichclass.borderdiv = whichclass.classname+'_'+'x_border_div_x';
	
	cropperdivcontent = '<div id="'+whichclass.cropcontroldiv+'" style="display:none; height:18px;" onmouseover=hideBounder('+whichclass.classname+'",0)><span onclick="'+whichclass.classname+'.enlargeX()" style="cursor:pointer; font-weight:bold; color:#000000">Enlarge</span>&nbsp;&nbsp;<span onclick="'+whichclass.classname+'.reduceX()" style="cursor:pointer;font-weight:bold; color:#000000">Reduce</span>&nbsp;&nbsp;<span  onclick="'+whichclass.classname+'.cancelX()" style="cursor:pointer;font-weight:bold; color:#000000">Cancel Cropping</span></div>';
	
	imgdivcontent= '<div id="'+ whichclass.wrapperdiv +'" style="width:'+whichclass.targetwidth+'px; height:'+whichclass.targetheight+'px; overflow: hidden; border:solid 2px #333333; z-index:100" onclick="'+whichclass.classname+'.toggleCropper();" onmousemove="moveBord(0, event,'+whichclass.classname+')"><img id="'+whichclass.imgname+'" src="'+whichclass.imgsrc+'" onLoad="simulCrop(this.id);"  /></div>';
	
	borderdivcontent = '<div id="'+whichclass.borderdiv+'"  onmousemove="moveBord(1, event,'+whichclass.classname+')" onclick="'+whichclass.classname+'.toggleCropper();"  ></div>';
	
	document.getElementById(whichclass.outerdiv).innerHTML = cropperdivcontent+imgdivcontent+borderdivcontent;
	tx = document.getElementById(whichclass.wrapperdiv);
	txb = document.getElementById(whichclass.borderdiv);
	txb.style.display = "none";
	txb.style.borderColor = "#FFFF00";
	txb.style.borderStyle = "solid";
	txb.style.borderWidth = "2px";
	txb.style.color = "#00FF00";
	txb.style.position = "absolute";
	txb.style.zIndex = "200";
	this.orig_width = document.getElementById(whichclass.imgname).width;
	this.orig_height = document.getElementById(whichclass.imgname).height;
	whichclass.maxY = whichclass.orig_height-whichclass.targetheight;
	whichclass.maxX = whichclass.orig_width-whichclass.targetwidth;
	whichclass.minY = 0;
	whichclass.minX = 0;
	cropper.offsetcontrols = 10;
}




function IsNumeric(strString)
   //  check for valid numeric strings	
   {
   var strValidChars = "0123456789.-";
   var strChar;
   var blnResult = true;

   
   var testVariableLength = (strString ? strString.length : 0);
   
   if (testVariableLength == 0) return false;

   //  test strString consists of valid characters listed above
   for (i = 0; i < strString.length && blnResult == true; i++)
      {
      strChar = strString.charAt(i);
      if (strValidChars.indexOf(strChar) == -1)
         {
         blnResult = false;
         }
      }
   return blnResult;
   }