/*
Notes on the mapping facility.
The script, 'toggleMap.js' does most of the work to produce a mapping facility, though some changes and additions  to the original web page, 'walk.html' have had to be made too. For those with javascript not enabled the surfing experience should not have changed.  An overriding change to the web page is the inclusion of grid-references at the end of each row in the tables containing the Walks Programme for each month. These are always hidden to the user.   Another change was  to include both a 'thead' tag and a 'tbody' tag.in all the tables displaying the walks' programme.  An extra style sheet, 'walkextra.css' was set up. The ability to select different scrollable tables, one for each month, is included in the script. 

Table cells were originally controlled by using the CSS property 'display' with value 'table-cell' to countermand a value of 'none' so that a hidden 'clickable' cell could be displayed. Similarly, the body section of a table could be made to disappear using the CSS property 'display' with value 'none' and re-appear with the value 'table-row-group'. This was necessary in order to select a particular month's walks data. The height of the scrollable part of the table was adjusted by adding a height value to the table body element. Unfortunately I.E. does not support either of the values 'table-cell' or 'table-row-group' besides many more, nor does it allow the height of the table body element to be adjusted. To overcome these limitations, each table with a month's walk had to be split so that the header was separated from the body and both sections placed inside 'div' tags. It is now possible to apply height values to the 'div' tags enclosing the table bodies, which then constrain the height of the table bodies inside. The 'display' property with value 'block' together with the 'overflow' property with value 'auto' is also applied to the 'div' tags so that the table body inside becomes scrollable, if the table body is longer than the height set. The set of tables together with their div tags were then enclosed in another div tag, which was needed to set the position of the new header, for each set of month's walks selected.

The grid references used to plot a walk's position are placed in an invisible cell at the end of each row of the table displaying the walks' programme in walk.html. If the mapping facility is selected, a letter M appears in the cell to the left of this. Clicking on it will bring up one of four maps and a spot indicates on the map the position of the walk. So that it can be seen, this spot blinks and changes colour.

To overcome the lack of values for the CSS property 'display'  in I.E., the property 'visibility', with values 'visible' and 'hidden', is used to control these cells instead. However the property 'visibility' with value 'hidden' still takes up space, unlike the property 'display' with the value 'none'. Fortunately the cells in the table, which are to be controlled were already at the end of each row, otherwise vacant spaces would have appeared in the tables. However, to accomodate I.E., some other browsers have been forced to display a blank space at the end of the rows, which is visible because the space does not match the background colour. The option of matching the row colours with the background colour and so disguise these extra spaces is not available because  the rows alternate in colour slightly. (stripeTables.js produces the stripes.)

The joining-up of table headers and corresponding scrollable table bodies caused no problems except for I.E. and AOL,(which uses I.E). With I.E.7, it was found that if the scrollable table was less than half the length of the full unscrolled table, a gap appeared between the header and the scrollable table body. As the number of rows in the unscrolled table could be as much as 30 (assuming 2 double width rows), the scrollable table has to contain at least 15 rows.  It would be better if this was shorter, so that window scrolling is not required as well. (Rather than have a special case for I.E., all browsers now have a scrollable table body of 15 rows.) 

For  I.E., the righthand scroll bar of the scrolling table did not appear, even though the scrollable table displayed by I.E. went beyond the bottom of the window. To overcome this problem a blank space is positioned below the lowest position of the scrollable tables, This is applied to all browsers even though it seems it is only necessary for I.E. Because of the (enforced) overlong scrolling table and the blank space below it, two right hand scroll bars are displayed, one for the window and one for the scrollable table. 

The 'toggle' switch/button also had to be modified to accomodate I.E.s limitations. The 'toggle' needs to select and then remove the mapping facility on successive clicks. Rather than undoing all the changes to the DOM, after the mapping facility had been enabled, it was decided instead to reload the existing page. This is fairly quick, as the page will have already been loaded and will be stored in the browser's cache.  For all the browsers tested, except for I.E., to reload the page in its unmodified form, it was found sufficient to replace the existing href ="#" with href ="walk.html", the URL of the page.  With I.E. it was not only necessary to alter the 'onclick' attribute to onclick = "window.location.reload()" in order to reload the page but it was also necessary to ensure that the function 'enableReturn', which does this, was implemented first before any changes to the DOM of the web page had occured, otherwise a later version of the page rather than the original version was reloaded. Two passes of the function were also needed, which all browsers now undergo.

The name which appears on a button is given by the 'value' parameter within the 'input' tag. These names had to be kept especially short because I.E., unlike other browsers, added extra padding before and after the name, despite being operated in Standards mode (and not quirks mode). This caused the name to exceed the width of the button but more alarmingly also caused all the preceding tabs in the same table to be moved to the right and be stretched beyond their defined length, resulting in a very distorted display.

When plotting points on a map, it is necessary that the points appear in the correct position in relation to the map. Having to introduce corrections for differences in browser operation is best avoided as it would require the use of 'browser sniffing'.  To position an element, style="position: relative;" and/or style ="position: absolute;" can be used. It would appear that the default browser settings of 'margin' and 'padding' differ between browsers, because browsers plot points in different positions while using the same code, whichever type of positioning is used. To overcome this, both margin and padding values were set to zero in the style sheet, using *(margin:0; padding:0;), where * stands for the universal selector. The attribute: style = "position: absolute;"  was applied to all coding involving plotting points or the positioning of images of maps. The image tag for the maps was placed inside a table tag, with style="position: absolute;" applied to it, rather than to the image tag. This was necessary to make Netscape operate 'in synch.' when the  Form 'submit' button was pressed. on the Grid Reference page.  Unfortunately, no cure for Netscape 7.2's odd behaviour, when 'onclick' is used, has been found. This means that when using Netscape 7.2 with the Walks' Programme page, the letter M, (which causes a walk region to be plotted,) has to be double clicked rather than single clicked.  The special coding  to cure Netscape 7.2's problems has been applied to all the other browsers tested, in the interests of consistency of coding, even though they did not need it. Interestingly, Netscape 9.0, the latest version of Netscape, which was released after the design was completed, does not need a double click, showing there is a bug in Netscape 7.2.

At the time of writing, (Dec  2006,) the browsers tested to plot points correctly are the latest versions of Opera, Mozilla Firefox, Internet Explorer, Sea Monkey, AOL. and with limitations, Netscape 7.2, (as mentioned above). (Netscape 9.0 was subsequently checked in October 2007.) It is now understood that future development of Netscape has ceased. (March 2008.) 
The positions objects are displayed on the screen differ between browsers and can cause an aesthetic problem. This problem was cured when 'margin' and 'mapping' were set to zero..  To improve presentation, Opera and I.E. have had adjustments made to their layout. 

Interchanging walks and walk leaders occurs quite often and involves swapping rows of data in the tables of walks. Fortunately, the rows, containing details of the walks, can be relocated in the Walks Programme tables if required, without having to worry about re-identifying their position. This is because the keyword 'this' has been used rather than 'id' attributes to locate where a row is in a table. Moving the position of the columns in a walks' table is no problem either, as long as the corresponding header titles are moved too.  However the actual titles must not be changed, unless appropiate changes are made to the script in this script, This is because the location of the cell in a row containing the description of a walk, say, is found by locating the corresponding cell in the table header, in this case, the cell with the title 'Proposed Region of Walk'. Similarly the grid reference is found by first locating the title 'MAP' in the table header.

The title of a walk is produced, each time the walk's position is plotted.. The string containing this information is taken from the web page walk.html. The width of the space for the title is limited, so if the string is long, javascript is used  to split the string into two, with each substring on a separate line. The font size is also reduced.

The javascript coding for the walks' programme print facility is contained in printprog.js.

Scripts are loaded when required, some when the page is loaded, some when the mapping facility is selected, which is done by the function 'enable' when the boolean variable 'mapping' is 'true'.  This variable is initially set to 'false' in 'global.js' at window.onload. 
*/

