changeset 38:930413351738

improvements in parsing points
author luginbue
date Sun, 24 Mar 2002 15:16:32 +0100
parents 168ac828de3e
children 075eab24154d
files client/digitallibrary/navigation_ie.js client/digitallibrary/navigation_n4.js client/digitallibrary/navigation_n6.js
diffstat 3 files changed, 146 insertions(+), 134 deletions(-) [+]
line wrap: on
line diff
--- a/client/digitallibrary/navigation_ie.js	Tue Feb 26 18:43:36 2002 +0100
+++ b/client/digitallibrary/navigation_ie.js	Sun Mar 24 15:16:32 2002 +0100
@@ -91,6 +91,22 @@
 }
 
 
+// constructor holding different values of a point
+function Point(event) {
+
+	this.pageX = parseInt(document.body.scrollLeft+event.x);
+	this.pageY = parseInt(document.body.scrollTop+event.y);
+	
+	this.x = this.pageX-parseInt(document.all.lay1.style.left);
+	this.y = this.pageY-parseInt(document.all.lay1.style.top);
+	
+	this.relX = cropFloat(att[5]+(att[7]*this.x/document.all.lay1.offsetWidth));
+	this.relY = cropFloat(att[6]+(att[8]*this.y/document.all.lay1.offsetHeight));
+
+	return this;
+}
+
+
 function backPage(keepArea) {
 
     att[1] = parseInt(att[1]) - 1;
@@ -157,7 +173,7 @@
 	}
 
     document.all.lay1.onmousedown = function() {
-		e = event;
+		var point = new Point(event);
 
         if ((att[4] != "") && (att[4] != "0/0")) {
             att[4] += ";";
@@ -165,10 +181,7 @@
             att[4] = "";
         }
 
-		markX = cropFloat(att[5]+att[7]*(document.body.scrollLeft+e.x-parseInt(document.all.lay1.style.left))/document.all.lay1.offsetWidth);
-		markY = cropFloat(att[6]+att[8]*(document.body.scrollTop+e.y-parseInt(document.all.lay1.style.top))/document.all.lay1.offsetHeight);
-
-        att[4] += markX + "/" + markY;
+        att[4] += point.relX + "/" + point.relY;
 
         document.all.lay1.cancleBubble = true;
         
@@ -179,27 +192,23 @@
 
 function zoomArea() {
     var state = 0;
-    var x1, y1, x2, y2;
+    var pt1, pt2;
         
     function click() {
-		e = event;
-
         if (state == 0) {
             state = 1;
             
-            x1 = document.body.scrollLeft+e.x;
-            y1 = document.body.scrollTop+e.y;           
-            x2 = x1;
-            y2 = y1;
+			pt1 = new Point(event);
+			pt2 = pt1;
 
-			document.all.eck1.style.left = x1;
-			document.all.eck1.style.top = y1;
-			document.all.eck2.style.left = x2-12;
-			document.all.eck2.style.top = y1;
-			document.all.eck3.style.left = x1;
-			document.all.eck3.style.top = y2-12;
-			document.all.eck4.style.left = x2-12;
-			document.all.eck4.style.top = y2-12;
+			document.all.eck1.style.left = pt1.pageX;
+			document.all.eck1.style.top = pt1.pageY;
+			document.all.eck2.style.left = pt2.pageX-12;
+			document.all.eck2.style.top = pt1.pageY;
+			document.all.eck3.style.left = pt1.pageX;
+			document.all.eck3.style.top = pt2.pageY-12;
+			document.all.eck4.style.left = pt2.pageX-12;
+			document.all.eck4.style.top = pt2.pageY-12;
 
 			document.all.eck1.style.visibility="visible";
 			document.all.eck2.style.visibility="visible";
@@ -210,12 +219,7 @@
             document.all.eck4.onmousemove = move;
             
         } else {
-
-			x1 -= parseInt(document.all.lay1.style.left);
-			y1 -= parseInt(document.all.lay1.style.top);			
-
-            x2 = document.body.scrollLeft+e.x-parseInt(document.all.lay1.style.left);
-            y2 = document.body.scrollTop+e.y-parseInt(document.all.lay1.style.left);         
+			pt2 = new Point(event);
 
             document.all.eck1.visibility="hidden";
             document.all.eck2.visibility="hidden";
@@ -225,11 +229,11 @@
 			document.all.lay1.cancleBubble = true;
 			document.all.eck4.cancleBubble = true;
 
-            att[5] = cropFloat(att[5]+att[7]*((x1 < x2) ? x1 : x2)/document.all.lay1.offsetWidth);
-            att[6] = cropFloat(att[6]+att[8]*((y1 < y2) ? y1 : y2)/document.all.lay1.offsetHeight);
+            att[5] = Math.min(pt1.relX, pt2.relX);
+            att[6] = Math.min(pt1.relY, pt2.relY);
 
-            att[7] = cropFloat(att[7]*Math.abs(x1-x2)/document.all.lay1.offsetWidth);
-            att[8] = cropFloat(att[8]*Math.abs(y1-y2)/document.all.lay1.offsetHeight);
+            att[7] = Math.abs(pt1.relX-pt2.relX);
+            att[8] = Math.abs(pt1.relY-pt2.relY);
                         
             if (att[7] != 0 && att[8] != 0) {
               loadPicture(2);
@@ -238,19 +242,16 @@
     }
 
     function move() {
-		e = event;
-
-        x2 = document.body.scrollLeft+e.x;
-        y2 = document.body.scrollTop+e.y;           
+		pt2 = new Point(event);
 
-		document.all.eck1.style.left = ((x1 < x2) ? x1 : x2);
-		document.all.eck1.style.top = ((y1 < y2) ? y1 : y2);
-		document.all.eck2.style.left = ((x1 < x2) ? x2 : x1)-12;
-		document.all.eck2.style.top = ((y1 < y2) ? y1 : y2);
-		document.all.eck3.style.left = ((x1 < x2) ? x1 : x2);
-		document.all.eck3.style.top = ((y1 < y2) ? y2 : y1)-12;
-		document.all.eck4.style.left = ((x1 < x2) ? x2 : x1)-12;
-		document.all.eck4.style.top = ((y1 < y2) ? y2 : y1)-12;
+		document.all.eck1.style.left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX);
+		document.all.eck1.style.top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY);
+		document.all.eck2.style.left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12;
+		document.all.eck2.style.top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY);
+		document.all.eck3.style.left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX);
+		document.all.eck3.style.top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12;
+		document.all.eck4.style.left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12;
+		document.all.eck4.style.top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12;
     }
 
     document.all.lay1.onmousedown = click;
