// version 230217 
// uses background-color to test cells for X and O this is then covered by a background image.
// 070117 - randomise location of questions
// 700911 - corrected xbrowser bug re background-color values with spaces
// real noughts and crosses
// initialise variables superttt.js used by superttt.html
 var player=0;		// declare player variable with player = 2 for first turn
 var emptycolor=''; 
 var play1color='rgb(255,173,0)';	// set color for player 1 -orange
 var play2color='rgb(0,140,255)';	// set color for player 2 -blue
 var randomnumber=0;	// declare this globally
 var winnerstatus=0;	// set winner status to 0
 var turns=0;
 var response='0';	// set response to wrong
   
function resetboard(){ 	//use form reset event to clear board and reset variables
        uniques();
        loadquestions();
        soundplayer('correct1');
        // Add this quiz title (if any)
        document.getElementById('title').innerHTML=title;

 	randomnumber=0;		// declare this globally
	winnerstatus=0;		// set winner status to 0
	turns=0;
        response='0';	// set response to wrong

	for (var i=1;i<5;i++)
	   {
	       document.getElementById('a'+i).style.backgroundColor=emptycolor;
	       document.getElementById('a'+i).style.backgroundImage='none';
	       document.getElementById('a'+i).innerHTML='';   
	       document.getElementById('b'+i).style.backgroundColor=emptycolor;
	       document.getElementById('b'+i).style.backgroundImage='none';
	       document.getElementById('b'+i).innerHTML=''; 
      	       document.getElementById('c'+i).style.backgroundColor=emptycolor;
       	       document.getElementById('c'+i).style.backgroundImage='none';
	       document.getElementById('c'+i).innerHTML=''; 
       	       document.getElementById('d'+i).style.backgroundColor=emptycolor;
       	       document.getElementById('d'+i).style.backgroundImage='none';
	       document.getElementById('d'+i).innerHTML='';
	   }
	displayinstructions(); 

}

function unselected(x){
   if(response=='1') //ensure player takes their move
        {//make drop box lose focus
         document.getElementById('resetbutton').focus();
         alertboxer('<h1>Information</h1><p>Click on a Square to take the move you Won</p>')}
   else {     
         if (x.selectedIndex !=0)
            {// make drop box lose focus
             document.getElementById('resetbutton').focus();
             alertboxer('<h1>Information</h1><p>You cannot change an answer</p>');}
        }
}

function assess(answer){ // assess question
 // First we blur the current object to lock in the answer
 // we force loss of focus to prevent changes
         document.getElementById('resetbutton').focus();

// now check that the game is not over already
if (winnerstatus==1){alertboxer('<h1>Game over</h1> Press the New Game Button')}
else {

    // store option value 1 or 0 in response
     response = answer.options[answer.selectedIndex].value;

    //check response, increment score if correct and display result
    if (response=='1')
           {soundplayer('correct1');
            answer.style.color='green';
            alertboxer("<h1>Correct</h1><p><img src=\'tick.gif\'  alt=\'correct\' /></p><p> Pick a Square</p>");
            player=1;}  // players turn
    else   {soundplayer('wrong1');
            answer.style.color='red';
            alertboxer("<h1>Incorrect</h1><p><img src=\'cross.gif\'  alt=\'wrong\' /></p><p> Lose a Turn</p>");  //computers turn
            player=2;
            ai();}
    }
}

// cell are named as per spreadsheet layout column letter, row number

function allowplay(x){
	// is player allowed a turn ?
	if (response=='1'){emptycell(x)}
	else {alertboxer("<h1>Information</h1><p>You must answer a question correctly to win a move</p>")}
}

function emptycell(x){      // is the players selected cell, id=x, empty ?

	 if (document.getElementById(x).style.backgroundColor == emptycolor)
	      {player=1;		// player one needed for colour
	       colourcell(x);}	//okay cell empty - run whose turn is it 
	 else {alertboxer("<h1>Information</h1>This cell has been filled, pick another")}	
}

function colourcell(x){ //change color of cell
    response='0';    // reset response so player doesn't get another go 	 
    document.getElementById(x).style.backgroundColor=play1color;
    document.getElementById(x).style.backgroundImage="url('glass1.jpg')";
    document.getElementById(x).innerHTML='X';
 
    player=2; //swap players
    newwinner();  // do we have a winner
}

function colourcomputercell(x){ //change color of cell
    document.getElementById(x).style.backgroundColor=play2color; 
    document.getElementById(x).style.backgroundImage="url('glass1.jpg')";
    document.getElementById(x).innerHTML='O';
    player=1; //swap players
    newwinner();  // do we have a winner
}