function toggleMap(here){
  if(!document.getElementById){ return false; }
  if(!document.getElementsByTagName){ return false;}
  if(count>0){mapping= !mapping;}
  if(mapping){ //if1
  enable();
  swapPic(here);
  } //end of if 1
  } //eof toggleMap

function enable() { 
  count++;
  mapDisplay.on=false;
  if (count >1){ longTbl = false;}
  /* This function, 'enable', only runs if 'Select Mapping Facility' is clicked. 
  A second loading of js scripts is now initiated. 'enableReturn' sets up the mapping facility button to refresh to the original page layout. 
  'initialTableClass' will allow the selection of first month in walks' table and the rest are blanked out. 
  The window is fixed and the table for this month is made scrollable in the confines of the window.
 'getMonth' works out the position of the first month in the complete table in relation to the year.
 'getLink' makes use of 'getTable' to determine which table is displayed when one of the 'select month' buttons are clicked.
 A tertiary loading of scripts occurs at the first mapping, when 'mapPlot' plots the location of a selected walk on a map of the area.
 This is activated when the letter 'M' in a table row is clicked and an appropiate (hidden) map reference is present.*/
 
  if (longTbl){return false;}
  mapDisplay.on=true;//when mapDisplay is true, toolTip.js blocks the display of tooltips, because these get covered by maps
  addLoadEvent(enableReturn);
  enableReturn();
  addLoadEvent(initialTableClass);
  addLoadEvent(getLink);
  addLoadEvent(getTable);
  addLoadEvent(swapPic);
  addLoadEvent(mapPlot);
  addLoadEvent(findElemTd);
  addLoadEvent(newPic);
  addLoadEvent(plotSpot);
  addLoadEvent(plotName);
  initialTableClass();
  getLink();
  } //eof enable