@@ -261,10 +262,10 @@
 function zoomPoint() {
 
     document.all.lay1.onmousedown = function() {
-		e = event;
+		var point = new Point(event);
 
-		att[5] = cropFloat(att[5]+att[7]*(document.body.scrollLeft+e.x-parseInt(document.all.lay1.style.left))/document.all.lay1.offsetWidth-0.5*att[7]*0.7);
-		att[6] = cropFloat(att[6]+att[8]*(document.body.scrollTop+e.y-parseInt(document.all.lay1.style.top))/document.all.lay1.offsetHeight-0.5*att[8]*0.7);
+		att[5] = cropFloat(point.relX-0.5*att[7]*0.7);
+		att[6] = cropFloat(point.relY-0.5*att[8]*0.7);
 
 		att[7] = cropFloat(att[7]*0.7);
 		att[8] = cropFloat(att[8]*0.7);
@@ -297,10 +298,10 @@
 function moveTo() {
 
     document.all.lay1.onmousedown = function() {
-		e = event;
+		var point = new Point(event);
 
-		att[5] = cropFloat(att[5]+att[7]*(document.body.scrollLeft+e.x-parseInt(document.all.lay1.style.left))/document.all.lay1.offsetWidth-0.5*att[7]);
-		att[6] = cropFloat(att[6]+att[8]*(document.body.scrollTop+e.y-parseInt(document.all.lay1.style.top))/document.all.lay1.offsetHeight-0.5*att[8]);
+		att[5] = cropFloat(point.relX-0.5*att[7]);
+		att[6] = cropFloat(point.relY-0.5*att[8]);
 
 		if (att[5] < 0) {
 			att[5] = 0;
--- a/client/digitallibrary/navigation_n4.js	Tue Feb 26 18:43:36 2002 +0100
+++ b/client/digitallibrary/navigation_n4.js	Sun Mar 24 15:16:32 2002 +0100
@@ -1,6 +1,6 @@
 // this global variable has to be initialised before the frist use of the functions below
 // to fill in the attributes you can use the function init provided below
-// - array with all attributes
+// array with all attributes
 var att = new Array();
 
 // fill in the values of the "att"-array
@@ -53,8 +53,6 @@
 	window.captureEvents(Event.KEYDOWN);
 	window.onkeydown = parseKeypress;
 
-	focus();
-	
 	// give a name to the window containing digilib - this way one can test if there is already a
 	// digilib-window open and replace the contents of it (ex. digicat)
 	top.window.name = "digilib";
@@ -93,6 +91,22 @@
 }
 
 
+// constructor holding different values of a point
+function Point(event) {
+
+	this.pageX = parseInt(event.pageX);
+	this.pageY = parseInt(event.pageY);
+	
+	this.x = this.pageX-document.lay1.left;
+	this.y = this.pageY-document.lay1.top;
+	
+	this.relX = cropFloat(att[5]+(att[7]*this.x/document.lay1.clip.width));
+	this.relY = cropFloat(att[6]+(att[8]*this.y/document.lay1.clip.height));
+
+	return this;
+}
+
+
 function backPage(keepArea) {
 
     att[1] = parseInt(att[1]) - 1;
@@ -153,13 +167,9 @@
 
 function mark(refselect) {
 
-	if (att[4].split(";").length > 7) {
-		alert("Only 8 marks are possible at the moment!");
-		return;
-	}
-
     document.lay1.captureEvents(Event.MOUSEDOWN);
     document.lay1.onmousedown = function(event) {
+	    var point = new Point(event);
 
         if ((att[4] != "") && (att[4] != "0/0")) {
             att[4] += ";";
@@ -167,35 +177,30 @@
             att[4] = "";
         }
 
-		var markX = cropFloat(att[5]+(att[7]*event.x/document.lay1.clip.width));
-		var markY = cropFloat(att[6]+(att[8]*event.y/document.lay1.clip.height));
-		
-        att[4] += markX + "/" + markY;
+        att[4] += point.relX + "/" + point.relY;
 
         document.lay1.releaseEvents(Event.MOUSEDOWN);
         setMarks();
-    }
+	}
 }
 
 
 function zoomArea() {
     var state = 0;
-    var x1, y1, x2, y2;
+    var pt1, pt2;
         
     function click(event) {
 
         if (state == 0) {
             state = 1;
             
-            x1 = event.pageX;
-            y1 = event.pageY;           
-            x2 = x1;
-            y2 = y1;
+			pt1 = new Point(event);
+			pt2 = pt1;
 
-            document.eck1.moveTo(((x1 < x2) ? x1 : x2), ((y1 < y2) ? y1 : y2));
-            document.eck2.moveTo(((x1 < x2) ? x2 : x1)-12, ((y1 < y2) ? y1 : y2));
-            document.eck3.moveTo(((x1 < x2) ? x1 : x2), ((y1 < y2) ? y2 : y1)-12);
-            document.eck4.moveTo(((x1 < x2) ? x2 : x1)-12, ((y1 < y2) ? y2 : y1)-12);
+            document.eck1.moveTo(pt1.pageX, pt1.pageY);
+            document.eck2.moveTo(pt2.pageX-12, pt1.pageY);
+            document.eck3.moveTo(pt1.pageX, pt2.pageY-12);
+            document.eck4.moveTo(pt2.pageX-12, pt2.pageY-12);
 
             document.eck1.visibility="show";
             document.eck2.visibility="show";
@@ -210,11 +215,7 @@
             
         } else {
 
-            x1 -= document.lay1.x;
-            y1 -= document.lay1.y;            
-
-            x2 = event.pageX-document.lay1.x;
-            y2 = event.pageY-document.lay1.y;         
+			pt2 = new Point(event);
 
             document.lay1.releaseEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
             document.eck4.releaseEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
@@ -224,11 +225,11 @@
             document.eck3.visibility="hide";
             document.eck4.visibility="hide";
 
-            att[5] = cropFloat(att[5]+att[7]*((x1 < x2) ? x1 : x2)/document.lay1.clip.width);
-            att[6] = cropFloat(att[6]+att[8]*((y1 < y2) ? y1 : y2)/document.lay1.clip.height);
+			att[5] = Math.min(pt1.relX, pt2.relX);
+			att[6] = Math.min(pt1.relY, pt2.relY);
 
-            att[7] = cropFloat(att[7]*Math.abs(x1-x2)/document.lay1.clip.width);
-            att[8] = cropFloat(att[8]*Math.abs(y1-y2)/document.lay1.clip.height);
+            att[7] = Math.abs(pt1.relX-pt2.relX);
+            att[8] = Math.abs(pt1.relY-pt2.relY);
                         
             if (att[7] != 0 && att[8] != 0) {
               loadPicture(2);
@@ -238,13 +239,12 @@
 
     function move(event) {
 
-        x2 = event.pageX;
-        y2 = event.pageY;           
+		pt2 = new Point(event);           
 
-        document.eck1.moveTo(((x1 < x2) ? x1 : x2), ((y1 < y2) ? y1 : y2));
-        document.eck2.moveTo(((x1 < x2) ? x2 : x1)-12, ((y1 < y2) ? y1 : y2));
-        document.eck3.moveTo(((x1 < x2) ? x1 : x2), ((y1 < y2) ? y2 : y1)-12);
-        document.eck4.moveTo(((x1 < x2) ? x2 : x1)-12, ((y1 < y2) ? y2 : y1)-12);
+            document.eck1.moveTo(((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX), ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY));
+            document.eck2.moveTo(((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12, ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY));
+            document.eck3.moveTo(((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX), ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12);
+            document.eck4.moveTo(((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12, ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12);
     }
 
     document.lay1.captureEvents(Event.MOUSEDOWN);
@@ -259,9 +259,10 @@
 
     document.lay1.captureEvents(Event.MOUSEDOWN);
     document.lay1.onmousedown = function(event) {
-
-		att[5] = cropFloat(att[5]+(att[7]*event.x/document.lay1.clip.width-0.5*att[7]*0.7));
-		att[6] = cropFloat(att[6]+(att[8]*event.y/document.lay1.clip.height-0.5*att[8]*0.7));
+		var point = new Point(event);
+		
+		att[5] = cropFloat(point.relX-0.5*att[7]*0.7);
+		att[6] = cropFloat(point.relY-0.5*att[8]*0.7);
 
         att[7] = cropFloat(att[7]*0.7);
         att[8] = cropFloat(att[8]*0.7);
@@ -295,9 +296,10 @@
 
     document.lay1.captureEvents(Event.MOUSEDOWN);
     document.lay1.onmousedown = function(event) {
+		var point = new Point(event);
 
-		att[5] = cropFloat(att[5]+(att[7]*event.x/document.lay1.clip.width-0.5*att[7]));
-		att[6] = cropFloat(att[6]+(att[8]*event.y/document.lay1.clip.height-0.5*att[8]));
+		att[5] = cropFloat(point.relX-0.5*att[7]);
+		att[6] = cropFloat(point.relY-0.5*att[8]);
 
 		if (att[5] < 0) {
 			att[5] = 0;
@@ -359,10 +361,10 @@
 function parseKeypress(event) {
 	var whichCode = (window.Event) ? event.which : event.keyCode;
 	if (String.fromCharCode(whichCode) == "n") {
-		Nextpage();
+		nextPage();
 	}
 	if (String.fromCharCode(whichCode) == "b") {
-		Backpage();
+		backPage();
 	}
 }
 
--- a/client/digitallibrary/navigation_n6.js	Tue Feb 26 18:43:36 2002 +0100
+++ b/client/digitallibrary/navigation_n6.js	Sun Mar 24 15:16:32 2002 +0100
@@ -91,6 +91,22 @@
 }
 
 
+// constructor holding different values of a point
+function Point(event) {
+
+	this.pageX = parseInt(event.pageX);
+	this.pageY = parseInt(event.pageY);
+	
+	this.x = this.pageX-parseInt(document.getElementById("lay1").style.left);
+	this.y = this.pageY-parseInt(document.getElementById("lay1").style.top);
+	
+	this.relX = cropFloat(att[5]+(att[7]*this.x/document.pic.offsetWidth));
+	this.relY = cropFloat(att[6]+(att[8]*this.y/document.pic.offsetHeight));
+
+	return this;
+}
+
+
 function backPage(keepArea) {
 
     att[1] = parseInt(att[1]) - 1;
@@ -157,17 +173,14 @@
 	}
 
 	function markEvent(event) {
+	    var point = new Point(event);
 
 		if ((att[4] != "") && (att[4] != "0/0")) {
 			att[4] += ";";
 		} else {
 			att[4] = "";
 		}
-
-		var markX = cropFloat(att[5]+att[7]*(event.pageX-parseInt(document.getElementById("lay1").style.left))/document.pic.offsetWidth);
-		var markY = cropFloat(att[6]+att[8]*(event.pageY-parseInt(document.getElementById("lay1").style.top))/document.pic.offsetHeight);
-
-		att[4] += markX + "/" + markY;
+		att[4] += point.relX + "/" + point.relY;
 
 		document.getElementById("lay1").removeEventListener("mousedown", markEvent, true);		
 		setMarks();
@@ -179,26 +192,24 @@
 
 function zoomArea() {
 	var state = 0;
-	var x1, y1, x2, y2;
+	var pt1, pt2;
 
 	function click(event) {
 
 		if (state == 0) {
 			state = 1;
 			
-			x1 = event.pageX;
-			y1 = event.pageY;			
-			x2 = x1;
-			y2 = y1;
+			pt1 = new Point(event);
+			pt2 = pt1;
 			
-			document.getElementById("eck1").style.left = x1;
-			document.getElementById("eck1").style.top = y1;
-			document.getElementById("eck2").style.left = x2-12;
-			document.getElementById("eck2").style.top = y1;
-			document.getElementById("eck3").style.left = x1;
-			document.getElementById("eck3").style.top = y2-12;
-			document.getElementById("eck4").style.left = x2-12;
-			document.getElementById("eck4").style.top = y2-12;
+			document.getElementById("eck1").style.left = pt1.pageX;
+			document.getElementById("eck1").style.top = pt1.pageY;
+			document.getElementById("eck2").style.left = pt2.pageX-12;
+			document.getElementById("eck2").style.top = pt1.pageY;
+			document.getElementById("eck3").style.left = pt1.pageX;
+			document.getElementById("eck3").style.top = pt2.pageY-12;
+			document.getElementById("eck4").style.left = pt2.pageX-12;
+			document.getElementById("eck4").style.top = pt2.pageY-12;
 
 			document.getElementById("eck1").style.visibility="visible";
 			document.getElementById("eck2").style.visibility="visible";
@@ -210,12 +221,8 @@
 
 		} else {
 
-			x1 -= parseInt(document.getElementById("lay1").style.left);
-			y1 -= parseInt(document.getElementById("lay1").style.top);			
-
-			x2 = event.pageX-parseInt(document.getElementById("lay1").style.left);
-			y2 = event.pageY-parseInt(document.getElementById("lay1").style.top);			
-
+			pt2 = new Point(event);
+			
 			document.getElementById("lay1").removeEventListener("mousedown", click, true);		
 			document.getElementById("eck4").removeEventListener("mousedown", click, true);		
 			
@@ -227,11 +234,11 @@
 			document.getElementById("eck3").style.visibility="hidden";
 			document.getElementById("eck4").style.visibility="hidden";
 
-			att[5] = cropFloat(att[5]+att[7]*((x1 < x2) ? x1 : x2)/document.pic.offsetWidth);
-			att[6] = cropFloat(att[6]+att[8]*((y1 < y2) ? y1 : y2)/document.pic.offsetHeight);
+			att[5] = Math.min(pt1.relX, pt2.relX);
+			att[6] = Math.min(pt1.relY, pt2.relY);
 
-			att[7] = cropFloat(att[7]*Math.abs(x1-x2)/document.pic.offsetWidth);
-			att[8] = cropFloat(att[8]*Math.abs(y1-y2)/document.pic.offsetHeight);
+			att[7] = Math.abs(pt1.relX-pt2.relX);
+			att[8] = Math.abs(pt1.relY-pt2.relY);
 
 			if (att[7] != 0 && att[8] != 0) {
 				loadPicture(2);
@@ -241,17 +248,16 @@
 
 	function move(event) {
 
-		x2 = event.pageX;
-		y2 = event.pageY;
+		pt2 = new Point(event);
 
-		document.getElementById("eck1").style.left = ((x1 < x2) ? x1 : x2);
-		document.getElementById("eck1").style.top = ((y1 < y2) ? y1 : y2);
-		document.getElementById("eck2").style.left = ((x1 < x2) ? x2 : x1)-12;
-		document.getElementById("eck2").style.top = ((y1 < y2) ? y1 : y2);
-		document.getElementById("eck3").style.left = ((x1 < x2) ? x1 : x2);
-		document.getElementById("eck3").style.top = ((y1 < y2) ? y2 : y1)-12;
-		document.getElementById("eck4").style.left = ((x1 < x2) ? x2 : x1)-12;
-		document.getElementById("eck4").style.top = ((y1 < y2) ? y2 : y1)-12;
+		document.getElementById("eck1").style.left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX);
+		document.getElementById("eck1").style.top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY);
+		document.getElementById("eck2").style.left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12;
+		document.getElementById("eck2").style.top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY);
+		document.getElementById("eck3").style.left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX);
+		document.getElementById("eck3").style.top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12;
+		document.getElementById("eck4").style.left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12;
+		document.getElementById("eck4").style.top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12;
 	}
 
 	document.getElementById("lay1").addEventListener("mousedown", click, true);		
@@ -262,9 +268,10 @@
 function zoomPoint() {
 
 	function zoomPointEvent(event) {
+	    var point = new Point(event);
 
-		att[5] = cropFloat(att[5]+att[7]*(event.pageX-parseInt(document.getElementById("lay1").style.left))/document.pic.offsetWidth-0.5*att[7]*0.7);
-		att[6] = cropFloat(att[6]+att[8]*(event.pageY-parseInt(document.getElementById("lay1").style.top))/document.pic.offsetHeight-0.5*att[8]*0.7);
+		att[5] = cropFloat(point.relX-0.5*att[7]*0.7);
+		att[6] = cropFloat(point.relY-0.5*att[8]*0.7);
 
 		att[7] = cropFloat(att[7]*0.7);
 		att[8] = cropFloat(att[8]*0.7);
@@ -301,8 +308,10 @@
 
 	function moveToEvent(event) {
 
-		att[5] = cropFloat(att[5]+att[7]*(event.pageX-parseInt(document.getElementById("lay1").style.left))/document.pic.offsetWidth-0.5*att[7]);
-		att[6] = cropFloat(att[6]+att[8]*(event.pageY-parseInt(document.getElementById("lay1").style.top))/document.pic.offsetHeight-0.5*att[8]);
+	    var point = new Point(event);
+
+		att[5] = cropFloat(point.relX-0.5*att[7]);
+		att[6] = cropFloat(point.relY-0.5*att[8]);
 
 		if (att[5] < 0) {
 			att[5] = 0;