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("Noch nicht ganz!", "Versuchen Sie es noch einmal!", "Fast!", "Sie sind am richtigen Weg!");

// 20.08.06: modified by Mike, JasekIP:
// We play the sound only for Microsoft Internet Explorer users.
// FF 1.5 can't handle the <bgsound> and it's also not valid xhtml.
// Inside the post we show also the <bgsound> only to windows users (Post-ID=13).
// Also the javascript error "Error: [Exception... "'Permission denied to set property XULElement.selectedIndex'..."
// is a FF issue which maybe solved in FF 2.0.

var ver = navigator.appName;

function playSound() {
	document.all.music.src='http://www.webfarbentrainer.de/tada.wav'
}


function calcColor(bgCol,col,txt) {

	col = '0x'+col;
	bgCol = '0x'+bgCol;
	
	if(col > bgCol) {
		diff = col - bgCol;
		dir = 'Erhöhen Sie';
	} else {
		diff = bgCol - col;
		dir = 'Verringern Sie';
	}
	
	
	container = txt+'Line';
	spanline = txt+'Txt';
	
	
	if(diff == '0') {
		msg = 'Super - ' + txt + ' ist perfekt!';

	} else if('0x'+toHex(diff) < '0x22') {
		msg = dir + ' ' + txt + ' ein wenig...';
	} else if('0x'+toHex(diff) < '0x99') {
		msg = dir + ' ' + txt + '.';
	} else if('0x'+toHex(diff) < '0xCC') {
		msg = dir + ' ' + txt + '.';
	} else {
		msg = dir + ' ' + txt + ' um einiges!';
	}
	
	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 = "Gratuliere! Sie haben die Farbe richtig erraten! Es ist " + colorVal + ". Sie haben " + tries + " Versuche benötigt!<br /><br />Versuchen Sie es gleich noch einmal!";
			if (ver=="Microsoft Internet Explorer") {
				playSound();
			}
		} else {
			calcColor(document.getElementById('myRed').value,red,'rot');
			calcColor(document.getElementById('myGreen').value,green,'grün');
			calcColor(document.getElementById('myBlue').value,blue,'blau');
			document.getElementById('helpMsg').innerHTML = feedback[Math.floor(Math.random()*feedback.length)];
		}
	} else {
		clearAll();
		document.getElementById('helpMsg').innerHTML = "Oops! Stellen Sie sicher, daß Sie in die Felder richtige Werte für rot, grün und blau eingeben.";	
	}
}

function clearAll() {
	document.getElementById('rotLine').style.display = 'none'; // hide red
	document.getElementById('grünLine').style.display = 'none'; // hide green
	document.getElementById('blauLine').style.display = 'none'; // hide blue
	document.getElementById('helpMsg').innerHTML = '';
}

function resetGame() {
	tries = 0;
	clearAll();
	document.getElementById('helpMsg').innerHTML = "Die Farbe wurde neu gemischt.<br /><br />Wie lautet der RGB-Wert?"
	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 = "Diese Farbe wird durch<br />den Wert " + bg + " dargestellt.";
}

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();
		}
	} else if(id == 3) {
	  	if(document.getElementById('myBlue').value.length == 2) {
	  		document.getElementById('tool_submit').focus();
	  	}
	}
}

function showHelp() {
	document.getElementById('helpMsg').innerHTML = "Im Anfänger Modus werden die Farben nur aus folgenden #RRGGBB Werten erstellt: 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE und FF.<br /><br />Im Fortgeschrittenen Modus wird aus 255 möglichen Werten einer Farbe gewählt.";

}

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;
}