function initialTableClass() {
   if (longTbl) return false;
 
   //remove 'go to top' tab.
   classGoToTop = new Array;
   classGoToTop = getElemsByClassName("tableTop","table");
   classGoToTop[0].style.display = "none";
   
    // Display M link
    lights = new Array;
    lights =  getElemsByClassName("lightup noprint","td");
    for (var i = 0; i < lights.length; i++) { 
      lights[i].style.visibility= "visible"; 
   } //end of for i
 
   // Display Map heading, using 2 dim array, for fun!
   var hdLights = new Array(4);
   for (var cl=1;cl<5; cl++){ //generating classNames head1, , , head4.
   cl = cl +' ';
   var classN ="head" + cl;
   hdLights[cl]=new Array
   hdLights[cl] =  getElemsByClassName(classN,"th");
   for (var i = 0; i < hdLights[cl].length; i++) {
   hdLights[cl][i].style.visibility = "visible";
   }// end of for i
   } // end of for cl
     
    //hide print-offer button
   var prButtonElem=document.getElementById("prButton");// div on walk.html, with class ="casing2"
   prButtonElem.style.visibility ="hidden"; 
   
   //hide cells and divs of printer message if it has been displayed
   if(prntInfoSet){ //if a prntInfoSet is initially set false in global.js and set ="true" by printprog.js when the print guide is displayed
   
   //hide cells of printer message
   prntContent.style.visibility = "hidden";
   } //end ifa
  
   // hide print-proceed button and walk months selector checkboxes and restore 'Diplay Month' links
   if(printMnthMenu>0){ // if b, only try to hide prntDiv and selxnDiv if they have been produced by printprog()
   prntDiv.style.visibility = "hidden";  //outer div of print guide
    selxnDiv.style.visibility = "hidden";// div tag in walk.html used for check boxes for printing walks in printprog.js
    printerClickDiv.style.visibility = "hidden"; // div tag of 'Print your Choice button' which activates Print dialogue box, uused in printprog.js
    
    //restore 'Display Month' links
   displayMonthLinksDiv = document.getElementById("getWalkTable");
   displayMonthLinksDiv.style.visibility = "visible";
    } //end if b
     
   //Remove className "print" or "noprint" from table headers and bodies
   clHdPr=new Array;
   clhdNopr=new Array;
   clScrlPr=new Array;
   clScrlNopr=new Array;
   
   clHdPr=getElemsByClassName("header print","div");
   for(var i=0; i<clHdPr.length;i++){
   clHdPr[i].className="header"; //make className="header"
   }  //end for i
     
   clHdNopr=getElemsByClassName("header noprint","div");
   for(var i=0; i<clHdNopr.length;i++){
   clHdNopr[i].className="header"; //make className="header"
   } // end for i
     
   clScrlPr=getElemsByClassName("scrollContent print","div");
   for(var i=0; i<clScrlPr.length;i++){
   clScrlPr[i].className="scrollContent"; //make className="ScrollContent"
   } // end for i
      
   clScrlNopr=getElemsByClassName("scrollContent noprint","div");
   for(var i=0; i<clScrlNopr.length;i++){
   clScrlNopr[i].className="scrollContent"; //make className="ScrollContent"
   }  // end for i  
     
    clScrlNopr=getElemsByClassName("scrollContent noprint","div");
     for(var i=0; i<clScrlNopr.length;i++){
   clScrlNopr[i].className="scrollContent"; //make className="ScrollContent"
   }  // end for i   
   
   //remove all scroll content - but for the first month.  classDivScroll array complied in initialise.js
   for (var i = 1; i < classDivScroll.length; i++) {
   tablePosn =0;
    classDivScroll[i].style.display = "none";
  } //end of for i

  //remove all headers of tables - but for the first table, (to go with first month's data).  classHeads compiled in initialise.js
  for (var i = 1; i < classHeads.length; i++) {
  classHeads[i].style.display = "none"; 
  } //end for i 

  // re-align header and table
  classHeads[0].style.left = "0pt"; 
  classDivScroll[0].style.left = "2pt";
  
  // height of walks table by fixing height of scrollable 'div'  element.
  classDivScroll[0].style.height ="212.5pt";
  classDivScroll[0].style.overflow= "auto";

  tableNow = 0;// selected table number
 
  // place blank space at bottom of table,so that right hand scroll bars appear on window, needed for I.E. but applied to all browsers
  spaceDiv=document.getElementById("space");
  spaceDiv.style.display = "block";
  //Blank out script which (mainly) underlies the map. I.E objects to this and so it is not called on to do this.!
  if(!document.all){ // if c
  walkPara =document.getElementById("walkInfo"); 
   mapPara =document.getElementById("mapInfo");
   walkPara.style.visibility ="hidden";
   mapPara.style.visibility = "hidden";
  } //end if c
  noBlink = true;
  } //eof initialTableClass

