// the element with image we are inspecting
var theImage=null;
// the zooming rectangle as we drag it on the image
var theZoomer=null;
//zoomfactor 1=pixelwise
var zoomFactor=1;
// real dimensions of the image
var imageWidth=0;
var imageHeight=0;
// the position of the zoomer and
// a possible signal to clear before we draw
function drawZoomedPart(offLeft,offTop,clear){
// simply ignore uppdate if we are out of the image
if( (offTop+parseInt(theZoomer.style.height) > theImage.height) || (offTop < 0)
||(offLeft+parseInt(theZoomer.style.width) > theImage.width) || (offLeft < 0))
return false;
// calculate the offset we want to use in the canvas
var imOffLeft=offLeft/theImage.width;
var imOffTop=offTop/theImage.height;
var realOffsetLeft=Math.round(imageWidth*imOffLeft);
var realOffsetTop=Math.round(imageHeight*imOffTop);
var canvas = document.getElementById("can1");
if (canvas.getContext)
{
var dc = canvas.getContext('2d');
dc.fillStyle = "rgb(255,255,255)"
if(clear)
dc.fillRect (0, 0, 400, 400);
var img = new Image();
img.onload = function()
{
imageWidth=img.width;
imageHeight=img.height;
dc.drawImage(img,
-realOffsetLeft*zoomFactor, -realOffsetTop*zoomFactor,
imageWidth*zoomFactor, imageHeight*zoomFactor)
}
img.src = theImage.src;;
}
else
{
// canvas-unsupported
alert('cannot do canvas');
}
return true;
}
// as from:
// http://www.quirksmode.org/js/findpos.html
function findPos(obj){
var curleft = curtop = 0;
if (obj && obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}
}
// called from the dragging process when we drag or drop
function zoom(obj,clear){
var Ipos=findPos(theImage);
var Cpos=findPos(obj);
var offLeft=Cpos[0]-Ipos[0];
var offTop=Cpos[1]-Ipos[1];
return drawZoomedPart(offLeft,offTop,clear);
}
// when we load the page or change the image
function init(){
initDND();
theImage=document.getElementById("theImage");
imageWidth=theImage.naturalWidth;
imageHeight=theImage.naturalHeight;
var Ipos=findPos(theImage);
theZoomer=document.getElementById("zoomer");
theZoomer.style.left=""+Ipos[0]+"px";
theZoomer.style.top=""+Ipos[1]+"px";
// adjust zoomer to cover what we actually get in real size canvas
theZoomer.style.width=
""+Math.min(Math.round((1.0/zoomFactor)*400*theImage.width/imageWidth),theImage.width-2)+"px";
theZoomer.style.height=
""+Math.min(Math.round((1.0/zoomFactor)*400*theImage.height/imageHeight),theImage.height-2)+"px";
drawZoomedPart(0,0);
}
function loadError(){
theImage.src="error.png";
}
function setImageURL(form){
theImage.src=form.urlimage.value;
theImage.alt="failed to load: "+form.urlimage.value;
zoomFactor=form.level.value;
init();
}
function selectImageURL(form){
theImage.src=form.images.value;
theImage.alt="failed to load: "+form.images.value;
zoomFactor=form.level.value;
init();
}
function selectZoomLevel(form){
zoomFactor=form.level.value;
init();
}
// for debugging purposes
function dump(T){document.getElementById("dump").innerHTML=T;}
function addDump(S){dump(document.getElementById("dump").innerHTML+"\n"+S);}
