var bg;
var red;
var green;
var blue;
var diff;
var tries;
var hex = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
var feedback = new Array("Not quite there yet!", "Keep trying!", "Close!", "You're on the right track!");

function playSound() {
	document.all.music.src='tada.wav'
}


function calcColor(bgCol,col,txt) {

	col = '0x'+col;
	bgCol = '0x'+bgCol;
	
	if(col > bgCol) {
		diff = col - bgCol;
		dir = 'Increase';
	} else {
		diff = bgCol - col;
		dir = 'Decrease';
	}
	
	
	container = txt+'Line';
	spanline = txt+'Txt';
	
	
	if(diff == '0') {
		msg = 'Excellent - ' + txt + ' is perfect!';

	} else if('0x'+toHex(diff) < '0x22') {
		msg = dir + ' ' + txt + ' slightly.';
	} else if('0x'+toHex(diff) < '0x99') {
		msg = dir + ' ' + txt + '.';
	} else if('0x'+toHex(diff) < '0xCC') {
		msg = dir + ' ' + txt + '.';
	} else {
		msg = dir + ' ' + txt + ' a lot.';
	}
	
	document.getElementById(container).style.display = '';
	document.getElementById(spanline).innerHTML = msg
	
}

function toHex(dec) {
	if (dec < 0)
		return "00"
		
	if (dec > 255)
		return "FF"
		
	var i = Math.floor(dec / 16)
	var j = dec % 16
	return hex[i] + hex[j]
}


function changeTable(colorVal)
{

	if(document.getElementById('myRed').value.length == 2) {	
		tries++;
		var colorVal = "#"+document.getElementById('myRed').value+document.getElementById('myGreen').value+document.getElementById('myBlue').value;
		document.getElementById('myValue').style.backgroundColor= colorVal;


		if(colorVal == bg) {
			clearAll();
			document.getElementById('helpMsg').innerHTML = "Congratulations! You correctly estimated the color value! It is " + colorVal + ". It took you " + tries + " attempts to get the right value!";
			playSound();
		} else {
			calcColor(document.getElementById('myRed').value,red,'red');
			calcColor(document.getElementById('myGreen').value,green,'green');
			calcColor(document.getElementById('myBlue').value,blue,'blue');
			document.getElementById('helpMsg').innerHTML = feedback[Math.floor(Math.random()*feedback.length)];
		}
	} else {
		clearAll();
		document.getElementById('helpMsg').innerHTML = "Oops! Make sure you enter a proper value in the red, green AND blue input fields.";	
	}
}

function clearAll() {
	document.getElementById('redLine').style.display = 'none'; // hide red
	document.getElementById('greenLine').style.display = 'none'; // hide green
	document.getElementById('blueLine').style.display = 'none'; // hide blue
	document.getElementById('helpMsg').innerHTML = '';
}

function resetGame() {
	tries = 0;
	clearAll();
	document.getElementById('helpMsg').innerHTML = "The training tool has been reset."
	document.getElementById('myValue').style.backgroundColor = '#FFFFFF';
	document.getElementById('myRed').value = '';
	document.getElementById('myBlue').value = '';
	document.getElementById('myGreen').value = '';
	document.getElementById('myRed').focus();

	if(document.getElementById('myMode').checked) {
		resetEasyGame();
	} else {
		resetHardGame();
	}
}

function resetEasyGame() {
	red = hex[Math.floor(Math.random()*hex.length)];
	red = red+red;
	green = hex[Math.floor(Math.random()*hex.length)];
	green = green+green;
	blue = hex[Math.floor(Math.random()*hex.length)];
	blue = blue+blue;
	bg = "#"+red+green+blue;
	document.getElementById('myColor').style.backgroundColor = bg;

}

function resetHardGame() {
	red = hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)];
	green = hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)];
	blue = hex[Math.floor(Math.random()*hex.length)]+hex[Math.floor(Math.random()*hex.length)];
	bg = "#"+red+green+blue;
	document.getElementById('myColor').style.backgroundColor = bg;
}

function showAnswer() {
	document.getElementById('helpMsg').innerHTML = "This color is represented by the value " + bg;
}

function checkFocus(id,object) {
	object.value = object.value.toUpperCase();
	if(id == 1) {
		if(document.getElementById('myRed').value.length == 2) {
			document.getElementById('myGreen').focus();
		}
	} else if(id == 2) {
		if(document.getElementById('myGreen').value.length == 2) {
			document.getElementById('myBlue').focus();
		}
	}
}

function showHelp() {
	document.getElementById('helpMsg').innerHTML = "In easy mode, the random colors that are generated are in the form #RRGGBB where RR, GG and BB can be 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE and FF.";

}

function checkValid(myEvent) {
	if (myEvent.keyCode < 48 || myEvent.keyCode > 102 || (myEvent.keyCode > 57 && myEvent.keyCode < 65) || (myEvent.keyCode > 70 && myEvent.keyCode < 97)) myEvent.returnValue = false;
}