Обрезка фотографий в IE
 

Здравствуйте. Есть скрипт в админке, который делает обрезку фотографий. Суть в том, что админка писалась много лет назад и писалась под ИЕ 6-7. Собственно, в режиме совместимости админка продолжает работать нормально. А вот в обычном режиме ИЕ 10-11 не правильно работает. Т.е. данные все передает и нормально сохраняет. А вот сама обрезка происходит криво.
Вот код.

<script language=JavaScript type="text/javascript">
function load_it() {
	b_v=document.getElementById('body_show');
	b_h=document.getElementById('body_hide');

	if (b_h) b_h.style.display='none';
	if (b_v) b_v.style.display='block';

	var img_width = document.getElementById('mainpic_big').width;
	var img_height = document.getElementById('mainpic_big').height;

	document.getElementById('small1_main').height = img_height + 16;
	document.getElementById('small1_main').width = img_width + 16;

        setCropParams(img_width, img_height, 115, 86, 'small1');
	setCrop(0, 0, img_width, img_height, 1, 1, 'small1');
function doSend() {
	document.body.onbeforeunload = null;
	saveCrop('small1');
	saveCrop('small2');
	saveCrop('big');
	return true;
}

function doCancel() {
	document.body.onbeforeunload = null;
	document.forma.do_crop.value = 0;
	
}

Далее html картинки. Заливается картинка, поверх нее таблица, с которой и снимаются показатели координат для обрезки.

<table cellSpacing=0 cellPadding=0 border=0>
<tr><td>Маленькое изображение 1:</td></tr>
<tr>
  <td>
    <DIV id='msmall1' style="POSITION: absolute;">
    <table id="small1_main" onmouseup="MouseUp('small1');" onmousemove="MouseMove('small1')" height=466 cellSpacing=0 cellPadding=0 width="353" border=0  style="filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80)">
    <tr vAlign=bottom class="fontab">
      <td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
      <td id="small1_top" align=middle><img onmousedown="MouseDown('top','small1')" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_top_r.gif" width=8 onSelect="return false;"></td>
      <td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
    </tr>
    <tr>
      <td id="small1_left" align=right class="fontab"><img onmousedown="MouseDown('left','small1');" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_left_r.gif" width=8 onSelect="return false;"></td>
      <td onmousedown="MouseDown('center','small1');" ondragstart="return false;" style="CURSOR: hand;border:1px solid #fff;">&nbsp;</td>
      <td id="small1_right" align=left class="fontab"><img onmousedown="MouseDown('right','small1');" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_right_r.gif" width=8 onSelect="return false;"></td>
    </tr>
    <tr vAlign=top class="fontab">
      <td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
      <td id="small1_bottom" align=middle><img onmousedown="MouseDown('bottom','small1');" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_bottom_r.gif" width=8 onSelect="return false;"></td>
      <td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
    </tr>
    </table>
    </DIV>
    <img id=mainpic_small1 src="^[$webpath]/^[$id]^[$ext]?^[$no_cache]" border=0 hspace=8 vspace=8>
  </td>
</tr> </table>

И код tools.js

var what=new Array();
var pchanged=new Array();

d=document;
isIE=document.all && document.all.item;
isOpera=window.opera;

var mbutton=0;
var debug_on=false;
var catch_click=false;

function debug_out(s,p) {
	el=document.getElementById('info');
	if (el) {
		if (p)
			el.innerHTML=el.innerHTML+s;
		else
			el.innerHTML=s;
	}
}

function saveevent(e,b) {
	if (isIE) {
		what[0]=e.x;what[1]=e.y;
	} else {
		what[0]=e.pageX;what[1]=e.pageY;
	}
	if (b!=-1) what[2]=b;
}

function ismousedown(e) { 
	if (isIE) {
		e=window.event;
		b=e.button;
	} else {
		b=e.which;
	}
	mbutton=b;
	if (b!=2) b=1;
	saveevent(e,b); 
	if (catch_click) click_event(what,mbutton,true)
	mbutton=b;
}

function ismouseup(e) { 
	if (isIE) {
		e=window.event;
		mbutton=e.button;
	} else {
		mbutton=e.which;
	}
	saveevent(e,0);
	if (catch_click) click_event(what,mbutton,false)
	mbutton=0;
}

function catchMe(e) {
	if (isIE) {
		e=window.event;
		b=e.button;
	} else {
		b=e.which;
	}
	if (b!=1) b=0;
	mbutton=b;
	saveevent(e,-1);
}

if  document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE);

