var thumbWidth=100;
var thumbHeight=100;


function mouseXY(e) {
	var mousepos=mousePosition(e);

	var target=getTarget(e);
	var elempos=elementPosition(target);

	var x=mousepos[0]-elempos[0];
	var y=mousepos[1]-elempos[1];

	setThumbPosition(x-thumbWidth/2,y-thumbHeight/2,elempos[0],elempos[1],target);
}
function mousePosition(e) {
	var posX=0;
	var posY=0;
	if(!e)var e=window.event;
	if(e.pageX||e.pageY) {
		posX=e.pageX;
		posY=e.pageY;
	}
	else if(e.clientX||e.clientY) {
		posX=e.clientX+document.documentElement.scrollLeft;
		posY=e.clientY+document.documentElement.scrollTop;
	}
	return new Array(posX,posY);
}
function elementPosition(obj) {
	var curLeft=0;
	var curTop=0;
	var oObj=obj;
	if(obj.offsetParent) {
		while(obj.offsetParent) {
			curLeft += obj.offsetLeft
			curTop  += obj.offsetTop
			obj      = obj.offsetParent;
		}
	}
	return new Array(curLeft,curTop);
}
function getTarget(e) {
	var targ;
	if(!e)var e=window.event;
	if(e.target)target=e.target;
	else if (e.srcElement)target=e.srcElement;
	if(target.nodeType==3)target=target.parentNode;

	return target;
}
function setThumbPosition(x,y,elemX,elemY,target) {
	var id=target.id.substring(5);

	if((x+thumbWidth)>=target.width)x=target.width-thumbWidth-1;
	if((y+thumbHeight)>=target.height)y=target.height-thumbHeight-1;
	if(x<0)x=0;
	if(y<0)y=0;

	document.getElementById('thumbLeft'+id).value=x;
	document.getElementById('thumbTop'+id).value=y;
	document.getElementById('thumbRight'+id).value=x+thumbWidth;
	document.getElementById('thumbBottom'+id).value=y+thumbHeight;

	var cropBox=document.getElementById('cropBox'+id);

	cropBox.style.left='0px';
	cropBox.style.top='0px';

	var cropBoxPos=elementPosition(cropBox);

	var absoluteX=elemX-cropBoxPos[0]+x;
	var absoluteY=elemY-cropBoxPos[1]+y;


	cropBox.style.left=absoluteX+'px';
	cropBox.style.top=absoluteY+'px';
	cropBox.style.width=thumbWidth+'px';
	cropBox.style.height=thumbHeight+'px';
	cropBox.style.border="solid 1px rgb(128,255,128)";
}