var i
 var display = new Array()
 var display_color = new Array()
 var bg_image = new Array()
 var ans = new Array()
 var ques = new Array()
 var text_pattern = new Array()
 var collect = ''
 var newId = new Array()
 var dateString = "" // This is the date for next puzzle. Change this for different week
 var puzzleNum = "1"               // This is the puzzle number in the series. Change this for different week
 var now = new Date();
 var puzzleWeek = "Week#" + getWeek(y2k(now.getYear()),now.getMonth(),now.getDate());//this is a custom function      

 //change this for different week/////////////////////////////////////////////////////////////////////////////////////////////////////
 newId[0] = "e00" // Explanations:
 newId[1] = "e19" // newId[2] = "a25" first letter 'a' corresponds to that particular fortnight a=first, b=second, etc  
 newId[2] = "e25" //                  second character '2' corresponds to the number of the puzzle, puzzle#2 in this case   
                  //                  third character '4' corresponds to the type of puzzle, 4 being a blank in the middle
                  /////////////////////////////////////////////////////////////////////////////////////////////////////
  
 ans[0] = "a"
 ans[1] = "g"
 ans[2] = "o"
 ans[3] = "w"
 ans[4] = "a"
 ans[5] = "r"
 ans[6] = "e"
 ans[7] = "y"
 ans[8] = "e"

 ques[0] = "at a certain time in the past."
 ques[1] = "the act of fighting between nations."
 ques[2] = "an organ in the human being for seeing."
 ques[3] = "a feeling of great respect for something."
 ques[4] = "cheerful and excited."
 ques[5] = "the raw material which metals are extracted from."

//to create realtime week number since there's no getWeek()
function y2k(number) { return (number < 1000) ? number + 1900 : number; };
function getWeek(year,month,day) 
{var when = new Date(year,month,day);
 var newYear = new Date(year,0,1);
 var offset = 7 + 1 - newYear.getDay();
 if (offset == 8) offset = 1;
 var daynum = ((Date.UTC(y2k(year),when.getMonth(),when.getDate(),0,0,0) - Date.UTC(y2k(year),0,1,0,0,0)) /1000/60/60/24) + 1;
 var weeknum = Math.floor((daynum-offset+7)/7);
 if (weeknum == 0) 
 {year--;
  var prevNewYear = new Date(year,0,1);
  var prevOffset = 7 + 1 - prevNewYear.getDay();
  if (prevOffset == 2 || prevOffset == 8) weeknum = 53; else weeknum = 52;
 }
 return weeknum;
}

 for (i=0;i<3;i++)
{catchNode = document.getElementById(i);
 catchNode.setAttribute('id',newId[i]); // to change the id/configuration of the puzzles
 this_icon = "icon_choice" + i
 which_icon = "image/box" + newId[i].charAt('2') +".jpg"
 catchicon_choice = document.getElementById(this_icon)
 catchicon_choice.setAttribute('src',which_icon) // to change to the right icon for the puzzles
}

 puzzleText = " Puzzle#" + puzzleNum + " " + puzzleWeek
 thisText = document.createTextNode(puzzleText);
 textNode = document.getElementById("puzzle_number_text");
 textNode.appendChild(thisText) // to insert the corresponding text on the title

/*
 nextDate = document.createTextNode(dateString);
 dateNode = document.getElementById("puzzle_number_notes_text");
 dateNode.appendChild(nextDate); // to change to the date for the next puzzle
*/
 
function mouseover(thisId)
{var changethis ="choice" + thisId.charAt('1')
 var changethistoo = "select_content" + thisId.charAt('1')
 document.getElementById(changethis).style.backgroundColor = '#1a4d91'; // to change the background color of the menu when it is selected
 document.getElementById(changethistoo).style.color='#e4e4ea'; // to change the color of the text when it is selected
}

