/*
 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 three browsers tested, Opera, Mozilla Firefox 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 2 of these browsers also give an acceptable printout in portrait orientation. In fact 2 months walks can be fitted on one side. Trying different page setups in portrait orientation with Internet Explorer was unsuccessful, as the right hand edge of the programme was always missing! 
 
 */
 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. printMnthMenu set = 0 in initialise.js. - if 1
  selxnDiv = document.getElementById("printSelxn");//div tag in walk.html
  selxnDiv.className = "noprint";
  
  //remove 'Display Month' links
  displayMonthLinksDiv = document.getElementById("getWalkTable");
  displayMonthLinksDiv.style.visibility = "hidden";

  /* 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
  
  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 paragraphis 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 not only removes check boxes but removes Print Guide and restores the the 'Display Month' links
  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";
  } //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[i].className="noprint";
  classDivScroll[i].className = "noprint";
  } //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";

  setTimeout("activatePrntDialogueBox()",200);// delay the activation of the print dialogue box
  setTimeout("returnToPreviousState()",400);
  } // eof prntChkd

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

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";
  
  //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