Zoom

/*
Modified from: http://elouai.com/javascript-drag-and-drop.php
*/
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var tx=0;
var ty=0;
var draggedObj;
function dragMouse(e)
{
  var evt = e || window.event;      
  if (isdrag)
  {  
    var oldL=draggedObj.style.left;//bs
    var oldT=draggedObj.style.top; //bs
    draggedObj.style.left =''+(tx + evt.clientX - x)+'px';
    draggedObj.style.top  =''+(ty + evt.clientY - y)+'px';    
    //---bs
    if (!zoom(draggedObj))
    {
        // reset if we cannot use the position
        draggedObj.style.left =oldL;
        draggedObj.style.top  =oldT;    
    
    }
    //---------
    return false;
  }
}
function selectmouse(e)
{
   var evt = e || window.event;     
  var fobj       = evt.target;
  var topelement = "HTML";
  while (fobj.tagName != topelement && fobj.className != "dragme")
    fobj = fobj.parentElement;
  if (fobj.className=="dragme")
  {
    isdrag = true;
    draggedObj = fobj;
    tx=0;
    ty=0;
    
    if(draggedObj.style.left)
        tx = parseInt(draggedObj.style.left);
    if(draggedObj.style.top)
        ty = parseInt(draggedObj.style.top);
    
    x = evt.clientX;
    y = evt.clientY;         
    document.onmousemove=dragMouse;
    return false;
  }
}
function drop()
{
    if(isdrag)//bs
    {
        isdrag=false;
        // -------bs    
        zoom(draggedObj,true);
        //--------------
    }
    draggedObj=null;
    
}
function initDND()
{
    document.onmousedown=selectmouse;
    document.onmouseup=drop;
}

// 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);}