var serverRequest = new ServerRequest();
var requestHandler = "RequestHandler.ashx";

var idPrefix = "ctl00_ContentPlaceHolder1_";

var graphic = null;
var text = null;

for (var i = 1; i <= 8; ++ i) {
  eval("var textShadow" + i + " = null");
}

var mapPoints = null;
var imagePoints = null;

var isLine = false;
var isPolygon = false;

var isMeasuring = false;
var isSelecting = false;
var isDrawing = false;

function mapDown() {
  if (mapMain.getClickMode() == MapClickMode.Box) {
    mapMain.stretchyBoxColor = "gray";

    try {
      if (optSelectBox.isSelected()) {
        mapMain.stretchyBoxColor = "blue";
      }
    }
    catch (ex) {}
  }
  
  if (mapMain.getClickMode() != MapClickMode.ClientClick) {
    return;
  }

  if (graphic == null) {
    setInputTypes();

    if (isDrawing) {
      if (document.getElementById(idPrefix + "tboMarkupTitle").value.length == 0) {
        document.getElementById(idPrefix + "labTitleRequired").style.visibility = "visible";
        return;
      }
    }

    graphic = document.createElement("v:shape");
    graphic.style.position = "absolute";
    graphic.style.left = "0px";
    graphic.style.top = "0px";
    graphic.style.width = "1000";
    graphic.style.height = "1000";
    graphic.coordorigin = "0 0";
    graphic.coordsize = "1000 1000";
    graphic.strokecolor = isMeasuring ? "#00c000" : (isSelecting ? "blue" : "red");
    graphic.strokeweight = "2px";
    
    var fill = document.createElement("v:fill");
    fill.color = isMeasuring ? "#c0ffc0" : (isSelecting ? "#c0c0ff" : "#ffc0c0");
    fill.opacity = isPolygon ? (isDrawing ? 1 : 0.75) : 0;
    graphic.appendChild(fill);

    mapMain.content.appendChild(graphic);
    
    mapPoints = new Array();
    imagePoints = new Array();
    
    createText();

    if (isLine && isMeasuring) {
      text.style.left = (mapMain.imagePoint.x - 50) + "px";
      
      textShadow1.style.left = (mapMain.imagePoint.x - 51) + "px";
      textShadow2.style.left = (mapMain.imagePoint.x - 50) + "px";
      textShadow3.style.left = (mapMain.imagePoint.x - 49) + "px";
      textShadow4.style.left = (mapMain.imagePoint.x - 49) + "px";
      textShadow5.style.left = (mapMain.imagePoint.x - 49) + "px";
      textShadow6.style.left = (mapMain.imagePoint.x - 50) + "px";
      textShadow7.style.left = (mapMain.imagePoint.x - 51) + "px";
      textShadow8.style.left = (mapMain.imagePoint.x - 51) + "px";
    }
  }
  
  var i = mapPoints.length;
  mapPoints[i] = mapMain.mapPoint;
  imagePoints[i] = mapMain.imagePoint;
  ++i;
  mapPoints[i] = mapMain.mapPoint;
  imagePoints[i] = mapMain.imagePoint;
  
  redrawShape();

  if (isPolygon && isMeasuring) {
    labelPolygon();
  }
}

function mapDoubleClick() {
  if (graphic != null) {
    if (!isMeasuring) {
      submitShape();
    }

    mapReset();
  }
}

function mapMove() {
  if (graphic != null) {
    var p = mapMain.imagePoint;

    var i = mapPoints.length - 1;
    mapPoints[i] = mapMain.mapPoint;
    imagePoints[i] = p;
    
    redrawShape();

    if (isMeasuring) {
      if (isLine) {
        if (imagePoints.length == 2) {
          text.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 7 : -33)) + "px";
          text.style.visibility = "visible";
          textShadow1.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 6 : -34)) + "px";
          textShadow1.style.visibility = "visible";
          textShadow2.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 6 : -34)) + "px";
          textShadow2.style.visibility = "visible";
          textShadow3.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 6 : -34)) + "px";
          textShadow3.style.visibility = "visible";
          textShadow4.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 7 : -33)) + "px";
          textShadow4.style.visibility = "visible";
          textShadow5.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 8 : -32)) + "px";
          textShadow5.style.visibility = "visible";
          textShadow6.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 8 : -32)) + "px";
          textShadow6.style.visibility = "visible";
          textShadow7.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 8 : -32)) + "px";
          textShadow7.style.visibility = "visible";
          textShadow8.style.top = (imagePoints[0].y + (p.y < imagePoints[0].y ? 7 : -33)) + "px";
          textShadow8.style.visibility = "visible";
        }

        labelLine();
      }
      
      if (isPolygon) {
        labelPolygon();
      }
    }
  }
}

