var debugMode = true;
var COORDS_DIV_ID = "_coords";
var MSG_DIV_ID = "_msg";
var DEBUG_ID  = "debug";
var START_MARKER_ID = "_start";
var STOP_MARKER_ID = "_stop";
var startMarker;
var stopMarker;

function trace(s) {
  if (debugMode) {
    var el = document.getElementById(DEBUG_ID);
    if (el) el.innerHTML = s;
    window.status = s;
  }
}

function isOn() {
  return getCoordsDiv();
}

function getCoordsDiv() {
  return document.getElementById(COORDS_DIV_ID);
}

function getMessageDiv() {
  return document.getElementById(MSG_DIV_ID);
}

function getPosition(e) {
  e = e || window.event;
  var cursor = {x:0, y:0};
  if (e.pageX || e.pageY) {
    cursor.x = e.pageX;
    cursor.y = e.pageY;
  } 
  else {
    var de = document.documentElement;
    var b = document.body;
    cursor.x = e.clientX + 
      (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
    cursor.y = e.clientY + 
      (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
  }
  return cursor;
}

function getCursor(e) {
  if (!e) e = window.event;
  var tg = (window.event) ? e.srcElement : e.target;
  if (!tg) {
    alert("no tg");
      return;
  }
  var c = getPosition(e);
  return c;
}

function initStyle(sty) {
  sty.fontFamily = "Lucida Grande";
  sty.zIndex = 10000;
  sty.color = "#fff";
  sty.backgroundColor = "#000";
  sty.opacity = "0.5";
  sty.filter = "alpha(opacity=50)";
  return sty;
}

function createMessageDiv(msg) {
  var d = document.createElement("DIV");
  document.body.appendChild(d);
  d.id = MSG_DIV_ID;
  var sty = initStyle(d.style);
  sty.textAlign = "left";
  sty.padding = "5px";
  sty.margin = "5px";
  sty.position = "absolute";
  sty.bottom = "0px";
  sty.right = "0px";
  sty.fontSize = "16px";
  sty.fontWeight = "bold";
  d.innerHTML = msg;
  return d;
}

function showMessage(msg) {
  var d = getMessageDiv();
  if (!d) d = createMessageDiv(msg);
}

function removeMessageDiv() {
  var d = getMessageDiv();
  if (d) d.parentNode.removeChild(d);
}

function createCoordsDiv() {
  var d = document.createElement("DIV");
  document.body.appendChild(d);
  d.id = COORDS_DIV_ID;
  var sty = initStyle(d.style);
  sty.textAlign = "center";
  sty.width = "120px";
  sty.padding = "5px";
  sty.margin = "5px";
  sty.position = "absolute";
  sty.bottom = "0px";
  sty.left = "0px";
  sty.fontSize = "16px";
  sty.fontWeight = "bold";
  return d;
}

function turnOn() {
  trace("turnOn");
  if (!getCoordsDiv()) createCoordsDiv();
  document.onmousemove = function(e) {
    var c = getCursor(e);
    updateCoords(c.x,c.y);
  };
  document.onmousedown = function(e) {
    var c = getCursor(e);
    mouseDown(c.x,c.y);
  };
  updateCoords(0,0);
}

function mouseDown(x,y) {
  if (!startMarker) {
    trace("startMarker");
    startMarker = createMarker(x,y,"#007700",START_MARKER_ID);
  } else if (!stopMarker) {
    trace("stopMarker");
    stopMarker = createMarker(x,y,"#770000",STOP_MARKER_ID);
    calculateDistances();
  } else {
    trace("removeMarkers");
    removeMarkers();
    removeMessageDiv();
  }
}

function calculateDistances() {
  var x1    = findPosX(startMarker);
  var y1    = findPosY(startMarker);
  var x2    = findPosX(stopMarker);
  var y2    = findPosY(stopMarker);
  var dx    = x1-x2;
  var dy    = y1-y2;
  var xDist = Math.abs(dx);
  var yDist = Math.abs(dy);
  var dist  = Math.sqrt(dx*dx + dy*dy);
  var html  = "";
  html      += "dx: "   + xDist + "<br/>";
  html      += "dy: "   + yDist + "<br/>";
  html      += "dist: " + dist;
  showMessage(html);
}

function createMarker(x,y,color,id) {
  var m = document.createElement("DIV");
  m.id = id;
  document.body.appendChild(m);
  var sty = initStyle(m.style);
  sty.padding = "2px";
  sty.color = "#fff";
  sty.backgroundColor = color;
  sty.position = "absolute";
  sty.top  = y + "px";
  sty.left = x + "px";
  sty.border = "1px solid #fff";
  sty.fontSize = "0.7em";
  m.innerHTML = x + "," + y;
  return m;
}

function removeMarkers() {
  if (startMarker) startMarker.parentNode.removeChild(startMarker);
  if (stopMarker) stopMarker.parentNode.removeChild(stopMarker);
  startMarker = null;
  stopMarker = null;
}

function updateCoords(x,y) {
  var el = getCoordsDiv();
  trace(x + "," +y);
  el.innerHTML = x + "," + y;
}

function turnOff() {
  trace("turnOff");
  var d = getCoordsDiv();
  if (d) d.parentNode.removeChild(d);
  document.onmousemove = function(e) {};
  document.onmousedown = function(e) {};
  removeMarkers();
  removeMessageDiv();
}

function toggle() {
  if (isOn()) {
    turnOff();
  } else {
    turnOn();
  }
}