function mouseout(thisId)
{var changethis ="choice" + thisId.charAt('1')
 var changethistoo = "select_content" + thisId.charAt('1')
 document.getElementById(changethis).style.backgroundColor = '#e4e4ea'; // to change back the background color when unselected
 document.getElementById(changethistoo).style.color='black'; //  to change the back the color of the text when it is unselected
}

function fetch(thisId) // this is called when the selection is clicked
{var fetchthis = "puzzle_" + thisId + ".htm"
 window.open(fetchthis,"_self") // to open the corresponding puzzle file
}

function mouseoverhome(thisId)
{document.getElementById("choice" + thisId).style.backgroundColor = '#1a4d91'; // to change the background color of the menu when it is selected
 document.getElementById("select_content" + thisId).style.color='#e4e4ea'; // to change the color of the text when it is selected
}

function mouseouthome(thisId)
{document.getElementById("choice" + thisId).style.backgroundColor = '#e4e4ea'; // to change the background color of the menu when it is selected
 document.getElementById("select_content" + thisId).style.color='black'; // to change the color of the text when it is selected
}

function fetchhome()// this is called when home is clicked
{ window.open("index.htm","_self") // to open the corresponding puzzle file
}

for (var num = 0; num < 3; num++) // to generate randum image for left, center and right islet
 { randnum=Math.random()*4-0.5;
   randnum=Math.round(randnum);
   if (num==0) i=randnum;
   if (num==1) j=randnum;
   if (num==2) k=randnum;
   if (num==2 && j==k) num = 1;
 }