function mapOut() {
  mapReset();
}

function mapReset() {
  if (text != null) {
    mapMain.content.removeChild(text);
    text = null;
    
    for (var i = 1; i <= 8; ++i) {
      eval("mapMain.content.removeChild(textShadow" + i + ")");
      eval("textShadow" + i + " = null");
    }
  }
  if (graphic != null) {
    mapMain.content.removeChild(graphic);
    graphic = null;
  }
  
  mapPoints = null;
  imagePoints = null;

  isLine = false;
  isPolygon = false;

  isMeasuring = false;
  isSelecting = false;
  isDrawing = false;
}

function createText() {
  for (var i = 1; i <= 8; ++i) {
    eval("textShadow" + i + " = document.createElement(\"div\")");
    eval("textShadow" + i + ".style.position = \"absolute\"");
    eval("textShadow" + i + ".style.textAlign = \"center\"");
    eval("textShadow" + i + ".style.fontFamily = \"Verdana\"");
    eval("textShadow" + i + ".style.fontSize = \"11px\"");
    eval("textShadow" + i + ".style.color = \"white\"");
    eval("textShadow" + i + ".style.width = \"100px\"");
    eval("textShadow" + i + ".style.height = \"27px\"");
    eval("textShadow" + i + ".style.visibility = \"hidden\"");
    eval("mapMain.content.appendChild(textShadow" + i + ")");
  }
  
  text = document.createElement("div");
  text.style.position = "absolute";
  text.style.textAlign = "center";
  text.style.fontFamily = "Verdana";
  text.style.fontSize = "11px";
  text.style.color = "black";
  text.style.width = "100px";
  text.style.height = "27px";
  text.style.visibility = "hidden";
  mapMain.content.appendChild(text);
}

function area(points) {
  var a = 0;
  
  for (var i = 1; i <= points.length; ++i) {
    var j = i % points.length;
    a += (points[i - 1].x - points[j].x) * (points[i - 1].y + points[j].y) / 2;
  }
  
  return Math.abs(a);
}

function centroid(points) {
  var a = 0;
  var c = new Point(0, 0);
  
  for (var i = 1; i <= points.length; ++i) {
    var j = i % points.length;
    var n = (points[i - 1].x * points[j].y) - (points[j].x * points[i - 1].y);
    a += n;
    c.x += (points[i - 1].x + points[j].x) * n;
    c.y += (points[i - 1].y + points[j].y) * n;
  }
  
  if (a == 0) {
    return null;
  }
  
  a *= 3;
  c.x /= a;
  c.y /= a;
  
  return c;
}

function labelLine() {
  var d = 0;

  for (var i = 1; i < mapPoints.length; ++i) {
    d += mapPoints[i - 1].distanceTo(mapPoints[i]);
  }

  if (d < 5280) {
    text.innerHTML = Math.round(d) + " ft";
  }
  else {
    text.innerHTML = realFormat(d / 5280, 1) + " mi";
  }
  
  text.innerHTML += "<br>";
  d *= 0.3048;
    
  if (d < 1000) {
    text.innerHTML += Math.round(d) + " m";
  }
  else {
    text.innerHTML += realFormat(d / 1000, 1) + " km";
  }
  
  for (var i = 1; i <= 8; ++i) {
    eval("textShadow" + i + ".innerHTML = text.innerHTML");
  }
}

function labelPolygon() {
  if (mapPoints.length < 3) {
    return;
  }
  
  var c = centroid(imagePoints);
  
  if (c == null) {
    text.style.visibility = "hidden";
  
    for (var i = 1; i <= 8; ++i) {
      eval("textShadow" + i + ".style.visibility = \"hidden\"");
    }
  }
  else {
    text.style.visibility = "visible";
    text.style.left = c.x - 50;
    text.style.top = c.y - 14;
    
    textShadow1.style.visibility = "visible";
    textShadow1.style.left = c.x - 51;
    textShadow1.style.top = c.y - 15;
    
    textShadow2.style.visibility = "visible";
    textShadow2.style.left = c.x - 50;
    textShadow2.style.top = c.y - 15;
    
    textShadow3.style.visibility = "visible";
    textShadow3.style.left = c.x - 49;
    textShadow3.style.top = c.y - 15;
    
    textShadow4.style.visibility = "visible";
    textShadow4.style.left = c.x - 49;
    textShadow4.style.top = c.y - 14;
    
    textShadow5.style.visibility = "visible";
    textShadow5.style.left = c.x - 49;
    textShadow5.style.top = c.y - 13;
    
    textShadow6.style.visibility = "visible";
    textShadow6.style.left = c.x - 50;
    textShadow6.style.top = c.y - 13;
    
    textShadow7.style.visibility = "visible";
    textShadow7.style.left = c.x - 51;
    textShadow7.style.top = c.y - 13;
    
    textShadow8.style.visibility = "visible";
    textShadow8.style.left = c.x - 51;
    textShadow8.style.top = c.y - 14;
    
    var a = area(mapPoints);    //a will be in square feet

    if (a <= 2787840) {
      text.innerHTML = Math.round(a) + " sq ft";
    }
    else {
      text.innerHTML = realFormat(a / 27878400, 2) + " sq mi";
    }
    
    text.innerHTML += "<br>";
    a *= 0.09290304;    //now a is in square meters
      
    if (a <= 100000) {
      text.innerHTML += Math.round(a) + " sq m";
    }
    else {
      text.innerHTML += realFormat(a / 1000000, 2) + " sq km";
    }   

    text.innerHTML += "<br>";
    a *= 0.000247104393;    //a must go from square meters to acres
    text.innerHTML += a.toFixed(4) + " acres";  
 
    for (var i = 1; i <= 8; ++i) {
      eval("textShadow" + i + ".innerHTML = text.innerHTML");
    }
  }
}

