//  Min and max y are turned around so the coordinate system starts at the bottom not the top
var xminSave = 0, yminSave = 0, xmaxSave = 600, ymaxSave = 600;
var xmin = 0, ymin = 0, xmax = 600, ymax = 600;

function setLimits(){
  var draw = document.getElementById("limit");
  if (!draw) return;
  xminSave = xmin = parseFloat(draw.getAttribute("xmin"));
  xmaxSave = xmax = parseFloat(draw.getAttribute("xmax"));
  yminSave = ymin = parseFloat(draw.getAttribute("ymin"));
  ymaxSave = ymax = parseFloat(draw.getAttribute("ymax"));
}

function selectMode(selector){
  if (selector.value == "normal")
    normal();
}

function normal(){
  xmin = xminSave;
  ymin = yminSave;
  xmax = xmaxSave;
  ymax = ymaxSave;
  document.getElementById("state").selectedIndex = 1;
  draw();
}

function projx(val){
  return val * 600 / (xmax - xmin);
}

function mapx(val){
  return projx(val - xmin);
}

function worldX(x){
  return x * (xmax - xmin) / 600 + xmin;
}

function projy(val){
  return val * 600 / (ymax - ymin);
}

function mapy(val){
  return projy(ymax - val);
}

function worldY(y){
  y = parseFloat(y);
  return ymax - y * (ymax - ymin) / 600;
}

function selectType(s){
  var selectType = s.value;
  if (selectType == "Canvas")
    document.getElementById("graphic").innerHTML = 
      "<canvas id=canvas width=600 height=600 onclick='click(event.clientX, event.clientY)'>" + 
      "   Javascript must be enabled." +
      "</canvas>";
  draw();
}

function drawText(){
  var data = document.getElementsByTagName("span");
  var place;
  for (place = 0; place < data.length; place++)
    if (data[place].id == "data")
      textElement(data[place]);
}

function draw(){
  document.getElementById("words").innerHTML = "";
  var canvas = document.getElementById("canvas");
  var selectType = document.getElementById("Select").value;
  if (!selectType) return;
  if (!canvas || !canvas.getContext || (selectType == "Server")){
    document.getElementById("DisplayType").innerHTML = "From Server";
    document.getElementById("graphic").innerHTML = 
        "<img id=canvas src='/cgi-bin/image/" + xmin + "/" + ymin + "/" + xmax + "/" + ymax + "' width=600 height=600" +
          " onclick='click(event.clientX, event.clientY)' onload='drawText()'>";
    }
  else {
    document.getElementById("DisplayType").innerHTML = "From Canvas";
    var context = canvas.getContext("2d");
    var backgroundType = document.getElementById("background");
    if (!backgroundType)return;
    context.fillStyle = context.createPattern(backgroundType, "repeat");
    context.fillRect(0,0,600,600);
    var data = document.getElementsByTagName("span");
    var place;
    for (place = 0; place < data.length; place++)
      if (data[place].id == "data")
        drawElement(context, data[place]);
    drawText();
    }
}

function drawElement(context, data){
  context.save();
  switch (data.getAttribute("type")){
    case "circle": drawCircle(context, data); break;
    case "point": drawPoint(context, data); break;
    }
  context.restore();
}

function textElement(data){
  switch (data.getAttribute("type")){
    case "circle": textCircle(data); break;
    case "point": textPoint(data); break;
    }
}

var no = 0;

function drawLabel(context, data, x, y){
  if ((x < 0) || (x > 600) || (y < 0) || (y > 600)) return;
  var name = data.getAttribute("name");
  if (!name) return;
  var parent;
  var offx = 0, offy = 0;
  for (parent = document.getElementById("canvas"); parent; parent = parent.offsetParent){
    offx += parent.offsetLeft; offy += parent.offsetTop;
  }
  var xOff = data.getAttribute("xoff");
  var yOff = data.getAttribute("yoff");
  if (xOff || yOff){
    if (!xOff) xOff = 0;
    if (!yOff) yOff = 0;
    context.moveTo(x,y);
    x += parseInt(xOff);
    y += parseInt(yOff);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    context.beginPath();
    }
}

