/*
 This script produces the walks' programme print facility on the web page, walk.html.  It uses many of the methods used in the script toggleMap.js, which has the code for the mapping facility. The print facility incorporates checkboxes, which provide the ability to select and print out any one or more months of the displayed walks' programme. The class 'noprint' has been added to all parts of the web page, walk.html, which are not required when the walks' programme is printed, such as the the navigation bars, the site map, etc. Those months not selected are also given the class 'noprint', which is evoked when the programme is printed using @media print{.noprint {display:none;}}. The months selected for printing are assigned the class 'print' which is evoked using @media print{.print {display:block;}}. 

Because the walks' programmes are contained in a div tag which is not positioned at the top of the body of the document, it is necessary to reposition this div, when the print facility is activated, otherwise the printout has a large gap at the top of the page. To do this, without it appearing to move, it is placed under a white image, which is already below the navigation buttons and messages. The white image is also temporarily extended to cover all the screen during this process, so that none of the walks' programmes are visible.

Because the various browsers and printers in use will vary in how they have been set-up, a note giving suggestions of suitable browser and printer settings has been added. 

The print dialogue box is activated by the function: 'window.print();'. This operation has to be delayed by a short time, using 'setTimeout("function",delay);' so that the walks' programmes that are selected for printing are already in position at the top of the document. Without the delay, a blank printout is likely, depending on the browser used.

All five browsers tested, Mozilla Firefox, Safari, Google Chrome, Opera and Internet Explorer, will print a single month of walks on one side of A4 paper in landscape orientation. (The printer used was a Cannon Pixma iP6700D.) The first 3 of these browsers also give an acceptable printout in portrait orientation. In fact 2 months walks, even 3 depending on the number of walks in a month, can be fitted on one side. Trying different page setups in portrait orientation with Internet Explorer and Opera was unsuccessful, as the right hand edge of the walks' programme was always missing, Opera clipping off less than I.E..
Latest versions of Google Chrome have their own preview window, which starts as soon as the print dialogue box is activated using 'window.print'. Because this action is different from the other browsers, a small change in procedure was needed, otherwise the preview window did not contain the walks' programmes previously selected. Some extra code had to be directed at Chrome only. 'Object detection could not be used to detect the browser, because Safari and Chrome both use the same engine and usually act in a similar way, so the 'navigator.userAgent.indexOf' property was used instead to identify GoogleChrome from Safari and ensure that the change in procedure affected Google Chrome only.
 
 */
  
 function printprog() {
  if(!document.createTextNode) return false;
  paras=new Array();
  prntContent=document.getElementById("printGuide"); //this div will sit inside prntDiv
paras=prntContent.getElementsByTagName("p");
 for(i=0;i<paras.length;i++){
 paras[i].style.display="block";
 }
  
  //create inner div element for Print guide 
  prntContent.className="noprint";
  prntContent.style.width ="575px";
  prntContent.style.position = "relative";
  prntContent.style.left="9px";
  prntContent.style.top="10px";
  prntContent.style.height="452px";
  prntContent.className = "guideContent";
  prntContent.style.display="block";

  //create outer div element for Print Guide
   prntDiv= document.createElement("div"); 
  prntDiv.className="noprint";
  prntDiv.style.position = "absolute";
  prntDiv.style.zIndex=0;
  prntDiv.style.width="605px";
  prntDiv.style.height="484px";
  prntDiv.style.left="265px";
  prntDiv.style.top="145px";
  prntDiv.style.backgroundColor = "#76a";
  prntDiv.style.visibility = "visible";
  prntDiv.style.zIndex=20;
  
  //append prntContent to prntDiv and prntDiv to document
  prntDiv.appendChild(prntContent);
  document.body.appendChild(prntDiv);
  
  prntInfoSet = true; //this is needed by toggleMap.js, so that Print Guide is removed, if displayed, before Mapping facility is activated. 'prntInfoSet' needs to be a global variable in global.js
  
  // Make a set of checkboxes in a form, formA
  if(printMnthMenu==0){ //only generate selxnDiv once so preventing multiple rows of check boxes. printMnthMenu set = 0 in initialise.js. - if 1
  selxnDiv = document.getElementById("printSelxn");//div tag in walk.html
  selxnDiv.className = "noprint";
  
  
   /*
  The font size and colour and background colour of the basic check box is given in walkextra.css as div#prntSelxn form. 
  This can be over-ridden inside it, by appending span tags with different style settings. In this example the span background colours match those of selxnDiv.
  */

  var formA = document.createElement("form");
  formA.className="noprint";
  var pickLbl = document.createElement("label")
  var lblSpan =document.createElement("span")
  var txt = document.createTextNode(" SELECT Months to print out. ");
  lblSpan.appendChild(txt);
  lblSpan.className ="PrntMessage1";//gives font size, colour and background colour to the value 'SELECT Months to print out''
  pickLbl.appendChild(lblSpan);// add span tag to label tag
  formA.appendChild(pickLbl); // add label to form
  var ip = new Array; var lbl = new Array; var spn = new Array;

  for(i=0; i< tblCount; i++){
  ip[i] = document.createElement("input");
  lbl[i] = document.createElement("label");
  
  spn[i] = document.createElement("span");
  spn[i].className = "mnthLbl"; // gives fontsize, colour and background colour for names of 'Month Year' in check box
  ip[i].setAttribute("type","checkbox");
  ip[i].setAttribute("value",i);
  ip[i].setAttribute("name","mnthChoice");
  var txt = document.createTextNode(list[i]);
  spn[i].appendChild(txt);
  lbl[i].appendChild(spn[i]);
  formA.appendChild(lbl[i]);// append a sequence of labels and inputs, 'tblCount' in number, to the form
  formA.appendChild(ip[i]);
  } // end for i
  selxnDiv.appendChild(formA);
  } // end of if 1
  
  //remove 'Display Month' links
  displayMonthLinksDiv = document.getElementById("getWalkTable");
  displayMonthLinksDiv.style.visibility = "hidden";
  if(printMnthMenu>0)selxnDiv.style.display="block"; // restore after 'removeChkBxs' has hidden selxnDiv

  //Make a submit button in a form, formB
  if(printMnthMenu==0){ // only generate printerClickDiv once. - if 2

  // now get onclick for 'Print Your Choice' button
  prntMnthsClkprntPara1 = document.getElementById("submitMnths"); //p tag on walk.html
  prntMnthsClkIp = prntMnthsClkprntPara1.getElementsByTagName("input");
  prntMnthsClk= prntMnthsClkIp[0].getAttribute("onclick");
  printerClickDiv = document.getElementById("prnt");// div tag on walk.html
  printerClickDiv.className = "noprint"; 
  var formB = document.createElement("form");
  formB.className="noprint";
  ipSbmt = document.createElement("input");

  // Set various attributes to input tag
  ipSbmt.setAttribute("type","submit");
  ipSbmt.setAttribute("value","Print Your Choice");
  ipSbmt.className = "PrntMessage2"; //gives font size and colour and background colour to the value 'PrintYour Choice'
  ipSbmt.setAttribute("onclick",prntMnthsClk);
  ipSbmt.style.width = "200px"; // Gives width of message inside 'Print Your Choice'.. this is 4px less than div#prnt form in walkextra.css
  formB.appendChild(ipSbmt); //append input tag to form tag
  printerClickDiv.appendChild(formB); // append form to div tag
  } // end of if 2

  if(printMnthMenu>0){printerClickDiv.style.display="block";} // restore after 'removeChkBxs' has hidden printerClckDiv
  printMnthMenu++; //
  alterPrBtn();
  } //eof printprog

