var lat,lat1,lat2, lon,lon1,lon2;
var ms, lx1,lx2, ly1,ly2, md;
var nc, llx,lly, msz, hms;
var kon=0;
var canvas, ct;
/***************************************************************************/
/*  kon = 0 : no end selected yet                                          */
/*      = 1 : selecting, dragging end point                                */
/*      = 2 : both ends already selected                                   */
/***************************************************************************/
function init() {
  canvas = document.getElementById("map");
  ct = canvas.getContext("2d");
  canvas.addEventListener('mousedown', onMouseDown, false);
  canvas.addEventListener('mousemove', onMouseMove, false);
  canvas.addEventListener('mouseup', onMouseUp, false);
  nc  = parseInt(document.btsetsp.Ncc.value);
  llx = parseInt(document.btsetsp.Sllx.value);
  lly = parseInt(document.btsetsp.Slly.value);
  msz = parseInt(document.btsetsp.Smsz.value);
  hms = msz / 2;
  kon = 0; showsec(kon);
}
function showsec(key) {
  ct.clearRect(0, 0, 651, 441);
  if (kon > 0) {
    ct.beginPath(); ct.moveTo(lon1+20, 420-lat1);
    ct.lineTo(lon2+20, 420-lat2);
    ct.lineWidth = 2; ct.strokeStyle="#0000ff"; ct.stroke();
    ct.beginPath(); ct.moveTo(lon1+16, 420-lat1);
    ct.lineTo(lon1+24, 420-lat1);
    ct.lineWidth = 2; ct.strokeStyle="#0000ff"; ct.stroke();
    ct.beginPath(); ct.moveTo(lon1+20, 416-lat1);
    ct.lineTo(lon1+20, 424-lat1);
    ct.lineWidth = 2; ct.strokeStyle="#0000ff"; ct.stroke();
    ct.beginPath(); ct.moveTo(lon2+17, 417-lat2);
    ct.lineTo(lon2+17, 423-lat2);
    ct.lineTo(lon2+23, 423-lat2);
    ct.lineTo(lon2+23, 417-lat2);
    ct.lineTo(lon2+17, 417-lat2);
    ct.lineWidth = 2; ct.strokeStyle="#0000ff"; ct.stroke();
  }
  ct.font = "10pt Arial"; ct.textAlign = "right";
  if (key == 0) {
    lx1 = 0; ly1 = 0; lx2 = 0; ly2 = 0;
  } else {
    lx1 = lat1*msz + llx; ly1 = lon1*msz + lly;
    lx2 = lat2*msz + llx; ly2 = lon2*msz + lly;
    ct.fillText(fkm(lx1), 498, 281);
    ct.fillText(fkm(lx2), 558, 221);
    ct.fillText(fkm(ly1), 568, 326);
    ct.fillText(fkm(ly2), 628, 266);
  }
  ct.fillText(String(msz), 543, 99);
  ct.fillText(String(nc), 628, 135);
  kon = key;
}
function onMouseDown(e) {
  mpx = e.clientX - canvas.offsetLeft; lon = mpx-20;
  mpy = e.clientY - canvas.offsetTop;  lat = 420-mpy;
  if (mpx < 441) {
    if ((mpx>19) && (mpx<421) && (mpy>19) && (mpy<421)) {
      if (kon == 0) {
        lon1 = lon; lat1 = lat; lon2 = lon; lat2 = lat; showsec(1);
      } else if (kon == 1) {
        lon2 = lon; lat2 = lat; showsec(1);
      } else if (kon == 2) {
        if ((lon<(lon2-2)) || (lon>(lon2+2))
             || (lat<(lat2-2)) || (lat>(lat2+2))) {
          if ((lon<(lon1-2)) || (lon>(lon1+2))
               || (lat<(lat1-2)) || (lat>(lat1+2))) {
            lon1 = lon; lat1 = lat; lon2 = lon; lat2 = lat; showsec(1);
          } else {
            lon1 = lon2; lat1 = lat2; lon2 = lon; lat2 = lat; showsec(1);
          }
        } else {
          lon2 = lon; lat2 = lat; showsec(1);
        }
      }
    }
  } else {
    if (kon == 2) {
      if ((mpx>518) && (mpx<529) && (mpy>294) && (mpy<305)) {
        lon1--; showsec(2);
      } else if ((mpx>540) && (mpx<551) && (mpy>294) && (mpy<305)) {
        lon1++; showsec(2);
      } else if ((mpx>504) && (mpx<515) && (mpy>280) && (mpy<291)) {
        lat1--; showsec(2);
      } else if ((mpx>504) && (mpx<515) && (mpy>258) && (mpy<269)) {
        lat1++; showsec(2);
      } else if ((mpx>578) && (mpx<589) && (mpy>234) && (mpy<245)) {
        lon2--; showsec(2);
      } else if ((mpx>600) && (mpx<611) && (mpy>234) && (mpy<245)) {
        lon2++; showsec(2);
      } else if ((mpx>564) && (mpx<575) && (mpy>220) && (mpy<231)) {
        lat2--; showsec(2);
      } else if ((mpx>564) && (mpx<575) && (mpy>198) && (mpy<209)) {
        lat2++; showsec(2);
      }
    }
    if ((mpx>460) && (mpx<554) && (mpy>370) && (mpy<399)) {
      lon = lon1; lon1 = lon2; lon2 = lon;
      lat = lat1; lat1 = lat2; lat2 = lat;
      showsec(kon);
    }
    if ((mpx>440) && (mpx<499) && (mpy>120) && (mpy<144))
      { kon=0; showsec(0); }
    if ((mpx>550) && (mpx<629) && (mpy>20) && (mpy<49))
      { showsec(kon); }
  }
}
function onMouseUp(e) {
  if (kon == 1) { showsec(2); }
}
function onMouseMove(e) {
  if (kon == 1) {
    mpx = e.clientX - canvas.offsetLeft; lon = mpx-20;
    mpy = e.clientY - canvas.offsetTop;  lat = 420-mpy;
    if (lon<0) lon = 0; else if (lon>400) lon = 400;
    if (lat<0) lat = 0; else if (lat>400) lat = 400;
    if (kon == 1) { lon2 = lon; lat2 = lat; }
    showsec(kon);
  }
}
function fkm(lm) { return(String(parseInt(lm)/1000.)); }
function getX1() { return(fkm(lx1)); }
function getY1() { return(fkm(ly1)); }
function getX2() { return(fkm(lx2)); }
function getY2() { return(fkm(ly2)); }