function getLink(){//used to select a table with a particular month's walks when that month's select tab is clicked.
   if (longTbl) return false;
   var ths = document.getElementsByTagName("th");
   for(var i=0; i<ths.length; i++){
   var labels = ths[i].getElementsByTagName("a");
   for(var j=0; j < labels.length; j++){
     labels[j].onclick = function(){ //anon
       return getTable(this); 
     } //eof anon
   } //end of for j
  } //end of for i
  } //eof getlLnk

function getTable( link) {
   nextPosn = posn;
   tablePosn = 0;
   for (var m = 0; m<12; m++){
   var match = false;
   var pattern =new RegExp(monthsArray[m] +'$','i'); // Make sure only the end of link is tested, as the link may contain a 3 letter month abbreviation elsewhere - upper or lower case.
   match = pattern.test(link);
   if(match ==true){ // match found, if1
   nextPosn = m;
   m =12;
   tablePosn = nextPosn - posn;
   if (tablePosn <0){tablePosn = tablePosn + 12;} //end of if - month in year of table
   } //end of if1
   } //end of for m
  
  // now select div, containing walks together with its heading, set height of div and make it scroll.
   classHeads[tableNow].style.display = "none";
   classDivScroll[tableNow].style.display = "none";
   tableNow = tablePosn;
   classHeads[tablePosn].style.display = "block";
   classDivScroll[tablePosn].style.display ="block"; 
   classDivScroll[tablePosn].style.height ="212.5pt";//Assuming 17 rows, (half of a max number of 34 in any month), each 12.5pt high
   classDivScroll[tablePosn].style.overflow= "auto";
   
   // re-align header and table
   classDivScroll[tablePosn].style.left = "2pt";
   classHeads[tablePosn].style.left = "0pt";
   
   // reset height of envelope round walk tables
   divEnv = document.getElementById("envelope");
   divEnv.style.height ="227.5"; // set to height of scrollable element + 15pt for header
  } //eof getTable


function enableReturn(){
  if (longTbl) return false;

  //Get paragraph element containing 'href' and 'onclick' attributes coupled to 'mapping' button
  paraBtn= document.getElementById("parag");

  //Get 'a' and then 'href' attributes of link
  aRef =new Array;
  aRef= paraBtn.getElementsByTagName("a");
  for(var i=0; i <aRef.length; i++){
  hrefAtt= aRef[i].getAttribute("href");
  if(hrefAtt != null){ //if1
  var locationHref = i;
  i = aRef.length; //jump to end of loop
  }// end of if1
  } //end of for i

  //Get 'onclick' attribute of link
  for(var i=0; i <aRef.length; i++){
  clickAtt= aRef[i].getAttribute("onclick");
  if(clickAtt != null){ //if1
  var locationClick = i;
  i = aRef.length; //jump to end of loop
  }// end of if1
  } //end of for i

  //Get 'onclick' and 'href' atttributes of link-replacements
  sourceClickElem= document.getElementById("backClick");
  sourceClick= sourceClickElem.getAttribute("onclick");
  sourceHref= sourceClickElem.getAttribute("href");

  // replace 'href' and 'onclick'
  aRef[locationHref].setAttribute("href",sourceHref);
  aRef[locationClick].setAttribute("onclick",sourceClick);

  //change colour and labelling of 'mapping facility' button
  var mapBtn = getElemsByClassName("casing noprint","div");
  mapBtn[0].style.backgroundColor ="#427826";
  bton = document.getElementById("btn");
  bton.value="Back to Basic Page";
  } //eof enableReturn

function swapPic(pic){//Overwrite instructions with an image of maps
  var oldX = 238; // This locates left edge of image 'smallCompositeMap.jpg', a compromise value between browsers
  if(!document.getElementById("place")) return false;
  if(!document.getElementById("walkArea")) return false;
 
  //Get element  (source) of image to replace site-map
  var source = document.getElementById("walkArea");
 
  //Get 'src' of this image
  var srcSource = source.getAttribute("src");

  //Get element of site-map picture
   var picPoint = document.getElementById("place");

  // apply new x-co-ord to absolute value of image of area-map
  var imgEnvElem = document.getElementById("place");
  imgEnvElem.style.position ="absolute";
  imgEnvElem.style.left = oldX +"px";

  //Replace site-map with area-map
   if(picPoint.nodeName !="IMG") return true;
   picPoint.setAttribute("src",srcSource);
   picPoint.style.zindex=-1;
   picPoint.style.visibility="visible"; 
   } //eof swapPic


