function kmShowBox(km,x1,y1,x2,y2) {
   if (((x2-x1)<6) && ((y2-y1)<6)) {
    with (km.imageTop.style) {
     top = y1-1; 
     left = x1-1; 
     width = 6;
     height = 6;
     visibility = ((x1<1) || (y1<1) || (x2>km.mapwidth-2) || (y2>km.mapheight-2))?'hidden':'visible';
    }
    with (km) {
     imageBot.style.visibility = 'hidden';
     imageLft.style.visibility = 'hidden';
     imageRgt.style.visibility = 'hidden';
    }
   } else {

    with (km) {
     imageTop.style.visibility=y1<0?'hidden':'visible';
     imageBot.style.visibility=y2>mapheight?'hidden':'visible';
     imageLft.style.visibility=x1<0?'hidden':'visible';
     imageRgt.style.visibility=x2>mapwidth?'hidden':'visible';
    }
    if (x1<0) x1=0;
    if (x2>km.mapwidth) x2=km.mapwidth;
    if (y1<0) y1=0;
    if (y2>km.mapheight) y2=km.mapheight-km.borderSize;

    with (km.imageTop.style) {
     top = y1; 
     left = x1; 
     width = x2-x1;
     height = km.borderSize;
    }
    with (km.imageBot.style) {
     top = y2; 
     left = x1;
     width = km.imageTop.style.width; 
     height = km.borderSize;
    }
    with (km.imageRgt.style) {
     top = y1; 
     left = x2;
     width = km.borderSize;
     height = y2-y1+km.borderSize;
    }
    with (km.imageLft.style) {
     top = y1; 
     left = x1; 
     width = km.borderSize;
     height = km.imageRgt.style.height; 
    }
    with (km) {
//     imageTop.style.visibility='visible';
//     imageBot.style.visibility='visible';
//     imageRgt.style.visibility='visible';
//     imageLft.style.visibility='visible';
    }
   }
  }

  function kmCreateBBoxPart(_id,ref,mapdiv,color) {
   var img = document.createElement('img');
   with(img) {
    id = _id;
    className = 'kmbbox';
    width = 1; //km.borderSize;
    height = 1; //km.borderSize;
    style.position = 'absolute';
    style.top = 0;
    style.left = 0;
    style.backgroundColor = color;
    src = ref;
    onclick = imgOnclick;
   }
   mapdiv.appendChild(img);
   return img;
  }
 
  function kmCreateKeyMapImage(mapdiv,ref) {
   var img = document.createElement('img');
   mapdiv.appendChild(img);
   with (img) {
    src = ref;
    style.position = 'absolute';
    style.top = 0;
    style.left = 0;
   }
   return img;
  }
  
  function imgOnclick() {
   event.cancelBubble = true;
  }

  function kmDraw(x1,y1,x2,y2) {
   with (this.boundingbox) {
    xmin = x1;
    ymin = y1;
    xmax = x2;
    ymax = y2;
   }
   this.boxheight = y2-y1;
   this.boxwidth = x2-x1;
   var a1 = this.WorldToScreen(x1,y1);
   var a2 = this.WorldToScreen(x2,y2);
   kmShowBox(this,a1[0],a2[1],a2[0],a1[1]);
  }

  function kmScreenToWorld(sx,sy) {
   var w = new Array();
   w[0] = Math.round(this.xmin + sx * (this.xmax - this.xmin)/this.mapwidth);
   w[1] = Math.round(this.ymin + (this.mapheight - sy) * (this.ymax - this.ymin)/this.mapheight);
   return w;
  }

  function kmWorldToScreen(wx,wy) {
   var s = new Array();
   s[0] = Math.round((wx - this.xmin) / ((this.xmax - this.xmin)/this.mapwidth));
   s[1] = Math.round((this.ymax - wy) / ((this.ymax - this.ymin)/this.mapheight));
   return s;
  }

function isNav() {
 return (navigator.appName == "Netscape")
}


  function kmClick(evt) {
   evt = (evt)?evt:(window.event)?window.event:"";
   var sender = eval((isNav())?evt.target.parentNode.id:evt.srcElement.parentNode.id);
   var a = isNav()?sender.ScreenToWorld(evt.pageX-evt.target.parentNode.offsetLeft-document.body.offsetLeft,evt.pageY-evt.target.parentNode.offsetTop-document.body.offsetTop):sender.ScreenToWorld(evt.offsetX,evt.offsetY);
   sender.Draw(a[0]-(sender.boxwidth/2),a[1]-(sender.boxheight/2),a[0]+(sender.boxwidth/2),a[1]+(sender.boxheight/2));
   if (sender.OnClick!=null) {
    sender.OnClick(sender);
   }
  }

  function kmBoundingBox(x1,y1,x2,y2) {
   with (this) {
    xmin = x1;
    ymin = y1;
    xmax = x2;
    ymax = y2;
   }
  }

  function keyMap(kmDiv,imgsrc,width,height,xmin,ymin,xmax,ymax,color,bordersize) {
   this.map = kmCreateKeyMapImage(kmDiv,imgsrc);
   this.mapheight = parseInt(height);
   this.mapwidth = parseInt(width);
   this.xmin = xmin;
   this.ymin = ymin;
   this.xmax = xmax;
   this.ymax = ymax;
   this.borderSize = bordersize;
   this.boxwidth = 0;
   this.boxheight = 0;
   this.boundingbox = new kmBoundingBox(0,0,0,0);

   this.Draw = kmDraw;
   this.ScreenToWorld = kmScreenToWorld;
   this.WorldToScreen = kmWorldToScreen;

   kmDiv.onclick = kmClick;

   var ref = 'images/pixel.gif';
   this.imageTop = kmCreateBBoxPart('imageTop',ref,kmDiv,color);
   this.imageBot = kmCreateBBoxPart('imageBot',ref,kmDiv,color);
   this.imageRgt = kmCreateBBoxPart('imageRgt',ref,kmDiv,color);
   this.imageLft = kmCreateBBoxPart('imageLft',ref,kmDiv,color);

   this.OnClick = null;
  }