////////////////////////////////////////////////////////////////////////////
    // Show a bigger map
    function bigmap() {

      // Record the centre-point for the map
      var xCentre = getAbsXCentre();
      var yCentre = getAbsYCentre();

      // Increase tilewidth
      tilewidth = Math.round(tilewidth * 1.1);

      // Redraw the map
      drawmap();

      // Re-centre the map
      setAbsCentre(Math.round(xCentre * 1.1), Math.round(yCentre * 1.1));

    }

    ////////////////////////////////////////////////////////////////////////////
    // Show a smaller map
    function smallmap() {
      // Record the centre-point for the map
      var xCentre = getAbsXCentre();
      var yCentre = getAbsYCentre();

      // Decrease tilewidth
      tilewidth = Math.round(tilewidth  / 1.1);

      // Redraw the map
      drawmap();

      // Re-centre the map
      setAbsCentre(Math.round(xCentre / 1.1), Math.round(yCentre / 1.1));
    }

    ////////////////////////////////////////////////////////////////////////////
    // Get the figure which represents how zoomed in/out we are
    function getZoomFactor() {
      return (document.getElementById('outerdiv').scrollWidth / document.getElementById('outerdiv').clientWidth);
    }

    ////////////////////////////////////////////////////////////////////////////
    // Get the absolute X-axis point for the centre of the part of the map on
    // display. Aboslute meaning the point on the axis of the entire map.
    function getAbsXCentre() {
      return Math.round(document.getElementById('outerdiv').scrollLeft + (document.getElementById('outerdiv').clientWidth/2)) / getZoomFactor();
    }

    ////////////////////////////////////////////////////////////////////////////
    // Get the absolute Y-axis point for the centre of the part of the map on
    // display. Aboslute meaning the point on the axis of the entire map.
    function getAbsYCentre() {
      return Math.round(document.getElementById('outerdiv').scrollTop + (document.getElementById('outerdiv').clientHeight/2)) / getZoomFactor();
    }

    ////////////////////////////////////////////////////////////////////////////
    // Adjust the scroll bar to correctly centre the part of the map on display,
    // given as the absolute X-axis & y-axis points. Aboslute meaning the point
    // on the axies of the entire map.
    function setAbsCentre(xCentre, yCentre) {

      // Hide the map and overlay so that IE doesn't twitch while repositioning
      document.getElementById('hotspotsoverlaydiv').style.visibility = 'hidden';
      document.getElementById('imgtable').style.visibility = 'hidden';

      // Set the centre spot
      setAbsXCentre(xCentre);
      setAbsYCentre(yCentre);

      // Redisplay the map and overlay
      document.getElementById('imgtable').style.visibility = 'visible';
      document.getElementById('hotspotsoverlaydiv').style.visibility = 'visible';
    }

    ////////////////////////////////////////////////////////////////////////////
    // Adjust the scroll bar to correctly centre the part of the map on display,
    // given as the absolute X-axis point. Aboslute meaning the point on the
    // axis of the entire map.
    function setAbsXCentre(xCentre) {
      document.getElementById('outerdiv').scrollLeft = Math.round((xCentre * getZoomFactor()) - (document.getElementById('outerdiv').clientWidth / 2));
    }

    ////////////////////////////////////////////////////////////////////////////
    // Adjust the scroll bar to correctly centre the part of the map on display,
    // given as the absolute Y-axis point. Aboslute meaning the point on the
    // axis of the entire map.
    function setAbsYCentre(yCentre) {
      document.getElementById('outerdiv').scrollTop = Math.round((yCentre * getZoomFactor()) - (document.getElementById('outerdiv').clientHeight / 2));
    }


    ////////////////////////////////////////////////////////////////////////////
    function zoomin() {
      // Record the centre-point for the map
      var xCentre = getAbsXCentre();
      var yCentre = getAbsYCentre();

      // Increase zoom
      zoom = Math.round(zoom * 1.1);

      // Redraw the map
      drawmap();

      // Scale all the coordinates which define the clickable areas
      areaArr = getElementsByClass('hotspotarea');
      for (n = 0; n < (areaArr.length); n++) {
        thisAreaArr = areaArr[n].coords.split(",");
        for (n2 = 0; n2 < (thisAreaArr.length); n2++) {
          thisAreaArr[n2] = Math.round(thisAreaArr[n2] * 1.1);
        }
        areaArr[n].coords = thisAreaArr.join(",");
      }

      // Re-centre the map
      setAbsCentre(xCentre, yCentre);
    }

    ////////////////////////////////////////////////////////////////////////////
    function zoomout() {
      // Record the centre-point for the map
      var xCentre = getAbsXCentre();
      var yCentre = getAbsYCentre();

      // Don't allow zooming out beyond the point where the map is smaller than
      // outerdiv which contains it
      if (
        (document.getElementById('outerdiv').clientWidth < document.getElementById('hotspotsoverlaydiv').clientWidth)
        ||
        (document.getElementById('outerdiv').clientHeight < document.getElementById('hotspotsoverlaydiv').clientHeight)
        ) {

        // Decrease zoom
        zoom = Math.round(zoom / 1.1);

        // Redraw the map
        drawmap();

        // Scale all the coordinates which define the clickable areas
        areaArr = getElementsByClass('hotspotarea');
        for (n = 0; n < (areaArr.length); n++) {
          thisAreaArr = areaArr[n].coords.split(",");
          for (n2 = 0; n2 < (thisAreaArr.length); n2++) {
            thisAreaArr[n2] = Math.round(thisAreaArr[n2] / 1.1);
          }
          areaArr[n].coords = thisAreaArr.join(",");
        }

        // Re-centre the map
        setAbsCentre(xCentre, yCentre);
      }
    }

    ////////////////////////////////////////////////////////////////////////////
    // Returns an array containing all the elements of the given class.
    // Nicked off the net
    function getElementsByClass(searchClass,node,tag) {
      var classElements = new Array();
      if ( node == null )
        node = document;
      if ( tag == null )
        tag = '*';
      var els = node.getElementsByTagName(tag);
      var elsLen = els.length;
      var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
      for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
        }
      }
      return classElements;
    }

    ////////////////////////////////////////////////////////////////////////////
    // Prepares the coords needed to build the clickable image map

    function clickXY(ev, iniwidth) {
      var absX
      var absY
      var clkX
      var clkY
      var msg

      // Firefox
      if (ev.pageX) {
        clkX = ev.pageX - document.getElementById('outerdiv').offsetLeft;
        clkY = ev.pageY - document.getElementById('outerdiv').offsetTop;

      // IE
      } else {
        clkX = ev.x;
        clkY = ev.y;
      }

      absX = Math.round((clkX + document.getElementById('outerdiv').scrollLeft) * (iniwidth / zoom));
      absY = Math.round((clkY + document.getElementById('outerdiv').scrollTop) * (iniwidth / zoom));

      msg = document.getElementById('msgtxt').value;

      if (msg != '') {
        msg = msg + ',';
      }
      msg = msg + absX + ',' + absY;
      document.getElementById('msgtxt').value = msg;
    }

    ////////////////////////////////////////////////////////////////////////////
    function msg(msgtxt) {
      if (document.getElementById('msgdiv').textContent)
        document.getElementById('msgdiv').textContent = msgtxt;
      else
        document.getElementById('msgdiv').innerText = msgtxt;
    }

    ////////////////////////////////////////////////////////////////////////////
    function showmap() {
      document.getElementById('imgtable').style.visibility = 'visible';
    }

    ////////////////////////////////////////////////////////////////////////////
    function resetmap() {
      var urlstr;

      urlstr = './map.php?year=' + year;
      urlstr = urlstr + '&centx=' + Math.round(getAbsXCentre());
      urlstr = urlstr + '&centy=' + Math.round(getAbsYCentre());
      urlstr = urlstr + '&zoom=' + zoom;
      urlstr = urlstr + '&tilewidth=' + tilewidth;
      urlstr = urlstr + '&showpoints=' + getShowPointsChkBx();
      urlstr = urlstr + '&showbounds=' + getShowBoundsChkBx();

      // Reload the browser with the new map
      window.location.assign(urlstr);

    }

    ////////////////////////////////////////////////////////////////////////////
    function getShowPointsChkBx(){

      if (document.getElementById('showpointschkbx').checked) {
        return 1;
      } else {
        return 0;
      }
    }

    ////////////////////////////////////////////////////////////////////////////
    function getShowBoundsChkBx(){

      if (document.getElementById('showboundschkbx').checked) {
        return 1;
      } else {
        return 0;
      }
    }

    ////////////////////////////////////////////////////////////////////////////
    function showMsgDiv(){

      document.getElementById('msgdiv').style.display = "block";

    }