function addTones(word){


//Find the tone
tone = word.substr(word.length-1);
word = word.substring(0,word.length-1);
//Find the vowel at the end of the word
patt = /[aeiouv]$/;
check = word.search(patt);
//If the word doesn't end with a vowel, find the final vowel in the word
i=1;
while (check<0 && i<=word.length){
 check = word.substr(0, word.length-i).search(patt);
 i++;
}

/*TONE MARK RULES
When writing Pinyin, the placement of the tone mark is determined by these rules:
If there is only one vowel, it takes the diacritic.
If there is more than one vowel, then the vowels {a}, {e}, or {o} take the diacritic.
If the vowel cluster is {ao}, then {a} takes the diacritic.
If the vowel cluster is {iu} or {ui}, the last letter takes the diacritic.
*/
vowelONE = word.charAt(check);
//Is there another vowel (i.e. is this a diphthong)?
check2 = word.charAt(check-1).search(patt);
if(check2>=0){
 diphthong=true;
 vowelTWO = word.charAt(check-1);
	 if(vowelONE== 'a'){
	  vowelPos = check; 
	 }
	 else if(vowelTWO== 'a' || vowelTWO== 'e' || vowelTWO== 'o' ){
	  vowelPos = check-1; 
	 }
 
	 if(vowelONE== 'u' && vowelTWO== 'i'){
	  vowelPos = check; 
	 }
	 if(vowelONE== 'i' && vowelTWO== 'u'){
	  vowelPos = check; 
	 }
	 if( (vowelONE== 'o' || vowelONE=='a' || vowelONE=='e' )&& vowelTWO== 'u'){
	  vowelPos = check;
	 }
	 if(vowelTWO=='i' && vowelONE=='e'){
		vowelPos = check; 
	 }
}
 
else{
 vowelPos = check;
}


theVowel = word.charAt(vowelPos);
switch (theVowel){
	case "a":
	  switch (tone){
	   	case "0":
	      newVowel = theVowel;
		  break;
	   	case "1":
	   		newVowel = "&#257;";
			break;
		case "2":
	   		newVowel = "&#225;";
			break;
		case "3":
	   		newVowel = "&#462;";
			break;
		case "4":
	   		newVowel = "&#224;";
			break;
		default: 
			newVowel = "x";
		}
		break;
	case "e":
	  switch (tone){
	   	case "0":
	      newVowel = theVowel;
		  break;
	   	case "1":
	   		newVowel = "&#275;";
			break;
		case "2":
	   		newVowel = "&#233;";
			break;
		case "3":
	   		newVowel = "&#283;";
			break;
		case "4":
	   		newVowel = "&#232;";
			break;
		default: 
			newVowel = "x";
		}
		break;
	case "i":
	  switch (tone){
	   	case "0":
	      newVowel = theVowel;
		  break;
	   	case "1":
	   		newVowel = "&#299;";
			break;
		case "2":
	   		newVowel = "&#237;";
			break;
		case "3":
	   		newVowel = "&#464;";
			break;
		case "4":
	   		newVowel = "&#236;";
			break;
		default: 
			newVowel = "x";
		}
		break;
	case "o":
	  switch (tone){
	   	case "0":
	      newVowel = theVowel;
		  break;
	   	case "1":
	   		newVowel = "&#333;";
			break;
		case "2":
	   		newVowel = "&#243;";
			break;
		case "3":
	   		newVowel = "&#466;";
			break;
		case "4":
	   		newVowel = "&#242;";
			break;
		default: 
			newVowel = "x";
		}
		break;
	case "u":
	  switch (tone){
	   	case "0":
	      newVowel = theVowel;
		  break;
	   	case "1":
	   		newVowel = "&#363;";
			break;
		case "2":
	   		newVowel = "&#250;";
			break;
		case "3":
	   		newVowel = "&#468;";
			break;
		case "4":
	   		newVowel = "&#249;";
			break;
		default: 
			newVowel = "x";
		}
		break;
	case "v":
	  switch (tone){
	   	case "0":
	      newVowel = "&uml;";
		  break;
	   	case "1":
	   		newVowel = "&#470;";
			break;
		case "2":
	   		newVowel = "&#472;";
			break;
		case "3":
	   		newVowel = "&#474;";
			break;
		case "4":
	   		newVowel = "&#476;";
			break;
		default: 
			newVowel = "x";
		}
		break;
	
}

//Now replace the vowel with the newVowel
word = word.substr(0,vowelPos) + newVowel + word.substr(vowelPos+1);



return word;
}

 var theChar;
 var onShow; 
 var current;
 var previous;
 var current2;
 var previous2;
 var rn;
 var rn2;
 
