// version 230217 
// uses background-color to test cells for X and O this is then covered by a background image.

// initialise variables
 var player=0;		// declare player variable with player = 2 for first turn
 var emptycolor='';  
 var play1color='rgb(200,0,200)'; // set color for player 1 -purple
 var play2color='rgb(0,180,0)';   // set color for player 2 -green
 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');
        document.getElementById('title').innerHTML=title; // Add quiz title (if any)
 	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<4;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=''; 
	   }
	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 make the Move you Won</p>')}
   else {     
         if (x.selectedIndex !=0)
            {//window.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 by sending it to reset button to prevent answer changes
 document.getElementById('resetbutton').focus();


// now check that the game is not over already
if (winnerstatus==1){alertboxer('<h1>Game Over</h1><p>Press the New Game Button to play again.</p>')}
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>"); 
          player=2;    // computers turn
          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><p>This Cell has been Filled, Pick another Cell.</p>")}	
}

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;        // change from player to computers turn
    newwinner();  // do we have a winner
}

function colourcellcomputer(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;       // change from computer to players turn
   newwinner();  // do we have a winner
}

function newwinner(){
//assign a value to each row column and diagonal
// check rows
row1score=0;row2score=0;row3score=0;
col1score=0; col2score=0; col3score=0; 
diag1score=0;diag2score=0;

// 060911- to fix cross browser issue associated with the way backgroundcolors are stored internally
// ff adds extra spaces to rgb values ie does not
// get each cell backgroundcolor store as cellrefbc ie a1bc
// and use regex to strip any spaces so we can compare a1bc with playercolours

//a1
 var a1bc=document.getElementById('a1').style.backgroundColor;
 a1bc = a1bc.replace(/\s+/g,'');
 if (a1bc==play1color)
    {row1score=row1score+1;col1score=col1score+1;diag1score=diag1score+1;}
 if (a1bc==play2color)
    {row1score=row1score+4;col1score=col1score+4;diag1score=diag1score+4;}

//b1 
 var b1bc=document.getElementById('b1').style.backgroundColor;
 b1bc = b1bc.replace(/\s+/g,'');
 if (b1bc==play1color)
    {row1score=row1score+1;col2score=col2score+1;}
 if (b1bc==play2color)
    {row1score=row1score+4;col2score=col2score+4;}
 
//c1
 var c1bc=document.getElementById('c1').style.backgroundColor;
 c1bc = c1bc.replace(/\s+/g,'');
 if (c1bc==play1color)
    {row1score=row1score+1;col3score=col3score+1;diag2score=diag2score+1;}
 if (c1bc==play2color)
    {row1score=row1score+4;col3score=col3score+4;diag2score=diag2score+4;}

//a2
 var a2bc=document.getElementById('a2').style.backgroundColor;
 a2bc = a2bc.replace(/\s+/g,'');
 if (a2bc==play1color)
    {row2score=row2score+1;col1score=col1score+1;}
 if (a2bc==play2color)
    {row2score=row2score+4;col1score=col1score+4;}
 
//b2 
 var b2bc=document.getElementById('b2').style.backgroundColor;
 b2bc = b2bc.replace(/\s+/g,''); 
 if (b2bc==play1color)
    {row2score=row2score+1;col2score=col2score+1;diag1score=diag1score+1;diag2score=diag2score+1;}
 if (b2bc==play2color)
    {row2score=row2score+4;col2score=col2score+4;diag1score=diag1score+4;diag2score=diag2score+4;}
 
//c2
 var c2bc=document.getElementById('c2').style.backgroundColor;
 c2bc = c2bc.replace(/\s+/g,''); 
 if (c2bc==play1color)
    {row2score=row2score+1;col3score=col3score+1;}
 if (c2bc==play2color)
    {row2score=row2score+4;col3score=col3score+4;
    }

//a3
 var a3bc=document.getElementById('a3').style.backgroundColor;
 a3bc = a3bc.replace(/\s+/g,'');
 if (a3bc==play1color)
    {row3score=row3score+1;col1score=col1score+1;diag2score=diag2score+1;}
 if (a3bc==play2color)
    {row3score=row3score+4;col1score=col1score+4;diag2score=diag2score+4;}
 
//b3
 var b3bc=document.getElementById('b3').style.backgroundColor;
 b3bc = b3bc.replace(/\s+/g,''); 
 if (b3bc==play1color)
    {row3score=row3score+1;col2score=col2score+1;}
 if (b3bc==play2color)
    {row3score=row3score+4;col2score=col2score+4;}

//c3
 var c3bc=document.getElementById('c3').style.backgroundColor;
 c3bc = c3bc.replace(/\s+/g,'');    
 if (c3bc==play1color)
    {row3score=row3score+1;col3score=col3score+1;diag1score=diag1score+1;}
 if (c3bc==play2color)
    {row3score=row3score+4;col3score=col3score+4;diag1score=diag1score+4;}


// evaluate board 
message='<p>Press the New Game button to play again.</p>';
 if (row1score==3||row2score==3||row3score==3)   {alertboxer('<h1>Game Over</h1><p>You have a Winning row</p>'+message); winnerstatus=1;}
 if (row1score==12||row2score==12||row3score==12){alertboxer('<h1>Game Over</h1><p>Computer has a winning row</p>'+message); winnerstatus=1;}
 if (col1score==3||col2score==3||col3score==3)   {alertboxer('<h1>Game Over</h1><p>You have a Winning column</p>'+message); winnerstatus=1;}
 if (col1score==12||col2score==12||col3score==12){alertboxer('<h1>Game Over</h1><p>Computer has a winning column</p>'+message); winnerstatus=1;}
 if (diag1score==3||diag2score==3)               {alertboxer('<h1>Game Over</h1><p>You have a Winning diagonal</p>'+message); winnerstatus=1;}
 if (diag1score==12||diag2score==12)             {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 ==9 its a draw, game over reset game
if (turns==9 && winnerstatus != 1)
   {winnerstatus=1;    // game over set winnerstatus to 1 to stop more questions being answered 
    alertboxer('<h1>Game Drawn</h1><p>Press New Game to Play Again.</p>');} 

else {// no win or draw let computer have a go 
      // First lets stop possible two row column or diagonal wins
      // Rule 0 Lets stop two in a row 1 but only if game not over
         if (row1score==2&&winnerstatus!=1&&player==2){stopwin('a1','b1','c1');}
         // stop two in a row 2
         if (row2score==2&&winnerstatus!=1&&player==2){stopwin('a2','b2','c2');}
         // stop two in a row 3
         if (row3score==2&&winnerstatus!=1&&player==2){stopwin('a3','b3','c3');}
         // stop two in a column 1
         if (col1score==2&&winnerstatus!=1&&player==2){stopwin('a1','a2','a3');}
         // stop two in a column 2
         if (col2score==2&&winnerstatus!=1&&player==2){stopwin('b1','b2','b3');}
         // stop two in a column 3
         if (col3score==2&&winnerstatus!=1&&player==2){stopwin('c1','c2','c3');}
         // stop two in a diagonal 1
         if (diag1score==2&&winnerstatus!=1&&player==2){stopwin('a1','b2','c3');}
         // stop two in a diagonal 2
         if (diag2score==2&&winnerstatus!=1&&player==2){stopwin('c1','b2','a3');}

         // if still player2 and game not over - find another computer move
         if (player==2 && winnerstatus != 1){ai(); }// get a random computer move
          
       }

}

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

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

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

//okay can computer take the center or top left
// Rule 1 is center taken ?
if (document.getElementById("b2").style.backgroundColor == emptycolor)
   {colourcellcomputer("b2");}	 // take center
else{// Rule 2 if center taken is a1 available
     if (document.getElementById("a1").style.backgroundColor == emptycolor)
        {colourcellcomputer("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()*8+1);
   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 = 'a2';
			break; 
	case 5 :	cellref = 'b2';
			break; 
	case 6 :	cellref = 'c2';
			break; 
	case 7 :	cellref = 'a3';
			break; 
	case 8 :	cellref = 'b3';
			break; 
	case 9 :	cellref = 'c3';
			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)
	    {colourcellcomputer(x);}    //okay cell empty colour it 
     else   {randnum2();}	// cell must have been used, get another random number 
}