function alterPrBtn(){
  // change colour and labelling of Enable Print Facility button.
  prBtn =document.getElementById("prButton"); //global var
  originalColour=prBtn.style.backgroundColor;// save original color to replace later
  prBtn.style.backgroundColor = "#cb3";
  btnPr = new Array //global var
  btnPr = getElemsByClassName("prntMessage1","input");
  originalValue=btnPr[0].value; // save value to replace later
  btnPr[0].value = "Clear print facility"; 
  originalClkSource=btnPr[0].getAttribute("onclick");

  // Get new onclick attribute and set btnPr[0] with it
  clickSourceprntPara1 = document.getElementById("noBxs");// this paragraph is on walk.html and includes <input onclick="removeChkBxs(); return false; " /> 
  clickSourceIp = clickSourceprntPara1.getElementsByTagName("input");//input tag is 'floating' on walk.html
  clickSource= clickSourceIp[0].getAttribute("onclick");
  btnPr[0].setAttribute("onclick",clickSource);
  
  //if(document.all &&!window.opera){btnPr[0].style.width = "230px";} // I.E. only
  btnPr[0].style.width = "130px"; // width of messages 'Clear print facility' and 'Print walks selection'.
  } //eof alterPrBtn

function removeChkBxs() { //This function is called by onclick="removeChkBxs() on walk.html
//This function not only removes check boxes but removes Print Guide and restores the the 'Display Month' links. For Chrome browser divEnvelope and class names of walks are restored too.
  selxnDiv.style.display = "none"; // Remove checkbox div
  printerClickDiv.style.display ="none";    // Remove 'Print Your Choice' button
  resetPrBtn();
  prntDiv.style.visibility = "hidden";
  prntContent.style.display = "none";
  
   //restore 'Display Month' links
   displayMonthLinksDiv = document.getElementById("getWalkTable");
   displayMonthLinksDiv.style.visibility = "visible";
   var chromePresent =navigator.userAgent.toLowerCase().indexOf('chrome')>-1; 
   if(chromePresent){returnToPreviousState();} //Chrome needs returning to previous state delayed until now when restoration to full display of walks programme occurs
  } //eof removeChkBxs