function findElemTd(tag){
   while(tdTag != "TD"){
   tdNode = tag.parentNode;
   tdTag = tdNode.nodeName;
   tdNode = findElemTd(tdNode);
   } //end of while
   return tdNode;
   } //eof findElemTd


function mapPlot(walk){
   if(!document.getElementsByTagName) {return false;}
   tdTag="";
   scaleElem = document.getElementById("scale"); //get paragraph element of map scale notice before it is needed
 
   //locate which column the walk-name and its map reference is
   tdElem=findElemTd(walk);
   rowElem=tdElem.parentNode;
   titleTxt="";
   posnWalk=-1;
   posnGridRef=-1;
   posnGrade=-1;
   var ths = classHeads[tableNow].getElementsByTagName("th");
   for(var i=0; i<ths.length; i++){
   titleTxt = getTextValue(ths[i]);

   re=/Proposed Region of Walk/; // Matching with regular expression needed as 'getTextValue' leaves a space, with I.E., if any leading spaces exist.
   result = titleTxt.match(re);
   if(result != null){ //if a
   posnWalk=i;
   }// end of if a

   re=/Grid Ref/;// Matching with regular expression needed as 'getTextValue' leaves a space, with I.E., if any leading spaces exist.
   result = titleTxt.match(re);
  if(result != null){ //if b
  // if(titleTxt =="Grid Ref"){ //if b
   posnGridRef=i;
   } //end of if b

   re=/Grd/;//Heading of Grade column
   result=titleTxt.match(re);
   if(result != null){ //if c
   posnGrade=i;
   } //end if c
   } //end of for i

   //Get walk name and its grid reference
   var tds = rowElem.getElementsByTagName("td")

   // Produce a correction if number of tds are reduced by the use of the 'colspan' attribute.
   for (k=0; k<tds.length;k++){
   att = tds[k].getAttribute("colspan");
   if (att !=null){ //if1
   if( k<posnWalk){ //if2
   posnWalk=posnWalk +1- att;
   } //end if2
   if(k<posnGridRef){ //if3
   posnGridRef = posnGridRef +1 - att;
   } //end if3
   if(k<posnGrade){ //if4
    posnGrade=posnGrade +1-att;
   } //end if4
   } //end if1
   } //end for

   walkDesc=getTextValue(tds[posnWalk]);

  //Split the string walkDesc in two, if it is too long to fit on one line
  var toolong =false;
  var extralong =false;
  var ultralong=false;
  if (walkDesc.length>37){
   toolong=true;}
   if (walkDesc.length>72){ 
   extralong=true;}
    if (walkDesc.length>96){ 
   ultralong=true;}
 
   var phraselength=0;
   var walkDesc1="";
   var walkDesc2="";
   var walkDesc3="";
   var walkDesc4="";
   var words=walkDesc.split(" "); //Split walkDesc into words array using space as separator
   for (ws=0; ws<words.length;ws++){
   phraselength = phraselength +1 +words[ws].length; //increment phraselength by length of each word plus 1 for a space
   if (phraselength<38){ //if2
    walkDesc1=walkDesc1+words[ws] +" "; // start with nothing and add a word plus space (separator) to walkDesc while length <39
   } //end if 2
    else if (phraselength<73){ //else if1
    walkDesc2=walkDesc2+words[ws]+" "; // words build up here (to be used as a second line)
   }//end else if1
   
    else if (phraselength<97){ //else if2
    walkDesc3=walkDesc3+words[ws]+" "; // words build up here (to be used as a third line)
   }//end else if2
    else {
    walkDesc4=walkDesc4+words[ws]+" "; // words build up here (to be used as a fourth line)
   } //end else
  }//end for 

     walkDesc=walkDesc1;

    var walkRef = getTextValue(tds[posnGridRef]);
     if(walkRef == undefined) {return false;}
     var gradeChr = getTextValue(tds[posnGrade]);
     if(gradeChr == undefined) {return false;}
 
      //Get map code, strings for easting and northing from map reference
      var lnStr = walkRef.length;
      halfStr = lnStr/2
     if(lnStr - Math.floor(halfStr)*2 ==1){return false;}//map reference is odd length, therefore faulty
      subLen = (lnStr - 2)/2;
      subBrk = (lnStr +2)/2;
      var mapCodeStr =walkRef.substring(0,2).toUpperCase()// Converting any lowercase letters to upper case;
      var eastStr = walkRef.substring(2,subBrk);
      var northStr = walkRef.substring(subBrk, lnStr);
    
      //Convert strings to numbers
      var k =Math.pow(10,(subLen-2))
      var eBasic = parseInt(eastStr,10); // ensure base 10, as some numbers will start with 0 and would  otherwise be considered octal
      var nBasic = parseInt(northStr,10);
      var eCorrected =eval(eBasic /k);
      var nCorrected =eval(nBasic /k);

      //Check for faulty map codes and adjust values of eastings and northings accordingly
      if ((mapCodeStr != "NX" ) && (mapCodeStr != "NY" ) && (mapCodeStr != "NZ" ) && (mapCodeStr != "SC" ) && (mapCodeStr != "SD" ) && (mapCodeStr != "SE" )){
      return false; //poorMapRef;
      }else{
      if(mapCodeStr == "NX" ) {nCorrected = nCorrected + 100;}
      if(mapCodeStr == "NY" ) {nCorrected = nCorrected + 100; eCorrected = eCorrected + 100;}
      if(mapCodeStr == "NZ" ) {nCorrected = nCorrected + 100; eCorrected = eCorrected + 200;}
      if(mapCodeStr == "SD" ) {eCorrected = eCorrected + 100;}
      if(mapCodeStr == "SE" ) {eCorrected = eCorrected + 200;}
      } //end of else
   
      //now decide which map to use
       hRefer ="images/walkareamap21c.jpg";/////////////////////////////////////////////////////////////////////////////////////////////////
       mapNo = 21;
      if((nCorrected > 130) && (eCorrected > 150)){ hRefer="images/walkareamap12a.jpg"; mapNo = 12;}
      if((nCorrected > 130) && (eCorrected <= 150)){ hRefer="images/walkareamap11a.jpg"; mapNo = 11;}
      if((nCorrected <=130) && (eCorrected > 150)){ hRefer="images/walkareamap22d.jpg"; mapNo = 22;} ////////////////////////////////
      
      //display appropiate map
      newPic(hRefer);
      
      //correction for screen n and map n being plotted in opposite directions by adding 200 to ensure +ve value
      nCorrected = 200 - nCorrected;
      
      // set scale correction factors
      var nFactor=7.99;// conversion factor, to convert from (northerly) grid references to pixels. nFactor is fixed for all browsers and map images, eFactor (easterly) varies.See below.
      nCorrected = nCorrected * nFactor;
     
      //adjust offsets according to map selected.  Values for Mozilla Firefox are set and altered later for Opera and I.E.
      if(mapNo == 11 ){var eOffset = -497; var nOffset = -61;var eFactor = 8.55;}//-497, -61 
      if(mapNo == 12 ){var eOffset = -915; var nOffset = -64;var eFactor = 8.50;}//-915, -64 
      if(mapNo == 21 ){var eOffset = -485; var nOffset = -434;var eFactor = 8.45;}//-485, -434 
      if(mapNo == 22 ){var eOffset = -885; var nOffset = -435;var eFactor = 8.35;}//-885, -435 
    
    if(document.addEventListener && window.opera){ // Corrections for Opera
      if(mapNo == 11 ){var eOffset = -487; var nOffset = -56;var eFactor = 8.55;}//-487, -56 
      if(mapNo == 12 ){var eOffset = -897; var nOffset = -58;var eFactor = 8.45;}//-897, -58 
      if(mapNo == 21 ){var eOffset = -474; var nOffset = -426;var eFactor = 8.45;}//-474, -426 
      if(mapNo == 22 ){var eOffset = -875; var nOffset = -428;var eFactor = 8.35;}//-875, -428 
    }
    else if(document.all){ //Corrections for I.E
      if(mapNo == 11 ){var eOffset = -488; var nOffset = -54;var eFactor = 8.55;}//-488, -54 
      if(mapNo == 12 ){var eOffset = -906; var nOffset = -57;var eFactor = 8.50;}//-906, -57 
      if(mapNo == 21 ){var eOffset = -474; var nOffset = -427;var eFactor = 8.45;}//-474, -427 
      if(mapNo == 22 ){var eOffset = -876; var nOffset = -429;var eFactor = 8.35;}//-876, -429
    } //end else if
    
     eCorrected = eCorrected * eFactor;
      eCorrected = eCorrected + eOffset;
      nCorrected = nCorrected + nOffset;
     
      //Plot a spot where region of walk is
       plotSpot(eCorrected,nCorrected);

      // compile message in p, giving name of walk plotted
      var walkPara=document.createElement("p");
      walkPara.className="noprint";
      var boldWds= document.createElement("b");
      boldWds.className="noprint";
      var brk1 = document.createElement("br");
      brk1.className="noprint";
      var italcWds1  = document.createElement("em");
      var walkRegn ="Plot of REGION of walk: ";
      var newTxt0 = document.createTextNode(walkRegn);
      boldWds.appendChild(newTxt0);
      var newTxt1 = document.createTextNode(walkDesc);
      italcWds1.appendChild(newTxt1);
      walkPara.appendChild(boldWds);
      walkPara.appendChild(brk1);
      walkPara.appendChild(italcWds1); //this is first line. possibly only line, stating walk destination, when plotting walk position.
  
      //Set up co-ords for positioning walkPara
      var corxnWlkNotisX=0; //settings for Mozilla Firefox
      var corxnWlkNotisY=0;
      var corxnOSBtnX= 0;
      var corxnOSBtnY =0;
       if(document.addEventListener && window.opera){ // if1, Opera
      corxnWlkNotisY =3; //Correction for Opera -19 
      corxnOSBtnX = -10; //Correction for Opera -10
      corxnOSBtnY=-10;//Correction for Opera  -10
     } //end if1
     else if(document.all){
     corxnWlkNotis = -50; //Correction for I.E. -50
     corxnOSBtnX= -80; //Correction for I.E. -80
     corxnOSBtnY = -17; //Correction for I.E. -17
     } //end of else if
     
      xNamePos =10 + corxnWlkNotisX;  //locates horizontal position of information on Region of walk and grade
      yNamePos = 485 + corxnWlkNotisY; // locates vertical position of information on Region of walk and grade
      if(! toolong){
      plotName(xNamePos,yNamePos,walkPara);
      }
     
       //Add extra lines to walk destination if too long for one line. 
       //Doing this after plotName above, removes the word 'undefined', which would appear on the 3rd line.
       if (toolong){ //if1
         var brk2 = document.createElement("br");// you cannot use brk1 twice
         brk2.className="noprint";
         var italcWds2  = document.createElement("em");
         var newTxt2 = document.createTextNode(walkDesc2);
         italcWds2.appendChild(newTxt2);
         walkPara.appendChild(brk2);
         walkPara.appendChild(italcWds2); //this is possible second line giving rest of walk destination, when plotting its position.  
      }  //end if1
     
       if (extralong){ //if1
         var brk3 = document.createElement("br");// a further br
         brk3.className="noprint";
         var italcWds3  = document.createElement("em");
         var newTxt3 = document.createTextNode(walkDesc3);
         italcWds3.appendChild(newTxt3);
         walkPara.appendChild(brk3);
         walkPara.appendChild(italcWds3); //this is possible third line giving rest of walk destination, when plotting its position.  
      }  //end if1
     
        if (ultralong){ //if1
         var brk4 = document.createElement("br");// a further br
         brk4.className="noprint";
         var italcWds4  = document.createElement("em");
         var newTxt4 = document.createTextNode(walkDesc4);
         italcWds4.appendChild(newTxt4);
         walkPara.appendChild(brk4);
         walkPara.appendChild(italcWds4); //this is possible third line giving rest of walk destination, when plotting its position. 
      }  //end if1
     
      //Show Grid reference
       var gridTitle ="(Grid Reference: ";
       var newTxtGridRef = document.createTextNode("(Grid Reference; " +walkRef +")");
       var boldWds1= document.createElement("b");
       boldWds1.className="noprint"; 
       boldWds1.appendChild(newTxtGridRef);
       var brkGridRef = document.createElement("br");
        brkGridRef.className="noprint";
       walkPara.appendChild(brkGridRef);
       walkPara.appendChild(boldWds1);// This adds Grid reference in Bold
       
        //Show Grade of walk
        var walkGrade="";
        if(gradeChr==""){walkGrade="unspecified";}
        if(gradeChr=="Ch"){walkGrade="Challenging";}
        if(gradeChr=="S"){walkGrade="Strenuous";}
        if(gradeChr=="M"){walkGrade="Moderate";}
        if(gradeChr=="L"){walkGrade="Leisurely";}
        var newTxtGrade =  document.createTextNode("(Walk Grade: " +walkGrade +")");
        var boldWds2= document.createElement("b");
        boldWds2.className="noprint"; 
        boldWds2.appendChild(newTxtGrade);
        var brkWalkGrade = document.createElement("br");
        brkWalkGrade.className="noprint";
       walkPara.appendChild(brkWalkGrade);
       walkPara.appendChild(boldWds2);// This adds walk grade in Bold
     
        // show note on scale of map. 
        var spanMapScaleNote= document.createElement("span");
        spanMapScaleNote.style.color="#006533";
        spanMapScaleNote.className="noprint";
        var mapScaleTxtNode =document.createTextNode("(Diagram's scale only approximate.)");
        var brkMapScale= document.createElement("br");
        spanMapScaleNote.appendChild(mapScaleTxtNode);
      
        walkPara.appendChild(brkMapScale);
        walkPara.appendChild(spanMapScaleNote);// This adds note on scale of sketch maps in colour turquoise.
        plotName(xNamePos,yNamePos,walkPara); 
     
      //Place 'OS map' notice below name of walk.This button is doubleclick to differentiate it from the 'Mapping facility' button.
      revealOSMapBtn(); //Netscape needs this action to be repeated otherwise area map is not fully revealed
      revealOSMapBtn(); //Repetition - see line above
      scaleElem.style.visibility = "hidden"; 
      
      }//end of mapPlot
 