document.onmousedown = ismousedown;
document.onmouseup = ismouseup;
document.onmousemove = catchMe;
document.ondragstart = new Function ( "return false;" );
//document.onselectstart = new Function ( "return false;" );


var CurrentSide = null;
var x0 = 0;
var y0 = 0;

var pobj=new Array();

var pwidth=0;
var pheight=1;
var pscale=2;
var pminwidth=3;
var pminheight=4;

function gpid(objid) {
	el=objid.split("_");
	if (el.length>1)
		return el[el.length-1]
	else
		return 0;
}

function setCropParams(w, h, hs, ws, objid) {
	pobj[objid]=new Array();
	pobj[objid][pwidth]=w;
	pobj[objid][pheight]=h;
  
	pchanged[gpid(objid)]=false;

	if (ws==hs)
		pobj[objid][pscale]=0;
	else
		pobj[objid][pscale]=hs/ws;

	pobj[objid][pminwidth]=ws;
	pobj[objid][pminheight]=hs; 
}

function setCrop(x1, y1, x2, y2, axisx, axisy, objid) {
	if(x1 < 0) {
		x1 = 0;
		axisx=1;
	}

	if(x1 > (pobj[objid][pwidth]-8)) {
		x1 = pobj[objid][pwidth]-8;
		axisx=1;
	}

	if(y1 < 0) {
		y1 = 0;
		axisy=1;
	}

	if(y1 > (pobj[objid][pheight]-8)) {
		y1 = pobj[objid][pheight]-8;
		axisy=1;
	}

	if(x2 < 8) {
		x2 = 8;
		axisx=1;
	}

	if(x2 > pobj[objid][pwidth]) {
		x2 = pobj[objid][pwidth];
		axisx=1;
	}

	if(y2 < 8) {
		y2 = 8;
		axisy=1;
	}

	if(y2 > pobj[objid][pheight]) {
		y2 = pobj[objid][pheight];
		axisy=1;
	}

	nheight=y2-y1;
	nwidth=x2-x1;

	if (axisx && axisy && pobj[objid][pscale]!=0) {
		if (nheight/nwidth>pobj[objid][pscale]) {
			axisx=1;
			axisy=0;
		} else {
			axisx=0;
			axisy=1;
		}
	}

	nheight=y2-y1;
	nwidth=x2-x1;
  
	if (axisx && pobj[objid][pscale]!=0) {
		y1=y1+Math.round((nheight-pobj[objid][pscale]*nwidth)/2);
		y2=y1+Math.round(pobj[objid][pscale]*nwidth);
	}
  
	nheight=y2-y1;
	nwidth=x2-x1;
	if (axisy && pobj[objid][pscale]!=0) {
		x1=x1+Math.round((nwidth-nheight/pobj[objid][pscale])/2);
		x2=x1+Math.round(nheight/pobj[objid][pscale]);
	}

	if (nheight<pobj[objid][pminheight]) nheight=pobj[objid][pminheight];
	if (nwidth<pobj[objid][pminwidth]) nwidth=pobj[objid][pminwidth];

	if ( 
		(y1>=0) && 
		(y2<=pobj[objid][pheight]) && 
		(x1>=0) && 
		(x2<=pobj[objid][pwidth]) && 
		((y2-y1)>=pobj[objid][pminheight]) && 
		((x2-x1)>=pobj[objid][pminwidth])
	) {
		l=d.getElementById(objid+'_left');      
		t=d.getElementById(objid+'_top');
		r=d.getElementById(objid+'_right');
		b=d.getElementById(objid+'_bottom');

		if (isIE) {
			l.style.pixelWidth=x1+8;
			t.style.pixelHeight=y1+8;
			r.style.pixelWidth = pobj[objid][pwidth]-x2+8;
			b.style.pixelHeight = pobj[objid][pheight]-y2+8;
		} else {
			l.style.width=x1+8;
			t.style.height=y1+8;
			r.style.width = pobj[objid][pwidth]-x2+8;
			b.style.height = pobj[objid][pheight]-y2+8;
		}

		if (isOpera) {
			c=d.getElementById(objid+'_main');
			if (c) c.id=objid+'_main';
		}
	}
}