function textLabel(data, x, y){
  if ((x < 0) || (x > 600) || (y < 0) || (y > 600)) return;
  var name = data.getAttribute("name");
  if (!name) return;
  var parent;
  var offx = 0, offy = 0;
  for (parent = document.getElementById("canvas"); parent; parent = parent.offsetParent){
    offx += parent.offsetLeft; offy += parent.offsetTop;
  }
  var xOff = data.getAttribute("xoff");
  var yOff = data.getAttribute("yoff");
  if (xOff || yOff){
    if (!xOff) xOff = 0;
    if (!yOff) yOff = 0;
    x += parseInt(xOff);
    y += parseInt(yOff);
    }
  var words = document.getElementById("words");
  no++;
  words.innerHTML += "<span class=mobile id=word" + no + "  onclick='click(event.clientX, event.clientY)'>" + name + "<span>";
  var word = document.getElementById("word" + no);
  var canvas = document.getElementById("canvas");
  word.style.top = y + offy - word.offsetHeight / 2;
  word.style.left = x + offx - word.offsetWidth / 2;
}

function drawCircle(context, data){
  context.save();
  var r = projy(data.getAttribute("r"));
  var x = mapx(data.getAttribute("x"));
  var y = mapy(data.getAttribute("y"));
  var sx = x;
  var sy = y;
  var rx = projx(data.getAttribute("rx"));
  if (rx){
    if (r > rx){
      context.scale(rx / r, 1.0)
      x = r * x / rx;
      }
    else{
      context.scale(1.0, r / rx)
      y = rx * y / r;
      r = rx;
      }
    }
  var image = data.getAttribute("graph");
  var color = data.getAttribute("color");
  if (image)
    context.fillStyle = context.createPattern(document.getElementById(image), "repeat");
  else if (color)
    context.fillStyle = color;
  context.arc(x,y,r,0,6.2832,true);
  context.fill();
  context.stroke();
  context.closePath();
  context.beginPath();
  context.restore();
  drawLabel(context, data, x, y);
}

function textCircle(data){
  var x = mapx(data.getAttribute("x"));
  var y = mapy(data.getAttribute("y"));
  textLabel(data, x, y);
}

function drawPoint(context, data){
  context.save();
  var x = mapx(data.getAttribute("x"));
  var y = mapy(data.getAttribute("y"));
  var sx = x;
  var sy = y;
  context.fillStyle = '#000000';
  context.arc(x,y,1,0,6.2832,true);
  context.fill();
  context.closePath();
  context.beginPath();
  context.restore();
  drawLabel(context, data, x, y);
}

function textPoint(data){
  var x = mapx(data.getAttribute("x"));
  var y = mapy(data.getAttribute("y"));
  textLabel(data, x, y);
}

function load(){
  setLimits();
  normal();
}

function click(x,y){
  var parent;
  for (parent = document.getElementById("canvas"); parent; parent = parent.offsetParent){
    x -= parent.offsetLeft; y -= parent.offsetTop;
    }
  var runSelector = document.getElementById("state");
  if (!runSelector)return;
  var runType = runSelector.value
  if (runType == "pan")
    panImplement(x, y);
  if (runType == "zoomin")
    zoomInImplement(x, y);
  if (runType == "zoomout")
    zoomOutImplement(x, y);
}

function panImplement(x, y){
  var wx = worldX(x);
  var wy = worldY(y);
  var rx = xmax - xmin;
  var ry = ymin - ymax;
  xmin = wx - rx / 2;
  xmax = xmin + rx;
  ymax = wy - ry / 2;
  ymin = ymax + ry;
  draw();
}

function zoomInImplement(x, y){
  var wx = worldX(x);
  var wy = worldY(y);
  var rx = (xmax - xmin) / 1.25;
  var ry = (ymin - ymax) / 1.25;
  xmin = wx - rx / 2;
  xmax = xmin + rx;
  ymax = wy - ry / 2;
  ymin = ymax + ry;
  draw();
}

function zoomOutImplement(x, y){
  var wx = worldX(x);
  var wy = worldY(y);
  var rx = (xmax - xmin) * 1.25;
  var ry = (ymin - ymax) * 1.25;
  xmin = wx - rx / 2;
  xmax = xmin + rx;
  ymax = wy - ry / 2;
  ymin = ymax + ry;
  draw();
}