function plotName(x,y, paraWlk) {
  var basicPara=document.getElementsByTagName("p")[0];// use this method, rather than document.getElementById, because latter fails with repeated usage.
  basicPara.parentNode.replaceChild(paraWlk,basicPara);
  var newPara = document.getElementsByTagName("p")[0];
  newPara.style.position ="absolute";
  newPara.style.left = x + "px";
  newPara.style.top = y + "px";
  newPara.style.color ="#550033";
  newPara.style.fontFamily ='Arial';
  newPara.style.fontSize ="10pt";
  newPara.style.display ="inline";
  newPara.style.visibility = "visible";
  newPara.style.zIndex ="20";
  } //end of plotName


function newPic(source){
  //A place holder image, with id = "place", is placed on walk.html, with its attributes: width, height, position (absolute), top and left) specified there.
  var picPoint = document.getElementById("place"); // place of old picture to be replaced
   if(picPoint.nodeName !="IMG") return true;
   picPoint.setAttribute("src",source);
   } //eof newPic


function revealOSMapBtn(){
      osMapBtnElem = document.getElementById("osMapBtn");
       osMapBtnElem.style.visibility = "visible";//show button "Look for OS Map"
   } //eof revealOSMapBtn

function plotSpot(x,y) {
  if (!document.getElementById("spot")) return false;
  elemSpot = document.getElementById("spot");
  elemSpot.style.position ="absolute";
  elemSpot.style.left = x + "px";
  elemSpot.style.top = y + "px";
  elemSpot.style.color ="#000000";
  elemSpot.style.fontWeight = "bold";
  elemSpot.style.fontFamily ='Arial';
  elemSpot.style.display = "inline";
  if (noBlink){
  blink(); // set blink once
  noBlink = false;
  }
  } //end of plotSpot
 


