// Panning control for the moving the small red rectangle
// and controlling the panning of the bigger frame.
// Needs MouseNavigation class.

var MouseNav = new MouseNavigation ();

MouseNav.mouseDown = function (self, e)
{
	return function (e)
	{
	var markerImage = document.getElementById ("markerID");
	var fieldImage = document.getElementById ("fieldJpeg");

	var xy = getAbsLeftTop (fieldImage);
	self.fposx = xy[0];
	self.fposy = xy[1];

	xy = getAbsLeftTop (markerImage);
	var posx = xy[0];
	var posy = xy[1];

	var w = markerImage.offsetWidth;
	var h = markerImage.offsetHeight;
	self.getMouseXY (self, e);
	var x = self.MouseX;
	var y = self.MouseY;
	//window.status = "x " + x + " " + y +
		//" p " + posx + " " + posy + 
		//" w " + w + " " + h;
	if ((posx < x) && (x < posx + w) &&
		(posy < y) && (y < posy + h))
	{
		self.AnchorX = x;
		self.AnchorY = y;
		self.doc.onmousemove = self.mouseDragx (self);
		self.Cursor.cursor = 'move';
	}
	return false;
}} // mouseDown

MouseNav.mouseDragx = function (self)
{
	return function (e) 
	{
	var markerImage = document.getElementById ("markerID");
	//var frm = document.getElementById ("imgFrame");
	var frm = frames["imgFrame"];

	self.getMouseXY (self, e);
	var x = self.MouseX;
	var y = self.MouseY;

	var xy = getAbsLeftTop (markerImage);
	var posx = xy[0];
	var posy = xy[1];
	
	var nposx = posx + x - self.AnchorX;
	var nposy = posy + y - self.AnchorY;
	var tileOffx = (nposx - self.fposx) / 150.0 * frm.ImageWidth;
	var tileOffy = (nposy - self.fposy) / 150.0 * frm.ImageHeight;

	if (tileOffx < 0) tileOffx = 0;
	else if (tileOffx > frm.XLimit) tileOffx = frm.XLimit;
	if (tileOffy < 0) tileOffy = 0;
	else if (tileOffy > frm.YLimit) tileOffy = frm.YLimit;

	frm.OffsetX = tileOffx;
	frm.OffsetY = tileOffy;
	frm.setTilesPosition (tileOffx, tileOffy);
	frm.setMarker (tileOffx, tileOffy);

	self.AnchorX = x;
	self.AnchorY = y;
	return false;
}} // mouseDrag

MouseNav.initEvent (document);