function newwinner(){
//assign a value to each row column and diagonal
// strip extra white space from rgb values in different browsers
 var a1bc=document.getElementById('a1').style.backgroundColor;
 a1bc = a1bc.replace(/\s+/g,'');
 var a2bc=document.getElementById('a2').style.backgroundColor;
 a2bc = a2bc.replace(/\s+/g,'');
 var a3bc=document.getElementById('a3').style.backgroundColor;
 a3bc = a3bc.replace(/\s+/g,'');
 var a4bc=document.getElementById('a4').style.backgroundColor;
 a4bc = a4bc.replace(/\s+/g,'');
 
 var b1bc=document.getElementById('b1').style.backgroundColor;
 b1bc = b1bc.replace(/\s+/g,'');
 var b2bc=document.getElementById('b2').style.backgroundColor;
 b2bc = b2bc.replace(/\s+/g,'');
 var b3bc=document.getElementById('b3').style.backgroundColor;
 b3bc = b3bc.replace(/\s+/g,'');
 var b4bc=document.getElementById('b4').style.backgroundColor;
 b4bc = b4bc.replace(/\s+/g,'');
 
 var c1bc=document.getElementById('c1').style.backgroundColor;
 c1bc = c1bc.replace(/\s+/g,'');
 var c2bc=document.getElementById('c2').style.backgroundColor;
 c2bc = c2bc.replace(/\s+/g,'');
 var c3bc=document.getElementById('c3').style.backgroundColor;
 c3bc = c3bc.replace(/\s+/g,'');
 var c4bc=document.getElementById('c4').style.backgroundColor;
 c4bc = c4bc.replace(/\s+/g,'');
 
 var d1bc=document.getElementById('d1').style.backgroundColor;
 d1bc = d1bc.replace(/\s+/g,'');
 var d2bc=document.getElementById('d2').style.backgroundColor;
 d2bc = d2bc.replace(/\s+/g,'');
 var d3bc=document.getElementById('d3').style.backgroundColor;
 d3bc = d3bc.replace(/\s+/g,'');
 var d4bc=document.getElementById('d4').style.backgroundColor;
 d4bc = d4bc.replace(/\s+/g,'');

// check rows
row1score=0;

 if (a1bc==play1color){row1score=row1score+1;}
 if (a1bc==play2color){row1score=row1score+8;}
 if (b1bc==play1color){row1score=row1score+1;}
 if (b1bc==play2color){row1score=row1score+8;}
 if (c1bc==play1color){row1score=row1score+1;}
 if (c1bc==play2color){row1score=row1score+8;}
 if (d1bc==play1color){row1score=row1score+1;}
 if (d1bc==play2color){row1score=row1score+8;}

row2score=0;
 if (a2bc==play1color){row2score=row2score+1;}
 if (a2bc==play2color){row2score=row2score+8;}
 if (b2bc==play1color){row2score=row2score+1;}
 if (b2bc==play2color){row2score=row2score+8;}
 if (c2bc==play1color){row2score=row2score+1;}
 if (c2bc==play2color){row2score=row2score+8;}
 if (d2bc==play1color){row2score=row2score+1;}
 if (d2bc==play2color){row2score=row2score+8;}

row3score=0;
 if (a3bc==play1color){row3score=row3score+1;}
 if (a3bc==play2color){row3score=row3score+8;}
 if (b3bc==play1color){row3score=row3score+1;}
 if (b3bc==play2color){row3score=row3score+8;}
 if (c3bc==play1color){row3score=row3score+1;}
 if (c3bc==play2color){row3score=row3score+8;}
 if (d3bc==play1color){row3score=row3score+1;}
 if (d3bc==play2color){row3score=row3score+8;}

row4score=0;
 if (a4bc==play1color){row4score=row4score+1;}
 if (a4bc==play2color){row4score=row4score+8;}
 if (b4bc==play1color){row4score=row4score+1;}
 if (b4bc==play2color){row4score=row4score+8;}
 if (c4bc==play1color){row4score=row4score+1;}
 if (c4bc==play2color){row4score=row4score+8;}
 if (d4bc==play1color){row4score=row4score+1;}
 if (d4bc==play2color){row4score=row4score+8;}

// check columns
col1score=0;
 if (a1bc==play1color){col1score=col1score+1;}
 if (a1bc==play2color){col1score=col1score+8;}
 if (a2bc==play1color){col1score=col1score+1;}
 if (a2bc==play2color){col1score=col1score+8;}
 if (a3bc==play1color){col1score=col1score+1;}
 if (a3bc==play2color){col1score=col1score+8;}
 if (a4bc==play1color){col1score=col1score+1;}
 if (a4bc==play2color){col1score=col1score+8;}

col2score=0;
 if (b1bc==play1color){col2score=col2score+1;}
 if (b1bc==play2color){col2score=col2score+8;}
 if (b2bc==play1color){col2score=col2score+1;}
 if (b2bc==play2color){col2score=col2score+8;}
 if (b3bc==play1color){col2score=col2score+1;}
 if (b3bc==play2color){col2score=col2score+8;}
 if (b4bc==play1color){col2score=col2score+1;}
 if (b4bc==play2color){col2score=col2score+8;}

col3score=0;
 if (c1bc==play1color){col3score=col3score+1;}
 if (c1bc==play2color){col3score=col3score+8;}
 if (c2bc==play1color){col3score=col3score+1;}
 if (c2bc==play2color){col3score=col3score+8;}
 if (c3bc==play1color){col3score=col3score+1;}
 if (c3bc==play2color){col3score=col3score+8;}
 if (c4bc==play1color){col3score=col3score+1;}
 if (c4bc==play2color){col3score=col3score+8;}

col4score=0;
 if (d1bc==play1color){col4score=col4score+1;}
 if (d1bc==play2color){col4score=col4score+8;}
 if (d2bc==play1color){col4score=col4score+1;}
 if (d2bc==play2color){col4score=col4score+8;}
 if (d3bc==play1color){col4score=col4score+1;}
 if (d3bc==play2color){col4score=col4score+8;}
 if (d4bc==play1color){col4score=col4score+1;}
 if (d4bc==play2color){col4score=col4score+8;}

diag1score=0;
 if (a1bc==play1color){diag1score=diag1score+1;}
 if (a1bc==play2color){diag1score=diag1score+8;}
 if (b2bc==play1color){diag1score=diag1score+1;}
 if (b2bc==play2color){diag1score=diag1score+8;}
 if (c3bc==play1color){diag1score=diag1score+1;}
 if (c3bc==play2color){diag1score=diag1score+8;}
 if (d4bc==play1color){diag1score=diag1score+1;}
 if (d4bc==play2color){diag1score=diag1score+8;}

 diag2score=0;
 if (d1bc==play1color){diag2score=diag2score+1;}
 if (d1bc==play2color){diag2score=diag2score+8;}
 if (c2bc==play1color){diag2score=diag2score+1;}
 if (c2bc==play2color){diag2score=diag2score+8;}
 if (b3bc==play1color){diag2score=diag2score+1;}
 if (b3bc==play2color){diag2score=diag2score+8;}
 if (a4bc==play1color){diag2score=diag2score+1;}
 if (a4bc==play2color){diag2score=diag2score+8;}

// evaluate board 
message='<p>Press the New Game button to play again.<p>';
 if (row1score==4||row2score==4||row3score==4||row4score==4)
    {alertboxer('<h1>Game Over</h1><p>You have a Winning Row</p>'+message); winnerstatus=1;}
 if (row1score==32||row2score==32||row3score==32||row4score==32)
    {alertboxer('<h1>Game Over</h1><p>Computer has a Winning Row</p>'+message); winnerstatus=1;}
 if (col1score==4||col2score==4||col3score==4||col4score==4)
    {alertboxer('<h1>Game Over</h1><p>You have a Winning Column</p>'+message); winnerstatus=1;}
 if (col1score==32||col2score==32||col3score==32||col4score==32)
    {alertboxer('<h1>Game Over</h1><p>Computer has a Winning Column</p>'+message); winnerstatus=1;}
 if (diag1score==4||diag2score==4)
    {alertboxer('<h1>Game Over</h1><p>You have a Winning Diagonal</p>'+message); winnerstatus=1;}
 if (diag1score==32||diag2score==32)
    {alertboxer('<h1>Game Over</h1><p>Computer has a Winning Diagonal</p>'+message); winnerstatus=1;}

turns=turns+1;    //  add a turn to number of turns

//  if turns ==16 its a draw, game over reset game
if   (turns==16&&winnerstatus!=1) 
     {winnerstatus=1; //set winnerstatus to game over
      alertboxer('<h1>Game Over</h1><p>Its a Draw, Press New game to play again.</p>');} 
else {// no win or draw for human player, let computer have a go 
                 
       // initialise cell variable to empty strings
        cell1=' ';cell2=' ';cell3=' ';cell4=' ';

       // First lets stop possible two row column or diagonal wins
       // Rule 0 Lets stop three in a row 1 but only if game not over
       if (row1score==3&&winnerstatus!=1&&player==2)
          {cell1='a1'; cell2='b1'; cell3='c1'; cell4='d1';}

       // stop three in a row 2
       if (row2score==3&&winnerstatus!=1&&player==2)
          {cell1='a2'; cell2='b2'; cell3='c2'; cell4='d2';}
                          
       // stop three in a row 3
       if (row3score==3&&winnerstatus!=1&&player==2)
          {cell1='a3'; cell2='b3'; cell3='c3'; cell4='d3';}

       if (row4score==3&&winnerstatus!=1&&player==2)
          {cell1='a4'; cell2='b4'; cell3='c4'; cell4='d4';}

       // stop three in a column 1
       if (col1score==3&&winnerstatus!=1&&player==2)
          {cell1='a1'; cell2='a2'; cell3='a3'; cell4='a4';}
                         
       // stop three in a column 2
       if (col2score==3&&winnerstatus!=1&&player==2)
          {cell1='b1'; cell2='b2'; cell3='b3'; cell4='b4';}
                         
       // stop three in a column 3
       if (col3score==3&&winnerstatus!=1&&player==2)
          {cell1='c1'; cell2='c2'; cell3='c3'; cell4='c4';}
                        
       if (col4score==3&&winnerstatus!=1&&player==2)
          {cell1='d1'; cell2='d2'; cell3='d3'; cell4='d4';}
  
       // stop three in a diagonal 1
       if (diag1score==3&&winnerstatus!=1&&player==2)
          {cell1='a1'; cell2='b2'; cell3='c3'; cell4='d4';}
                        
       // stop three in a diagonal 2
       if (diag2score==3&&winnerstatus!=1&&player==2)
          {cell1='d1'; cell2='c2'; cell3='b3'; cell4='a4';}

       // run stopwin if computer is threatened by a 3 else use ai
       if(cell1!=' '){stopwin(cell1,cell2,cell3,cell4);}
                        
       if (player==2&&winnerstatus!=1)
          {ai(); }// get a random computer move    
     }
}