function randomChar(b){ // b means 'go back' and is true only if called by the 'b' event in keycheck
 previous = current;
 current = rn;
 previous2 = current2;
 current2 = rn2;
 if(b&&previous){ // use the previous item, if there is one
  rn = previous;
  rn2 = previous2;
 }
 else{ // go to a new, random item
	 rn=Math.floor(Math.random()*chars.length);
	 rn2=Math.floor(Math.random()*3);
 }
 theChar = rn;
 onShow = rn2;
 disp = chars[rn][rn2];
 if (rn2 == 1){
 	disp = addTones(disp);
 }
 /*
  * Old layout
 document.getElementById('charBox').innerHTML = disp;
 document.getElementById('ansBox').innerHTML = "";
 document.getElementById('nextButton').focus();
 */
 
 //New layout
if(rn2==0){ // show character only
	document.getElementById('charBox').innerHTML = chars[rn][0];
	document.getElementById('charBox').className = "box";
	document.getElementById('pinyinBox').innerHTML = "?";
	document.getElementById('pinyinBox').className = "question";
	document.getElementById('engBox').innerHTML = "?";
	document.getElementById('engBox').className = "question";
}
else if(rn2==2){ // show English only
	document.getElementById('charBox').innerHTML = "?";
	document.getElementById('charBox').className = "question";
	document.getElementById('pinyinBox').innerHTML = "?";
	document.getElementById('pinyinBox').className = "question";
	document.getElementById('engBox').innerHTML = chars[rn][2];
	document.getElementById('engBox').className = "box";

}
else{ // show pinyin and English only
	document.getElementById('charBox').innerHTML = "?";
	document.getElementById('charBox').className = "question";
	document.getElementById('pinyinBox').innerHTML = addTones(chars[rn][1]);
	document.getElementById('pinyinBox').className = "box";	
	document.getElementById('engBox').innerHTML = chars[rn][2];
	document.getElementById('engBox').className = "box";	
}
 
}


function showAnswer(){
	ch = chars[theChar];
if(rn2==0){
	 document.getElementById('pinyinBox').innerHTML = addTones(chars[rn][1]);
	 document.getElementById('pinyinBox').className = "box revealedAnswer";
	 document.getElementById('engBox').innerHTML = chars[rn][2]; 
	 document.getElementById('engBox').className = "box revealedAnswer"; 
	 
}
else if(rn2==2){
	 document.getElementById('pinyinBox').innerHTML = addTones(chars[rn][1]);
	 document.getElementById('pinyinBox').className = "box revealedAnswer";
	 document.getElementById('charBox').innerHTML = chars[rn][0]; 
	 document.getElementById('charBox').className = "box revealedAnswer"; 
	 
}
else{
	document.getElementById('charBox').innerHTML = chars[rn][0];
	document.getElementById('charBox').className = "box revealedAnswer";
}
}

function revealPinyin(){
	 document.getElementById('pinyinBox').innerHTML = addTones(chars[rn][1]);
	 document.getElementById('pinyinBox').className = "box revealedAnswer";
}


function revealCharacter(){
	 document.getElementById('charBox').innerHTML = chars[rn][0];
	 document.getElementById('charBox').className = "box revealedAnswer";
}


function revealEnglish(){
	 document.getElementById('engBox').innerHTML = chars[rn][2];
	 document.getElementById('engBox').className = "box revealedAnswer";
}


document.onkeyup = KeyCheck; 

function KeyCheck(e){

var code = (window.event) ? event.keyCode : e.keyCode;
 if(code=="78" || code=="39"){randomChar()} // key: n or right arrow
 if(code=="67"){revealCharacter()} // key: c
 if(code=="80"){revealPinyin()} // key: p
 if(code=="69"){revealEnglish()} // key: e
 if(code=="65" || code=="32"){showAnswer()} // key: a or spacebar
 if(code=="66" || code=="37"){randomChar(true)} // key: b or left arrow

}