function MouseDown(side, objid) {
	CurrentSide = side;
	x0 = what[0];
	y0 = what[1];
}

function MouseUp(objid) {
	CurrentSide = null;
	x0=0;
	y0=0;
}


function getCropX1(objid) {
	l=d.getElementById(objid+'_left').style;
  
	if (isIE)
		x1 = l.pixelWidth - 8; 
	else 
		x1 = parseInt(l.width) - 8; 

	if(x1 < 0) x1 = 0;
	return x1;
}

function getCropY1(objid) {
	t=d.getElementById(objid+'_top').style;

	if (isIE)
		y1 = t.pixelHeight - 8; 
	else
		y1 = parseInt(t.height) - 8; 
    
	if(y1 < 0) y1 = 0;
	return y1;
}

function getCropX2(objid) {
	r=d.getElementById(objid+'_right').style;
	if (isIE)
		x2 = pobj[objid][pwidth]-(r.pixelWidth - 8); 
	else
		x2 = pobj[objid][pwidth]-(parseInt(r.width) - 8); 
  
	if(x2 > pobj[objid][pwidth]) x2 = pobj[objid][pwidth];
	return x2;
}

function getCropY2(objid) {
	b=d.getElementById(objid+'_bottom').style;

	if (isIE)
		y2 = pobj[objid][pheight]-(b.pixelHeight - 8); 
	else
		y2 = pobj[objid][pheight]-(parseInt(b.height) - 8); 
  
	if(y2 > pobj[objid][pheight]) y2 = pobj[objid][pheight];
	return y2;
}

function MouseMove(objid) {
	if((CurrentSide == null) || (what[2] != 1)) return;

	dx = what[0] - x0;
	dy = what[1] - y0;

	x0 = what[0]; y0 = what[1];
  
	if (debug_on) debug_out(CurrentSide+'['+dx+':'+dy+'] '+what[0]+' '+what[1]+' '+what[2]+'--'+mbutton);
  
	x1=getCropX1(objid);
	y1=getCropY1(objid);
	x2=getCropX2(objid);
	y2=getCropY2(objid);

	pchanged[gpid(objid)]=true;

	switch (CurrentSide) {
		case "top":
			setCrop(x1, y1+dy, x2, y2, 0, 1, objid);
			break;
		case "bottom":
			setCrop(x1, y1, x2, y2+dy, 0, 1, objid);
			break;
		case "left":
			setCrop(x1+dx, y1, x2, y2, 1, 0, objid);
			break;
		case "right":
			setCrop(x1, y1, x2+dx, y2, 1, 0, objid);
			break;
		case "center":
			setCrop(x1+dx, y1+dy, x2+dx, y2+dy, 0, 0, objid);
			break;
	}
}

Может кто подсказать, что именно не так? Обрезка (именно отображение и функционал обрезки) работает криво во всех современных браузерах. Может быть есть какие-то устаревшие элементы, которые я не вижу?
Спасибо за помощь.

Вот нашел ошибку, которую показывает хром

Uncaught ReferenceError: MouseMove is not defined onmousemove

.