function redrawShape() {
  var path = "m " + imagePoints[0].x + "," + imagePoints[0].y + " l ";

  for (i = 1; i < mapPoints.length; ++i) {
    path += imagePoints[i].x + "," + imagePoints[i].y;
    if (i < mapPoints.length - 1) {
      path += ",";
    }
  }
  
  if (isPolygon) {
    path += " x";
  }
  graphic.path = path + " e";
}

function realFormat(n, d) {
  var x = n > 0 ? Math.floor(n) : Math.ceil(n);
  var r = Math.floor(Math.abs(n - x) * Math.pow(10, d));
  return x + "." + (r + "000000").substr(0, d);
}

function setInputTypes() {
  if (optMeasureLine.isSelected()) {
    isLine = true;
    isMeasuring = true;
  }

  if (optMeasureArea.isSelected()) {
    isPolygon = true;
    isMeasuring = true;
  }

  try {
    if (optSelectLine.isSelected()) {
      isLine = true;
      isSelecting = true;
    }
  }
  catch (ex) {}

  try {
    if (optSelectPolygon.isSelected()) {
      isPolygon = true;
      isSelecting = true;
    }
  }
  catch (ex) {}

  try {
    if (optMarkupLine.isSelected()) {
      isLine = true;
      isDrawing = true;
    }
  }
  catch (ex) {}

  try {
    if (optMarkupPolygon.isSelected()) {
      isPolygon = true;
      isDrawing = true;
    }
  }
  catch (ex) {}
}

function submitShape() {
  var coordinates = new Array();

  for (var i = 0; i < mapPoints.length; ++i) {
    coordinates[i] = realFormat(mapPoints[i].x, 2) + "," + realFormat(mapPoints[i].y, 2);
  }

  if (isPolygon) {
    coordinates[coordinates.length] = coordinates[0];
  }

  var shape = (isLine ? "line" : "polygon") + ":" + coordinates.join(",");
  document.getElementById("__EVENTTARGET").value = "__Page";
  document.getElementById("__EVENTARGUMENT").value = shape;
  document.getElementById("aspnetForm").submit();
}

function clearMapCursor (cursor) {
  getMapCanvas().style.cursor = "";
}

function emailMap(state) {
  var data = "command=SaveAppState";
  data += "&state=" + escape(state);
  
  serverRequest.send(requestHandler, data, showReceiveError, emailMap_finish);
}

function emailMap_finish(response) {
  var url = document.location.protocol;
  url += "//" + document.location.hostname;
  
  if (document.location.port.length > 0 && document.location.port != "80") {
    url += ":" + document.location.port;
  }
  
  var path = document.location.pathname;
  path = path.substr(0, path.lastIndexOf("/"));
  
  url += path + "/RestoreMap.ashx?state=" + response;
  url += "\n\nNOTE: The contents of the map are subject to change. " +
      "Parcels that were shown on the map when the link above was created, as well as " +
      "any mark ups that were drawn on the map, may no longer exist.";
  
  document.location.href = "mailto:?subject=Map&body=" + escape(url);
}

function getMapCanvas() {
  return document.getElementById(mapMain.id + "_canvas");
}

function legendUncheckAll() {
  for (var i = 0; i < layerCount; ++i) {
    var chk = document.getElementById(idPrefix + "chkLayer" + i);
    
    if (chk != null) {
      chk.checked = false;
    }
  }
  
  document.getElementById(idPrefix + "ddlTheme").selectedIndex = 0;
}

function setMapCursor (cursor) {
  getMapCanvas().style.cursor = "Images/Cursors/" + cursor + ".cur";
}

function showReceiveError() {
  window.status = "Could not retrieve data from server";
}