which_image = "image/bg_puzzle_center" + i +".jpg"
change_center_islet = document.getElementById("puzzle_center")
change_center_islet.setAttribute("src",which_image) 


 // self generate new Arrays
 for (i = 0; i < 9; i++)
  { display[i] = '?'           //initialise array member with "?"
    display_color[i] = 'black' //initialise array member with "black"
    bg_image[i] = 'text'           //initialise array member with "text"	
  }

 for (i = 0; i < 6; i++)
  { text_pattern[i] =''        //initialise array member with ""
  }

 document.forms.fun_puzzle.typein[0].focus() //to select first column initially
 tell(document.forms.fun_puzzle);
 
 function tell(puzzle,which)
{ var gather = ""
  var total_letter_correct = 0
  var bg = ""
 
  doc = window.open("","right")
  doc.document.close()
 
  doc1 = window.open("","left")
  doc1.document.close()

//check whether input to any textbox form[0].typein[i].value is correct and process color and background accordingly
  if(which!='typein'&& which!='select1'&& which!='select2'&& which!='select3'&&which!='select4'&&which!='select5'
     &&which!='select6'&&which!='select7'&&which!='select8'&&which!='select9')//such that onfocus or onblur will not reveal answer
 {for (i = 0; i < 6; i++)
  { text_pattern[i] ='normal'        //initialise array member with "normal"
  }
  for (i = 0; i < 9; i++)
  { if (puzzle.typein[i].value != "")
   { if (puzzle.typein[i].value == ans[i])
     { display[i] = ans[i]
       display_color[i] = 'black'
       bg_image[i] = 'id="tick"'
       total_letter_correct = total_letter_correct + 1
     } 
     else
     { display[i] = puzzle.typein[i].value
       display_color[i] = 'black'
       bg_image[i] = 'id="wrong"'
     } 
   }
   else
   { display[i] = "?"
     display_color[i] = 'black'
     bg_image[i] = 'id="text"'
   }
  }
 
 for (i = 0; i < 2; i++)
  { gather = ""//reset gather otherwise gather will be twice gathered
    if (i == 0)
   { bg = "bg_puzzle_side" + j + ".jpg"
   }
   if(i == 1)
   { bg = "bg_puzzle_side" + k + ".jpg"
   }
 //gathering text and table to print results on the left and the right  
 gather += "<html><head><style type='text/css'>"
 gather += "p{font-size:15;font-weight:600;font-family:Comic Sans MS,Microsoft Sans Serif;text-align:center};"
 gather += "p#before_results{position:relative;top:43;margin-top:0}"
 gather += "table#puzzle_table{position:relative;top:43}"
 gather += "#style1{height:21;width:5;background-color:#1a4d91};#style1short{height:5;background-color:#1a4d91}"
 gather += "td#tick{width:21;border:3px inset;background-image:url('image/tick.gif')};"
 gather += "td#normal{width:21};td#empty{height:21; width:5}"
 gather += "td#text{width:21;border:3px inset;background-color:#e4e4ea}"
 gather += "td#wrong{width:21;border:3px inset;background-image:url('image/wrong.jpg')}"
 gather += "body{background-image:url('image/" + bg + "')};</style></head>"
 gather += '<body><table id="puzzle_table" align="center" border="0" cellpadding="0" cellspacing="0">'
 
 gather += '<tr><td id="normal"></td><td id="empty"></td>'
 gather += '<td id="normal"><p>1d</td><td id="empty"></td>'
 gather += '<td id="normal"><p>2d</td><td id="empty"></td>'
 gather += '<td id="normal"><p>3d</td><td id="empty"></td></tr>'
 
 gather += '<tr><td></td><td id="style1short" colspan="7"></td></tr>'
 gather += '<tr><td id="normal"><p style="text-align:left;color:' + display_color[9] + '">1a</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[0] + '><p " style="color:' + display_color[0] + '">' + display[0] + '</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[1] + '><p " style="color:' + display_color[1] + '">' + display[1] + '</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[2] + '><p " style="color:' + display_color[2] + '">' + display[2] + '</td>'
 gather += '<td id="style1"></td></tr>'
    
 gather += '<tr><td></td><td id="style1short" colspan="7"></td></tr>'
 gather += '<tr><td id="normal"><p style="text-align:left;color:' + display_color[10] + '">2a</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[3] + '><p " style="color:' + display_color[3] + '">' + display[3] + '</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[4] + '><p " style="color:' + display_color[4] + '">' + display[4] + '</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[5] + '><p " style="color:' + display_color[5] + '">' + display[5] + '</td>'
 gather += '<td id="style1"></td></tr>'
    
 gather += '<tr><td></td><td id="style1short" colspan="7"></td></tr>'
 gather += '<tr><td id="normal"><p style="text-align:left;color:' + display_color[11] + '">3a</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[6] + '><p " style="color:' + display_color[6] + '">' + display[6] + '</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[7] + '><p " style="color:' + display_color[7] + '">' + display[7] + '</td>'
 gather += '<td id="style1"></td>'
 gather += '<td ' + bg_image[8] + '><p " style="color:' + display_color[8] + '">' + display[8] + '</td>'
 gather += '<td id="style1"></td></tr>'
    
 gather += '<tr><td></td><td id="style1short" colspan="7"></td></tr>'
     
 gather += "</table>"
 
 if(total_letter_correct == 9)
   { gather += '<p id="before_results" style="color:blue">Congratulations, you have solved the puzzle!</p></body></html>'
   }
 else
   { gather += '<p id="before_results">&nbsp;&nbsp;&nbsp;Results</p></body></html>'
   }
 
 if (i == 0)
   { doc.document.write(gather);
   }
 if(i == 1)
   { doc1.document.write(gather);
   }
  }
 //change color of question text if the answer is correct
  if(puzzle.typein[0].value == ans[0] && puzzle.typein[1].value == ans[1] && puzzle.typein[2].value == ans[2])
  { text_pattern[0] = 'correct'
  }
  else if(puzzle.typein[0].value && puzzle.typein[1].value && puzzle.typein[2].value)
  { text_pattern[0] = 'wrong'
  }
  if(puzzle.typein[3].value == ans[3] && puzzle.typein[4].value == ans[4] && puzzle.typein[5].value == ans[5])
  { text_pattern[1] = 'correct'
  }
  else if(puzzle.typein[3].value && puzzle.typein[4].value && puzzle.typein[5].value)
  { text_pattern[1] = 'wrong'
  }
  if(puzzle.typein[6].value == ans[6] && puzzle.typein[7].value == ans[7] && puzzle.typein[8].value == ans[8])
  { text_pattern[2] = 'correct'
  }
  else if(puzzle.typein[6].value && puzzle.typein[7].value && puzzle.typein[8].value)
  { text_pattern[2] = 'wrong'
  }
  if(puzzle.typein[0].value == ans[0] && puzzle.typein[3].value == ans[3] && puzzle.typein[6].value == ans[6])
  { text_pattern[3] = 'correct'
  }
  else if(puzzle.typein[0].value && puzzle.typein[3].value && puzzle.typein[6].value)
  { text_pattern[3] = 'wrong'
  }
  if(puzzle.typein[1].value == ans[1] && puzzle.typein[4].value == ans[4] && puzzle.typein[7].value == ans[7])
  { text_pattern[4] = 'correct'
  }
  else if(puzzle.typein[1].value && puzzle.typein[4].value && puzzle.typein[7].value)
  { text_pattern[4] = 'wrong'
  }
  if(puzzle.typein[2].value == ans[2] && puzzle.typein[5].value == ans[5] && puzzle.typein[8].value == ans[8])
  { text_pattern[5] = 'correct'
  } 
  else if(puzzle.typein[2].value && puzzle.typein[5].value && puzzle.typein[8].value)
  { text_pattern[5] = 'wrong'
  }
 }
 
 
 
  var collect = ""
  var i = 0
  
  
  //to highlight the appropriate question based on which box is selected
  for(i = 0; i < 6; i++) //if text_pattern[i] is not correct reset to black otherwise highlight will remain!
   { if(text_pattern[i] != 'correct'&& text_pattern[i] != 'wrong')
     { text_pattern[i] = 'normal'
     }
   }
  
  
  if(which == 'select1') 
  { if(text_pattern[0] != 'correct') 
    {text_pattern[0] = 'highlight'
    }
    if(text_pattern[3] != 'correct')
    {text_pattern[3] = 'highlight'
    }
  }
  
  else if(which == 'select2') 
  { if(text_pattern[0] != 'correct') 
    {text_pattern[0] = 'highlight'
    }
    if(text_pattern[4] != 'correct')
    {text_pattern[4] = 'highlight'
    }
  }
  
  else if(which == 'select3') 
  { if(text_pattern[0] != 'correct') 
    {text_pattern[0] = 'highlight'
    }
    if(text_pattern[5] != 'correct')
    {text_pattern[5] = 'highlight'
    }
  }
  else if(which == 'select4') 
  { if(text_pattern[1] != 'correct') 
    {text_pattern[1] = 'highlight'
    }
    if(text_pattern[3] != 'correct')
    {text_pattern[3] = 'highlight'
    }
  }
  else if(which == 'select5') 
  { if(text_pattern[1] != 'correct') 
    {text_pattern[1] = 'highlight'
    }
    if(text_pattern[4] != 'correct')
    {text_pattern[4] = 'highlight'
    }
  }
  else if(which == 'select6') 
  { if(text_pattern[1] != 'correct') 
    {text_pattern[1] = 'highlight'
    }
    if(text_pattern[5] != 'correct')
    {text_pattern[5] = 'highlight'
    }
  }
  else if(which == 'select7') 
  { if(text_pattern[2] != 'correct') 
    {text_pattern[2] = 'highlight'
    }
    if(text_pattern[3] != 'correct')
    {text_pattern[3] = 'highlight'
    }
  }
  else if(which == 'select8') 
  { if(text_pattern[2] != 'correct') 
    {text_pattern[2] = 'highlight'
    }
    if(text_pattern[4] != 'correct')
    {text_pattern[4] = 'highlight'
    }
  }
  else if(which == 'select9') 
  { if(text_pattern[2] != 'correct') 
    {text_pattern[2] = 'highlight'
    }
    if(text_pattern[5] != 'correct')
    {text_pattern[5] = 'highlight'
    }
  }
  
  
  doc2 = window.open("","middle")
  doc2.document.close()
  //Collecting Questions for printing
  collect += "<html><head><style type='text/css'>"
  collect += 'li:before{display:marker;content:counter(counter)"a";counter-increment:counter;}'   
  collect += "#init{font-size:16px;font-weight:400;font-family:Comic Sans MS,Microsoft Sans Serif;text-decoration:underline;text-align:center};"
  collect += "div{padding:0;margin:0;border:0;text-align:left;font-weight:400;font-family:Comic Sans MS,Microsoft Sans Serif;}"
  collect += "#normal{color:black};#highlight{color:#0000cc};#colorstrip{background-color:#1a4d91};"
  collect += "div#wrong{color:#cc0000};div#correct{color:#00cc00};"
  collect += "body{background-image:url('image/bg_middle.jpg')}"
  collect += "td#laminate{vertical-align:top;background-color:e4e4ea;border:inset}"
  collect += "td#laminate_title{vertical-align:top}"
  collect += "td#laminate_left{vertical-align:top;width:35;padding-left:3px}"
  collect += "td#laminate_right{vertical-align:top}"
  collect += "</style></head><body>"
  collect += '<table width="779" align="center" border="0" cellspacing="0" cellpadding="0">'
  collect += '<tr><td height="3" width="8"></td><td id="colorstrip" colspan="3"></td><td width="8"></td>'
  collect += '<td id="colorstrip" colspan="3"></td><td width="8"></td></tr>'
  collect += '<tr><td width="8"></td><td id="colorstrip" width="4"></td><td id="laminate" width="369">'
  collect += '<table width="364"  border="0" cellspacing="0" cellpadding="0">'
  collect += '<tr><td id="laminate_title" colspan="2"><div id="init">Across</div></td></tr>'
  collect += '<tr><td id="laminate_left"><div id="' + text_pattern[0] + '">1a - </div></td>'
  collect += '<td id="laminate_right"><div id="' + text_pattern[0] + '">' + ques[0] + '</div></td></tr>'
  collect += '<tr><td id="laminate_left"><div id="' + text_pattern[1] + '">2a - </div></td>'
  collect += '<td id="laminate_right"><div id="' + text_pattern[1] + '">' + ques[1] + '</div></td></tr>'
  collect += '<tr><td id="laminate_left"><div id="' + text_pattern[2] + '">3a - </div></td>'
  collect += '<td id="laminate_right"><div id="' + text_pattern[2] + '">' + ques[2] + '</div></td></tr>'
  collect += '</table></td>'
  collect += '<td id="colorstrip" width="4"></td><td width="8"></td><td id="colorstrip" width="4"></td>'
  collect += '<td id="laminate" width="369">'
  collect += '<table width="364" border="0" cellspacing="0" cellpadding="0">'
  collect += '<tr><td id="laminate_title" colspan="2"><div id="init">Down</div></td></tr>'
  collect += '<tr><td id="laminate_left"><div id="' + text_pattern[3] + '">1d - </div></td>'
  collect += '<td id="laminate_right"><div id="' + text_pattern[3] + '">' + ques[3] + '</div></td></tr>'
  collect += '<tr><td id="laminate_left"><div id="' + text_pattern[4] + '">2d - </div></td>'
  collect += '<td id="laminate_right"><div id="' + text_pattern[4] + '">' + ques[4] + '</div></td></tr>'
  collect += '<tr><td id="laminate_left"><div id="' + text_pattern[5] + '">3d - </div></td>'
  collect += '<td id="laminate_right"><div id="' + text_pattern[5] + '">' + ques[5] + '</div></td></tr>'
  collect += '</table></td>'
  collect += '<td id="colorstrip" width="4"></td><td width="8"></td></tr>'
  collect += '<tr><td height="3" width="8"></td><td id="colorstrip" colspan="3"></td><td width="8"></td>'
  collect += '<td id="colorstrip" colspan="3"></td><td width="8"></td></tr>'
  collect += '</table></body></html>'
  doc2.document.write(collect);
}