var traitText=['aloof','cursive','diffident','finical','gregarious',
  'industrious','jejune','majestic','mellifluous','mirthful',
  'provident','rapacious','slipshod','spontaneous','sprightly',
  'stalwart','stentorian','stolid','surreptitious','vigilant']
var animalText=['alligator','beaver','cat','chicken','cow',
  'deer','dog','dolphin','eagle','fish',
  'frog','horse','lark','lion','owl',
  'pig','prairie dog','rabbit','rooster','squirrel']
var traits, traitBoxes, tb=[];
var animals, animalBoxes, ab=[];
var HL=0, bar=[20], x=[], y=[];
var qn=0, aa=[], qq=[], retry=0;
	
function init()
{
  section1=document.getElementById('oldbrowser');
  section1.style.display='none';
  section2=document.getElementById('newbrowser');
  section2.style.display='block';
  tt=document.getElementById('terminal');
  aq=document.getElementById('ask');
  traits=document.getElementById('traits');
  traitBoxes = traits.getElementsByTagName('div');	
  for(var i = 0, traitBox; traitBox = traitBoxes[i]; i++)
  {
    traitBox.innerHTML=traitText[i];
    tb[i]=traitBox;
    tb[i].onclick=function(){getTrait(tb.indexOf(this));}
  }
  animals=document.getElementById('animals');
  animalBoxes = animals.getElementsByTagName('div');	
  for(var i = 0, animalBox; animalBox = animalBoxes[i]; i++)
  {
    animalBox.innerHTML=animalText[i];
    ab[i]=animalBox;
    ab[i].onclick=function(){getAnimal(ab.indexOf(this));}
  }
  for(i=0;i<21;i++){bar[i]=0}
}

function getTrait(n)
{
  if(HL>0 && HL != n+1)
  {clrHL(HL-1); HL=0;}
  if(tb[n].innerHTML != '&nbsp;')
  {setHL(n);}
}

function getAnimal(n)
{setbar(n);}
	
function clrHL(n)
{
  tb[n].style.backgroundColor='white';
  tb[n].style.color='#aa0000';
  tb[n].style.fontWeight='normal';
}
	
function setHL(n)
{
  HL=n+1;
  tb[n].style.backgroundColor='#aa0000';
  tb[n].style.color='white';
  tb[n].style.fontWeight='bold';
}

function clrbar(n)
{
  p=bar[n]-1;
  st=traitText[p];
  tb[p].innerHTML=st;
}

function setbar(n)
{
  sa=animalText[n];
  txt=ab[n].innerHTML;
  if(sa != txt){clrbar(n+1);}
  if(HL>0)
  {
    st=tb[HL-1].innerHTML;
    s=sa+'&nbsp; <font color=red>'+st+'</font>';
    ab[n].innerHTML=s;
    clrHL(HL-1); tb[HL-1].innerHTML='&nbsp;';
    bar[n+1]=HL; HL=0;	
    flg=true;
	for(i=1;i<21;i++)
	{if(bar[i]==0){flg=false;break;}}
	if(flg)getGrade();	
  }else {ab[n].innerHTML=sa;bar[n+1]=0;}
}

function cq()
{
  mode='ask'
  tt.innerHTML='&nbsp;';
  qn+=1;if(qn>9){qn=0;}
  s=String.fromCharCode(qn+65);
  data=s;
  retrieve(mode,data);
}

function ask()
{ // respond
  mode='tell'
  s=String.fromCharCode(qn+65);
  data=s;
  retrieve(mode,data);
}

function getGrade()
{
  s='';
  for(i=1;i<=20;i++)
  {
    n=bar[i]+65;
    s+=String.fromCharCode(n);
    mode='grade';data=s;
  }
  retrieve(mode,data);
}

function post(s)
{
  n1=s.charCodeAt(0)-65;
  n2=n1/0.2;
  s='   ';if(n1==20)s='   All ';
  s=s+n1+' are best responses for '+n2+' percent.<br>'
  retry+=1;
  switch(retry)
  {
    case 1:s=s+"That's on your first try.";break;
	case 2:s=s+"That's on your second try.";break;
	default:s=s+"You've tried "+retry+' times.'
  }
  tt.innerHTML=s;
}

function retrieve(mode,data)
{
  params=mode+'='+data;
  var live = new XMLHttpRequest();
  live.open("POST", "talk.php", true);
  live.setRequestHeader("Content-type","application/x-www-form-urlencoded")
  live.onreadystatechange = function()
  {
    if (this.readyState == 4 && this.status == 200)
	{
	  s=live.responseText;
	  switch(mode)
	  {
	    case "ask": aq.innerHTML=live.responseText;
		  break
		case "tell": tt.innerHTML=live.responseText;
		  break
		case "grade": post(fix(s));
	  }
    }
  }
  live.send(params);
}

function fix(s)
{
  j=s.length;
  tmp='';
  for(i=0;i<j;i++)
  {
    n=s.charCodeAt(i);
    if(n>64 && n<91)
	{tmp+=String.fromCharCode(n)}
  }
  return tmp;
}