/* 
 * Bunch of Javascript functions for GBIF-Sweden's MapServer application 
 *
 * Copyright 2006-2007 Mickael Graf, the Swedish Museum of Natural History
 */
var mapXmlHttp;
var layerMenuXmlHttp;
var recordInfoXmlHttp;
var zoom = 1;
var x = 0;
var y = 0;
var infowX = 0;
var infowY = 0;
var species = "";
var warningMsg = "";
var dateDefaultValue = "ÅÅÅÅMMDD";
var area = "Sweden"; /* it's mainly what we want to see, isn't it ?*/
var bboxes = new Array ();
bboxes["Europe"] = "-25 35 50 70";
bboxes["Sweden"] = "7 55 25 69";
bboxes["World"] = "-180 -90 180 90";

/*
 * Icon styles
 */
/*
 * Different colors for the different states of the icons
 */
var oldIconBorderColor_;
var normalIconBorderColor_ = "#ffffff";
var highlightedIconBorderColor_ = "#d3d3d3";
var selectedIconBorderColor_ = "#808080";

function GetXmlHttpObject()
{ 
  var objXMLHttp=null;
  if (window.XMLHttpRequest)
  {
    objXMLHttp = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
    objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return objXMLHttp;
} 
function getClientWidth ()
{
  var displayWidth  = 0;
  if( typeof( window.innerWidth ) == 'number' ) 
  {
    //Non-IE
    displayWidth = window.innerWidth;
  }
  else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )
  {
    //IE 6+ in 'standards compliant mode'
    displayWidth = document.documentElement.clientWidth; 
  }
  return displayWidth;
}
function getClientHeight ()
{
  var displayHeight = 0;
  if( typeof( window.innerHeight ) == 'number' ) 
  {
    //Non-IE
    displayHeight = window.innerHeight;
  }
  else if( document.documentElement && ( document.documentElement.clientHeight || document.documentElement.clientHeight ) )
  {
    //IE 6+ in 'standards compliant mode'
    displayHeight = document.documentElement.clientHeight;
  }
  return displayHeight;
}
function resizeHeader ()
{
  var header = document.getElementById("header");
  var menuBar = document.getElementById("menubar");
  header.style.width = getClientWidth () + "px";
  menuBar.style.width = getClientWidth () + "px";
}
function checkDate (dateEl) {
  var d = new Date ();
  if (dateEl.value.length != 8
     || dateEl.value.substr (0, 4) > d.getFullYear ()
     || !(dateEl.value.substr (4, 2) >= 01 && dateEl.value.substr (4, 2) <= 12)
     || !(dateEl.value.substr (6, 2) >= 01 && dateEl.value.substr (6, 2) <= 31)) {
    dateEl.style.backgroundColor = "#ec9090";
    if (dateEl.id == "sd") 
    { 
      dateType = "start";
    } 
    else
    {
      dateType = "slut";
    }
    warningMsg = "<div id=\"warntitle\">Fel med " + dateType + " datum</div><div id=\"warnbutton\" onclick=\"closeWarningBox();\">OK</div>";
    warningBox ();
    return (false);
  }
  else 
  {
    dateEl.style.backgroundColor = "#ffffff";
    return (true);
  }
}
function drawMap (toZoom)
{
  var map  = document.getElementById("map");
  var layers = document.forms[0].elements["layers"];
  var extent = document.forms[0].elements["extent"];
  //alert ("extent: "+ extent.value);
  var fr = document.forms[0].elements["fr"];
  var sd = document.forms[0].elements["sd"];
  var ed = document.forms[0].elements["ed"];
  var ds = document.forms[0].elements["ds"];

  /* Check the dates are ok */
  if (sd.value != dateDefaultValue) 
  {
    if (!checkDate (sd)) {return;}
  } 
  if (ed.value != dateDefaultValue) 
  {
    if (!checkDate (ed)) {return;}
  }

  /* Find the size of the display available for the map */
  map.style.width  = (getClientWidth () - 250) + "px"; //Keep 200px for the left menu
  map.style.height = (getClientHeight () - 150) + "px"; //Keep 86px for the header

  /* Now it's serious stuff */
  mapXmlHttp = GetXmlHttpObject ();
  if (mapXmlHttp == null)
  {
    alert ("Din webl&auml;sare st&ouml;djer inte HTTP Request");
    return false;
  }

  //var paramString = "area=" + area
  var paramString = "area=World"
                  + "&width=" + encodeURI (map.style.width)
	          + "&height=" + encodeURI (map.style.height);
  if (toZoom == "z"){
    paramString = paramString + "&zoom=" + encodeURI (zoom);
  }
  else
  {
    paramString = paramString + "&zoom=" + encodeURI ("1");
  }

  if (species != "")
  {
    paramString = paramString + "&species=" + encodeURI (species);
  }

  if (sd.value != dateDefaultValue) 
  {
    paramString = paramString + "&sd=" +encodeURI (sd.value);
  }
  if (ed.value != dateDefaultValue) 
  {
    paramString = paramString + "&ed=" +encodeURI (ed.value);
  }

  if (ds.value != "")
  {
    paramString = paramString + "&ds=" +encodeURI (ds.value);
  }

  if (x != 0 && y != 0)
  {
    paramString = paramString + "&x=" + encodeURI (x)
                              + "&y=" + encodeURI (y);
  }
//alert (typeof(extent));
  if (typeof (extent) != "undefined" && toZoom != "1") 
  //if (typeof (extent) != "undefined")
  {
    paramString = paramString + "&extent=" + encodeURI (extent.value);
  }

  if (typeof (fr) != "undefined")
  {
    paramString = paramString + "&fr=" + encodeURI (fr.value);
  }

  if (typeof (layers) != "undefined") /* Check layers are drawn i.e. buildmenu.php is done */
  {
    for (i = 0; i < layers.length; i++)
    {
      if (layers [i].checked)
      {
        paramString = paramString + "&layers[]=" + layers [i].value;
      }
    }
  }

  var url = "/buildmap.php";
  mapXmlHttp.onreadystatechange = mapDrawn;
  mapXmlHttp.open ("POST", url, true);
  /* We are sending the parameters as POST so we need to do extra work */
  mapXmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  mapXmlHttp.setRequestHeader("Content-length", paramString.length);
  mapXmlHttp.setRequestHeader("Connection", "close");
  mapXmlHttp.send (paramString);

  return false;
}
function mapDrawn ()
{
  if (mapXmlHttp.readyState == 4 || mapXmlHttp.readyState == "complete")
  {
    document.getElementById("map").innerHTML = mapXmlHttp.responseText;
    /* Click the click point for avoiding strange redraw when resizing och showing a new layer */
    x = 0;
    y = 0;
    if (species != "")
    {
      document.title = species + " :: GBIF-Sweden";
      if (zoom == 1)
      {
        document.getElementById("la_carte").useMap = "#items";
      }
    }
  }
  else
  { 
    /* It looks like that resizing a map triggers twice a resize event in Internet Explorer. 
     * So the drawMap() function reads the extent value once, then the <div id="map"> has its
     * content replace, and then IE tries again to read the extent value that was stored in the
     * input field in the <div>. The trick is to write the input stuff again :-(
     * That's bad and that's a temporary solution.
     */

    document.getElementById("map").innerHTML = "Laddar ner..."
					     + "<input id=\"extent\" name=\"extent\" value=\""+document.getElementById("extent").value+"\" type=\"hidden\" />";
  }
}
function drawLayerMenu ()
{
  var layerMenu = document.getElementById("layermenu");
  layerMenuXmlHttp = GetXmlHttpObject ();
  if (layerMenuXmlHttp == null)
    {
      alert ("Din webl&auml;sare st&ouml;djer inte HTTP Request");
      return;
    }
  var paramString = "area=" + area;
  var url = "/buildmenu.php";
  layerMenuXmlHttp.onreadystatechange = layerMenuDrawn;
  layerMenuXmlHttp.open ("POST", url, true);
  layerMenuXmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  layerMenuXmlHttp.setRequestHeader("Content-length", paramString.length);
  layerMenuXmlHttp.setRequestHeader("Connection", "close");
  layerMenuXmlHttp.send (paramString);
}
function layerMenuDrawn ()
{
  if (layerMenuXmlHttp.readyState == 4 || layerMenuXmlHttp.readyState == "complete")
  {
    document.getElementById("layermenu").innerHTML = layerMenuXmlHttp.responseText; 
    /* Below is commented for testing */
    //changeArea(document.getElementById("areas"));
    document.getElementById("extent").value = bboxes[area];
    /* If there's no species set in the URL then draw the map .
     * Otherwise the map will be drawn several times. That's 
     * stupid, isn't it?
     */ 
    if (species.length == 0) 
    {
      drawMap ();
    }
   
    //Below is a hack for forcing the map to be drawn according to the area selected in the combobox.
    //This will produce an error in the JS console :-(
    //var foo = document.getElementById("extent").value;
    //drawMap ();
    //document.forms[0].submit.disabled=true;   //I don't remember why it is here... but it creates bugs.
  }
}
function drawInterface ()
{
  /* This function must be invoked only once, while the index page is loading.
   * It will check if the search field for species is filled or not and then 
   * set the species variable and also force the app to use the world map,
   * because Sweden/Europe won't show all the records available.
   */

  resizeHeader ();
  if (document.forms[0].elements['species'].value.length > 0)
  {
    setSpecies(document.forms[0].elements['species']);
    if (document.forms[0].elements['map_'].value.length >0)
    {
      area = document.forms[0].elements['map_'].value;
      /* Now clean the input value */
      document.forms[0].elements['map_'].value = "";
    }
  }

  drawLayerMenu ();
}
function reDrawInterface ()
{
  /* Same function as drawInterface, but this time we don't redraw the layer menu */
  /* for not loosing the selected layers.                                         */
  resizeHeader ();
  drawMap ();
}
function changeArea (select) {
  area = select.value;
  document.getElementById("extent").value = bboxes[area];
  //drawLayerMenu ();
  drawMap ();
}
function clickArea (icon) 
{
  area = icon.id;
  document.getElementById("extent").value = bboxes[area];
  drawMap ();
}
function changeZoomStatus (iconId)
{
  switch (iconId)
  {
    case "zoom_in": 
      zoom = 2;
      break;
    case "zoom_out":
      zoom = -2;
      break;
    case "zoom_pan":
      zoom = -1;
      break;
    default:
      zoom = 1;
  }
  if (zoom == 1)
  {
    document.getElementById("la_carte").useMap = "#items";
  }
  else
  {
    document.getElementById("la_carte").useMap = "";
  }
}
function clickIcon (iconEl)
{
  var imgs, i;
  
  changeZoomStatus (iconEl.id);

  /* Taken from http://onlinetools.org/articles/unobtrusivejavascript/chapter2.html */
  imgs = document.getElementsByTagName("img");
  for (i = 0; i < imgs.length; i++)
  {
    /* check the image we're looking at is an 'icon' and if it's different from the one we just changed the status */
    if (/icon/.test(imgs[i].className) && imgs[i].id != iconEl.id)
    {
      imgs[i].style.borderColor = normalIconBorderColor_;
    }    
  }
  /* Exception for zooming back to 1 */
  if (iconEl.id == "zoom_1")
  {
    drawMap("1");
    document.getElementById("information").style.borderColor = selectedIconBorderColor_;
    document.getElementById("zoom_1").style.borderColor = normalIconBorderColor_;
    oldIconBorderColor_ = normalIconBorderColor_;
    return;
  }
  iconEl.style.borderColor = selectedIconBorderColor_;
  oldIconBorderColor_ = selectedIconBorderColor_;
}
function overIcon (iconEl)
{
  if (iconEl.currentStyle)
  {
    oldIconBorderColor_ = iconEl.currentStyle.borderColor;
  }
  else {
    oldIconBorderColor_ = iconEl.style.borderColor;
  }
  iconEl.style.borderColor = highlightedIconBorderColor_;
}
function outIcon (iconEl)
{
  iconEl.style.borderColor = oldIconBorderColor_;
}
function catchXY (event)
{
  if (zoom == 1)
  {
    return;     /* We don't catch anything if the zoom is 1 */
  }
  /* The two lines below are done with the help of Emanuel Feronato's work. See :                */
  /* http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/ */
  x = event.offsetX ? event.offsetX : event.pageX - document.getElementById ("map").offsetLeft;
  y = event.offsetY ? event.offsetY : event.pageY - document.getElementById ("map").offsetTop;
  if (zoom != -1) 
  {
    drawMap ("z");
  }
  else
  {
    drawMap ();
  }
}
function changeCursor (objectId, direction)
{
  var objectEl = document.getElementById(objectId);

  if (direction == "in")
  {
    switch (zoom)
    {
      case  2:
        /* zoom in: change cursor */
        objectEl.style.cursor = "url('/images/icons/zoom_in.png'), pointer";
        break;
      case -2:
	/* zoom out: change cursor */
        objectEl.style.cursor = "url('/images/icons/zoom_out.png'), pointer";
        break;
      case -1:
	/* pan: crosshair */
        objectEl.style.cursor = "crosshair";
        break;
      default:
        objectEl.style.cursor = "default";
    }
  }
  else
  {
    objectEl.style.cursor = "default";
  }
}
function setSpecies (speciesEl)
{
  var cap = speciesEl.value.substring(0,1);
  var rest = speciesEl.value.substring(1, speciesEl.value.length);
  species = cap.toUpperCase() + rest.toLowerCase();
  if (species.length > 0) {
    /* Note: checkSpecies () checks that the species name provided is correct. */
    /*       Then it invokes warningBox (), which will call drawMap () if      */
    /*       everything is correct.                                            */
    checkSpecies ();
  }
  else
  {
    drawMap();
  }
}
function infow (id, event) {

  /* infowX and infowY calculates where to place the info window according to the yellow point   */
  /* which is clicked on the map.                                                                */
  /* The map is placed at 90px from the top of the window and 200px from the left. We need to    */
  /* that for IE and FF but not for Safari and I hope Konqueror.                                 */
  var ua = navigator.userAgent;
  if (ua.match("KHTML"))
  {
    infowX = event.offsetX + 5;
    infowY = event.offsetY + 5;
  }
  else
  {
    /* IE FF and hopefully Opera */
    /* The two lines below are done with the help of Emanuel Feronato's work. See :                */
    /* http://www.emanueleferonato.com/2006/09/02/click-image-and-get-coordinates-with-javascript/ */
    infowX = event.offsetX? (event.offsetX + 200 + 5): (event.pageX - document.getElementById ("map").offsetLeft + 200 + 5);
    infowY = event.offsetY? (event.offsetY + 90 +5): (event.pageY - document.getElementById ("map").offsetTop + 90 + 5);
  }

  recordInfoXmlHttp = GetXmlHttpObject ();
  if (recordInfoXmlHttp == null)
  {
    alert ("Din webl&auml;sare st&ouml;djer inte HTTP Request");
    return false;
  }
  var paramString = "id=" + id;
  var url = "/getrecinfo.php";
  recordInfoXmlHttp.onreadystatechange = gotRecordInfo;
  recordInfoXmlHttp.open ("POST", url, true);
  /* We are sending the parameters as POST so we need to do extra work */
  recordInfoXmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  recordInfoXmlHttp.setRequestHeader("Content-length", paramString.length);
  recordInfoXmlHttp.setRequestHeader("Connection", "close");
  recordInfoXmlHttp.send (paramString);

  return false;
}
function gotRecordInfo ()
{
  if (recordInfoXmlHttp.readyState == 4 || recordInfoXmlHttp.readyState == "complete")
  {
    //Old FGCOLOR: #6A9BE5
    return overlib(recordInfoXmlHttp.responseText, STICKY, CAPTION, species, FGCOLOR, '#FFFFFF', BGCOLOR, '#52983D', BORDER, 1, TEXTFONT, 'Arial, Sans-serif', TEXTSIZE, 2, WIDTH, 300, FIXX, infowX, FIXY, infowY);
  }
  else
  {
    return overlib('Laddar ner...', STICKY, CAPTION, species, FGCOLOR, '#FFFFFF', BGCOLOR, '#52983D', BORDER, 2, TEXTFONT, 'Arial, Sans-serif', TEXTSIZE, 2, FIXX, infowX, FIXY, infowY);
  }
}
function stopSubmit(thisForm)
{
  thisForm.species.focus();
  return false;
}
function checkSpecies ()
{
  var speciesEl = document.forms[0].elements["species"];
  var species = encodeURI (speciesEl.value);

  if (species.length == 0)
  {
    return;
  }

  if (species.length < 2) 
  {
    warningMsg = "<div id=\"warntitle\">Artnamnen &auml;r f&ouml;r kort</div><div id=\"warnbutton\" onclick=\"closeWarningBox();\">OK</div>";
    warningBox ();
    return;
  }

  speciesXmlHttp = GetXmlHttpObject ();
  if (speciesXmlHttp == null)
  {
    alert ("Din webl&auml;sare st&ouml;djer inte HTTP Request");
    return;
  }
  var url = "/checkspecies.php?sid=" + Math.random ();
  url = url + "&s=" + species;
  speciesXmlHttp.onreadystatechange = speciesStateChanged;
  speciesXmlHttp.open ("GET",url,true);
  speciesXmlHttp.send (null);
}
function speciesStateChanged() 
{ 
  var warning = document.getElementById("warning");
  var speciesEl = document.forms[0].elements["species"];

  if (speciesXmlHttp.readyState == 4 || speciesXmlHttp.readyState == "complete")
  { 
    warningMsg = speciesXmlHttp.responseText;
    if (warningMsg.length > 0)
    {
      warningMsg = warningMsg + "<div id=\"warnbutton\" onclick=\"closeWarningBox();\">Avbryt</div>";
      speciesEl.style.backgroundColor = "#ec9090";
    }
    else
    {
      speciesEl.style.backgroundColor = "white";
    }
    warningBox ();
  } 
} 
function warningBox ()
{
  var warning = document.getElementById("warning");
  var errorbg = document.getElementById("errorbg");

  if (warningMsg.length > 0)
  {
    warning.style.left = ((getClientWidth()/2) - (warning.offsetWidth/2)).toString() + "px";;
    warning.style.top = ((getClientHeight()/2) - (warning.offsetHeight/2)).toString() + "px";
    warning.innerHTML = warningMsg;
    errorbg.style.visibility = "visible";
    warning.style.visibility = "visible";
  }
  else
  {
    warning.innerHTML = "";
    warning.style.visibility = "hidden";
    errorbg.style.visibility = "hidden";
    drawMap();
  }
}
function closeWarningBox () 
{
  var warning = document.getElementById("warning");
  var errorbg = document.getElementById("errorbg");
  warningMsg = "";
  warning.innerHTML = "";
  warning.style.visibility = "hidden";
  errorbg.style.visibility = "hidden";
}
function startSearching (e) 
{
  if (window.event) 
  { 
    keynum = e.keyCode;
  } else if (e.which)
  {
    keynum = e.which;
  }

  if (keynum == 13) 
  {
  }
}
function speciesListStateChanged ()
{
  var speciesEl = document.forms[0].elements["species"];
  var speciesListEl = document.forms[0].elements["specieslist"];
  speciesEl.value = speciesListEl.value;
  species = speciesEl.value;
  speciesEl.style.backgroundColor = "#ffffff";
  warningMsg = "";
  warningBox ();
}
function focusDateField(fieldEl) {
  if (fieldEl.value == dateDefaultValue) {
    fieldEl.value = "";
    fieldEl.style.color = "#000000";
  }
}
function blurDateField(fieldEl) {
  if (fieldEl.value == "") {
    fieldEl.style.color = "#808080";
    fieldEl.value = dateDefaultValue;
    fieldEl.style.backgroundColor = "#ffffff";
  }
}
function cleanDateField(fieldEl) {
  if (fieldEl.value != dateDefaultValue) {
    fieldEl.style.color = "#808080";
    fieldEl.value = dateDefaultValue;
    fieldEl.style.backgroundColor = "#ffffff";
  }
}
function cleanInputField(fieldEl) {
  if (fieldEl.value != "") {
    fieldEl.value = "";
    fieldEl.style.backgroundColor = "#ffffff";
  }
}