function stopwin(a,b,c,d){ // a,b,c are the cells totalling 2  
  // find white cell and colour it to stop player win

  if (document.getElementById(a).style.backgroundColor==emptycolor){colourcomputercell(a);}
  if (document.getElementById(b).style.backgroundColor==emptycolor){colourcomputercell(b);}
  if (document.getElementById(c).style.backgroundColor==emptycolor){colourcomputercell(c);}
  if (document.getElementById(d).style.backgroundColor==emptycolor){colourcomputercell(d);}
}

function ai(){  // this is where the computer smarts go

   //okay can computer take the center or top left
  // Rule 1 is center taken ?
  if (document.getElementById('b2').style.backgroundColor == emptycolor)
     {colourcomputercell('b2');}	 // take center
		 	
  else{// Rule 2 if center taken is a1 available
	if (document.getElementById('a1').style.backgroundColor == emptycolor)
	   {colourcomputercell('a1');}	// take a1
	else{randnum2();}  	// don't know what else to do - pick a square at random!
      }
}

function randnum2(){   // a random number generator function
	var randomnumber=Math.round(Math.random()*15+1);
	randomnumber=String(randomnumber); // convert to string -switch  needs strings
	randomcell(randomnumber);
}

function randomcell(y){
// create cellref as a new string for each case
 cellref=' ';
 switch (y)
	{ 
	case '1'  : cellref = 'a1'; break; 
	case '2'  : cellref = 'b1'; break;  
	case '3'  : cellref = 'c1'; break; 
	case '4'  : cellref = 'd1'; break;   
	case '5'  : cellref = 'a2'; break;  
	case '6'  : cellref = 'b2'; break;  
	case '7'  : cellref = 'c2'; break;  
	case '8'  : cellref = 'd2'; break;  
	case '9'  : cellref = 'a3'; break;  
	case '10' : cellref = 'b3'; break;  
	case '11' : cellref = 'c3'; break;  
	case '12' : cellref = 'd3'; break;  
	case '13' : cellref = 'a4'; break;  
	case '14' : cellref = 'b4'; break; 
	case '15' : cellref = 'c4'; break; 
 	case '16' : cellref = 'd4'; break;
	} 
 
	emptycomputercell(cellref);  //call function that checks if computer's choice of cell is empty

}

function emptycomputercell(x){// is the computers selected cell empty ?

     if (document.getElementById(x).style.backgroundColor == emptycolor)
	{colourcomputercell(x);}    //okay cell empty colour it 
     else {randnum2();}	// cell must have been used, get another random number 
}