function blink() {
  blTimer = null; // blink timer
  blOn = true; // blink state
  blnkrs = new Array; // array of spans
  var blCount = 0;
  blnkrs[blCount] = elemSpot;
  blCount++;

  hue1 ="#0044ff"; //colours of the spot
  hue2 ="#ff0000";
  hue3="#00ff00";
  hue4="#000000"
   hue=hue1;
  num=0;
  
  //set blink time in m.secs between blinks, 500 = 1/2 second
  blinkTimer(500);
  }//eof blink


function blinkTimer(ival) {
  blinkIt();
  blTimer = window.setTimeout('blinkTimer(' + ival + ')', ival);
  } // eof blinkTimer


function blinkIt() {
  for (var i = 0; i < blnkrs.length; i++) {
  if (blOn == true) {
  blnkrs[i].style.visibility = "hidden";
  }
  else {
  blnkrs[i].style.visibility = "visible";
  blnkrs[i].style.color =hue;
  }
  }//end of for i
  blOn =!blOn;
  if (num==2){
  hue=hue1;
  }
  if (num ==4){
  hue=hue2;
  }
  if( num ==6){
  hue= hue3;
  }
  if(num>7){
  hue = hue4;
  num=0;
  }
  num++;
  }//eof blinkit

function seeOS(){ //function called from walk.html by clicking paragraph containing 'Find whichOS map is applicable.'
  if(mapNo == 11){hRefer="images/OS11.jpg";}
  if(mapNo ==12){hRefer="images/OS12.jpg";}
  if(mapNo == 21){hRefer="images/OS21.jpg";}
  if(mapNo == 22){hRefer="images/OS22.jpg";}
  osMapBtnElem.style.visibility = "hidden"; //remove "Get OS Map Title " button
  scaleElem.style.visibility = "visible";
  newPic(hRefer);
 } //eof seeOS

addLoadEvent(toggleMap);
addLoadEvent(enable);