// adjusted 120814 Added glow
// adjusted 18/07/07 added tick and cross images to alert box, stopped game reload if timed out
// adjusted 29/05/06 rewritten to use a static html file and new question file structure
// adjusted 12/11/03 update to multiple colours 
// adjusted 12/11/03 to allow a 2 minute timer to be added
// adjusted 16/05/03 to do randomising of terms via javascript not perl
// adjusted 12/11/03 to allow a 2 minute timer to be added
// adjusted 26/10/24 match background color not text color and display correct order when game finished
// 281024 - change Definition to Match
// match.js - external javascript to support the Match the Term and it's Match file match.html
// file do not adjust.

termclicked=0; // term has been selected
defnclicked=0; // definition has been selected
termvalue=0;   // value of the term id without t 
defnvalue=0;   // value of the term id without d 
thed=0;        // holds the defn id 
//pickcolour =new Array(9);
//matchcolour='wheat';
//pickcolour=['green','blue','brown','darkorange','purple','darkslategray','darkgoldenrod','deepskyblue','teal','darkvioletred'];
// extra colors for increased Match game
pickcolour =new Array();
matchcolour='black';
pickcolour=['#0099ff','#008000','#704f00','#a52a2a','#ff8c00','#800080','#2f4f4f','#b8860b',
            '#0044ff','#008080','#cc0000','#ff00ff','#003300','#99cc00','#3b4000','#940000'];
            
function term(t){
 tempid="t"+t; // build up term id
 thet=t;   // store t in a global variable for use in defn function
 
//Check term hasn't already been matched
if  (document.getElementById(tempid).style.color==matchcolour)
    {alertboxer('<h1>Information</h1><p>This Term has already been Matched,<br />Try another one.</p>')}
else{
     if  (termclicked==1)
         {alertboxer('<h1>Information</h1><p>You have already picked a Term,<br /> Pick a Match.</p>');}
     else{ 
          termclicked=1;  // term clicked flag
          document.getElementById(tempid).style.color='red';
          termvalue= t;  //get id, number only, of clicked term

          if (defnclicked==1)
             { //if defn has been clicked run match function?
               // send termid to match the defnvalue and send the thed to restyle
               match(t,thed,defnvalue);
             }
          }
    }
}

function defn(d){
  tempid="d"+numbers[d]; //build up defn id
  thed=d;   // store d in a global variable for use in term function
  
//Check defn hasn't already been matched
if  (document.getElementById("d"+d).style.color==matchcolour)
    {alertboxer('<h1>Information</h1><p>This Item has already been Matched<br /> Try another one.</p>')}
else{
     if   (defnclicked==1)
          {alertboxer('<h1>Information</h1><p>You have already picked a Match,<br />Pick a Term.</p>')
          }
     else {defnclicked=1;
           document.getElementById("d"+d).style.color='red';
           defnvalue= numbers[d];
                
           if (termclicked==1){match(termvalue,d,defnvalue)}
          }
    }
}

function match(a,b,x){  
   // where a is termvalue (id number part only) and b is defnvalue
   // d is the number of the definition element id

 if(a==x){soundplayer('correct1');
          document.getElementById('t'+a).style.color=matchcolour;
          document.getElementById('t'+a).style.backgroundColor=pickcolour[a-1];
          document.getElementById('d'+b).style.color=matchcolour;
          document.getElementById('d'+b).style.backgroundColor=pickcolour[a-1];
          alertboxer('<h1>Correct !</h1><br /><img src="tick.gif" alt="" alt="Correct" />');
          complete();}
 else    {soundplayer('wrong1');
          alertboxer('<h1>Incorrect !, Try Again</h1><br /><img src="cross.gif" alt="" alt="Correct" />');
          document.getElementById('t'+a).style.color='white';
          document.getElementById('d'+b).style.color='white';
         }

 //reset variables
 termclicked=0; defnclicked=0; termvalue=0; defnvalue=0; thed=0;thet=0;
 a=0;b=0;d=0;
}

function complete(){
  finish=1;
  for (i=1;i<=maxterms;i++)
      {if (document.getElementById('t'+i).style.color!=matchcolour)
          {finish=0} //set flag if any term is unmatched
      }
  if (finish==1)
     {alertboxer('<h1>Congratulations</h1><p>You Matched all the Terms !</p>');
      correcttable();
      if (timerflag==1){clearTimeout(timerid);}
     }
}

   x=120;  // 120 second countdown
   y=0;    // stop time in 120 secs

function timer(){
   // display current time
   if (x<y)  //time's up
           {clearTimeout(timerid);
            alertboxer("<h1>You Ran out of Time</h1><p>Try again.</p>");
           }
   else { 
           document.forms[0].elements[0].value=x;
            x=x-1;       //drop every second
           //run again every second
           timerid=setTimeout('timer()',1000); 
         }
}

function correcttable(){
// when game completeed put definitions alongside correct terms
// this creates a new tbody tag needed by ie in memory
  newtablebody=document.createElement('tbody');

  //add the tbody tag to the table tag
  document.getElementById('maintable').appendChild(newtablebody);

  //add an id to the tbody tag
  document.getElementById('maintable').firstChild.setAttribute('id','tablebody');

// add headings
var thetable="<tr><th class='terms goldbar'><b>Terms</b></td><th class='terms goldbar'><b>Matches</b></td></tr>";

// now build the table using innerHTML
  for (i=1;i<=maxterms;i++)
     {
      thetable=thetable+"<tr id='row"+i+"'><td class='terms' id='t"+i+"'>.</td>";
      thetable=thetable+"<td class='terms' id='d"+i+"'>.</td></tr>";
     }

// populate table with terms and defns and set background color accordingly
document.getElementById('tablebody').innerHTML=thetable;
    for (i=1;i<=maxterms;i++)
        {
         aterm='t'+(i);
         adefn='d'+(i);
         document.getElementById(aterm).innerHTML=theterms[i-1];
         document.getElementById(aterm).style.backgroundColor=pickcolour[i-1];
         document.getElementById(adefn).innerHTML=thedefns[i-1];
         document.getElementById(adefn).style.backgroundColor=pickcolour[i-1];         
        }
}