function resetPrBtn(){
prBtn.style.backgroundColor = originalColour; //replace original colour
btnPr[0].value = originalValue; // replace original value
btnPr[0].setAttribute("onclick",originalClkSource);
} //eof resetPrBtn

function prntMnthsWlks() {
  // Initially set classes of all headers and table bodies to 'noprint'
  for(var i=0; i<classHeads.length; i++){  // classHeads is an array of divs with className ="header". formed in initialise.js
  classHeads[i].className="noprint";
  classDivScroll[i].className = "noprint";// classDivScroll is an array of divs with className ="scrollContent". formed in initialise.js
  } //end for i

  //monthList = forms[0].mnthChoice;// original line
  var forms = document.getElementsByTagName("form");
  for(g=0;g<forms.length;g++){
  inpList = forms[g].getElementsByTagName("input");
  if (inpList[0].getAttribute("name") =="mnthChoice"){ // we have the form with inputs with names = "mnthChoice" - if 1
  prntChkd();
  g=forms.length; // get out of loop
  }// end if 1
  } // end for g
  } // eof prntMnthsWlks

function prntChkd(){
  //Get divs containing months walks which have been checked
  for(var i=0; i< inpList.length;i++){
  if(inpList[i].checked){// if1, inpList will be true if check box has been checked. It has tick in it.
  var k = inpList[i].value;
  
  //Apply className 'print' to those monthly lists of walks, which correspond to the checks in the checkboxes and append them to prntPara1DivHolder for printing
  classHeads[k].className="print noscreen";
  classDivScroll[k].className="print noscreen";
  classHeads[k].style.position="relative";
  classDivScroll[k].style.position="relative"; 
  } //end if1
  } //end for i
   
  //raise position of div with id = envelope, which holds walks programmes, to top of screen for printing. It is then hidden under 'whiteBckGrnd' image in walk.html
  divEnvelope=document.getElementById("envelope");
  divEnvelope.className="print";
  divEnvelope.style.zIndex=-21;
  divEnvelope.style.position="absolute";
  divEnvelope.style.top=40+"px"; 
  divEnvelope.style.left=-50+"px"; 

  //extend height of white background.
  blankBG=document.getElementById("whiteBg");// get div with id="whiteBG" containing white image. Note naming the variable as whiteBg, the same as the id, is not acceptable
  blankImg=document.getElementById("whiteImg");//get white image from div
  blankImg.style.height="3000px";

//Alter font-family to serif for printing
walkTables[i].style.fontFamily="Paletino,Garamond,'Times New Roman',serif";

  setTimeout("activatePrntDialogueBox()",200);// delay the activation of the print dialogue box
 var chromePresent =navigator.userAgent.toLowerCase().indexOf('chrome')>-1;  
 if(!chromePresent){setTimeout("returnToPreviousState()",600);}// Allow time for printer to gather the data it needs. 
  } // eof prntChkd


  function activatePrntDialogueBox(){
  //activate Print dialogue box
  window.print();
  } //eof activatePrintDialogue Box

  function returnToPreviousState(){
  //reset height of white background
  blankBG=document.getElementById("whiteBG");// get image with id ="whiteImg"
  blankBG.style.height="900px";

  //reset position and class of walk tables after printing
  divEnvelope=document.getElementById("envelope");
  divEnvelope.className="noprint";
  divEnvelope.style.zIndex=1;
  divEnvelope.style.position="absolute";
  divEnvelope.style.top=675+"px";
  divEnvelope.style.left=20+"px";
 
 //Reste fon-family to Arial, sans-serif.
 for(i=0;i<walkTables.length;i++){
 walkTables[i].style.fontFamily="Arial, Helvetica, sans-serif";
 }
 
 //Apply className 'noprint' to those monthly list of walks, which correspond to the checks in the checkboxes 
  for(var i=0; i< inpList.length;i++){
  if(inpList[i].checked){// if 1
  var k = inpList[i].value;
  classHeads[k].className="noprint";
  classDivScroll[k].className="noprint";
  classHeads[k].style.position="relative";
  classHeads[k].style.top=0+"px"; 
  classDivScroll[k].style.position="relative"; 
  classDivScroll[k].style.top=0+"px"; 
   } // end if 1
  } // end for i
  } //eof returnToPreviousState
  chromePresent =navigator.userAgent.toLowerCase().indexOf('chrome')>-1;