var numcols = 20;
var values;
var data;

function updateValues(value) {
	values = [];
	data = [];
	
	// set up
	for (var i = 0; i < numcols; ++i) {
		values[i] = [];
	}

	for (var i = 0 ; i < (numcols-2)/3;++i){
		data[i] = [];
	}

	var vigor_bonus = value / 300;
	var rage_bonus = (value * 22 / 3000);
	var och_bonus = value / 200;

	// now fill each with data
	var start = (document.getElementById("from_val").value) - 1;
	var end = (document.getElementById("to_val").value);
	for (var i = start; i < end; ++i) {
		values[0][i - start] = i;
		var energy = i + 10;
		values[1][i - start] = energy;
		var min = energy * value / 3000;
		// no bandanna
		values[2][i - start] = min;
		values[3][i - start] = min * 1.5;
		values[4][i - start] = min * 2;
		data[0][i-start] = [i+1,min * 1.5];
		
		// bandanna of vigor
		var mv = (min + vigor_bonus)
		values[5][i - start] = mv;
		values[6][i - start] = mv * 1.5;
		values[7][i - start] = mv * 2;
		data[1][i-start] = [i+1,mv * 1.5];
		
		// bandanna of vitality
		var mt = min + energy / 150;
		values[8][i - start] = mt;
		values[9][i - start] = mt * 1.5;
		values[10][i - start] = mt * 2;
		data[2][i-start] = [i+1,mt * 1.5];

		// Bufanda de la Cabeza
		var mb = min + (energy / 120) + (value / 200) + 0.125;
		values[11][i - start] = mb;
		values[12][i - start] = mb * 1.5;
		values[13][i - start] = mb * 2;
		data[3][i-start] = [i+1,mb * 1.5];

		// Bandanna of rage
		var mr = min + rage_bonus;
		values[14][i - start] = mr;
		values[15][i - start] = mr * 1.5;
		values[16][i - start] = mr * 2;
		data[4][i-start] = [i+1,mr * 1.5];

		// Old Captain Hat
		var mc = min + och_bonus;
		values[17][i - start] = mc;
		values[18][i - start] = mc * 1.5;
		values[19][i - start] = mc * 2;
		data[5][i-start] = [i+1,mc * 1.5];

	}

}

// var numrows = 1000;
HandleKeyPressUpdate = function(e) {
	switch (e.keyCode) {
		case e.DOM_VK_RETURN :
		case e.DOM_VK_ENTER :
			updateData((Number(document.getElementById('hideout').options[document
					.getElementById('hideout').selectedIndex].value)));
		case e.DOM_VK_ESCAPE :
			content.focus();
			return;
	}
}

function validate() {
	var to = document.getElementById('to_val').value;
	var from = document.getElementById('from_val').value;
	var pass = true;
	var test_reg = /[\D]/;
	if ((test_reg.test(to)) || (test_reg.test(from))) {
		alert("From and To values must be numbers");
		pass = false;
	} else {
		if (Number(from) > Number(to)) {
			alert("From value must be smaller than To value\nFrom: " + from
					+ "\nTo: " + to);
			pass = false;
		}
	}
	return pass;
}

function updateData(value) {
	if (!validate())
		return;
	updateValues(value);
	onLoad();
	loadFlotr(value);
}

function loadFlotr(value) {
	var f = Flotr.draw($('container'), [
		{ data: data[0],
		color: 'red',
		label: 'No Bandanna',
			mouse: { lineColor: 'red' } },
		{ data: data[1],
		color: 'blue',
		label: 'Bandanna of Vigor',
			mouse: { lineColor: 'blue' } },
		{ data: data[2],
		color: 'green',
		label: 'Bandanna of Vitality',
			mouse: { lineColor: 'green' } }, 
		{ data: data[3],
		color: 'purple',
		label: 'Bufanda de la Cabeza',
			mouse: { lineColor: 'purple' } },
		{ data: data[4],
		color: 'orange',
		label: 'Bandanna of Rage',
			mouse: { lineColor: 'orange' } },
		{ data: data[5],
		color: 'brown',
		label: 'Old Captain\'s Hat',
			mouse: { lineColor: 'brown' } }
		], {
				points : {
					show:true,
					radius:2
				},
				lines: {
					show:true
				},
				mouse : {
					track : true,
					lineColor : 'purple',
					radius:2,
					relative : true,
					position : 'se',
					sensibility : 1, // => The smaller this value, the more
										// precise you've to point
					trackDecimals : 3,
					trackFormatter : function(obj) {
						return obj.y + ' @ Level ' + Math.round(obj.x) ;
					}
				},
				title: 'Average Training Values',
			subtitle: 'Awake: ' + value,
			xaxis:{
				labelsAngle: 45,
				title: 'Level'
			},
			yaxis:{
				title: 'Average Train'
			},
			grid:{
				verticalLines: false,
				backgroundColor: 'white'
			},
			HtmlText: false,
			legend: {
				position: 'nw'
			}

			});

}


function tp(value) {
	return Math.round((value * 1000)) / 1000;
}

function makeCell(color, text) {
	if ((typeof text).toLowerCase() == "number") text = tp(text);
	text = text || "";
	var cell = document.createElement("td");
	var out_div = document.createElement("div");
	var in_div1 = document.createElement("div");
	var in_div2 = document.createElement("div");

	// set the styles for the div objects
	out_div.setAttribute("class", "outer");
	in_div2.setAttribute("class", "text");
	in_div1.setAttribute("class", "bg");

	// for IE (up to 7) since it appears to lack proper support for setAttribute
	out_div.className = "outer";
	in_div1.className = "bg";
	in_div2.className = "text";

	var celltext = document.createTextNode(text);
	in_div1.setAttribute("style", "background-color:" + color);
	in_div1.style.background = color; // for IE again

	// add our text to the second inner div
	in_div2.appendChild(celltext);

	// append the two inner divs to the outer div, then append the outer div to
	// the cell
	out_div.appendChild(in_div1);
	out_div.appendChild(in_div2);
	cell.appendChild(out_div);// out_div

	return cell;
}

function onLoad() {
	try {
	// get our table and select box
	var table = document.getElementById("tbl_body");
	while (table.hasChildNodes()) {
		table.removeChild(table.firstChild);
	}
	var hideout = document.getElementById("hideout");

	var row; // tr DOM object
	// divs. one on the outside, one for the
	// background color and one for the text
	// loop through the number of rows we want
	var start = (document.getElementById("from_val").value) - 1;
	var end = (document.getElementById("to_val").value);
	for (var i = start; i < end; ++i) {


		// create this row and set the style for even or odd.
		row = document.createElement("tr");
		row.setAttribute("class", (i % 2 == 0) ? "even" : "odd");
		row.className = (i % 2 == 0) ? "even" : "odd";
		// get a new, clean array to work with

		// level
		row.appendChild(makeCell('yellow', String(i + 1)));
		// energy
		row.appendChild(makeCell('yellow', String(i + 10)));
		// no bandanna
		row.appendChild(makeCell('red',values[2][i-start]));
		row.appendChild(makeCell('red',values[3][i-start]));
		row.appendChild(makeCell('red',values[4][i-start]));

		// vigor
		row.appendChild(makeCell('blue',values[5][i-start]));
		row.appendChild(makeCell('blue',values[6][i-start]));
		row.appendChild(makeCell('blue',values[7][i-start]));

		// vitality
		row.appendChild(makeCell('green',values[8][i-start]));
		row.appendChild(makeCell('green',values[9][i-start]));
		row.appendChild(makeCell('green',values[10][i-start]));

		// bufanda
		row.appendChild(makeCell('purple',values[11][i-start]));
		row.appendChild(makeCell('purple',values[12][i-start]));
		row.appendChild(makeCell('purple',values[13][i-start]));

		// rage
		row.appendChild(makeCell('orange',values[14][i-start]));
		row.appendChild(makeCell('orange',values[15][i-start]));
		row.appendChild(makeCell('orange',values[16][i-start]));

		// och
		row.appendChild(makeCell('brown',values[17][i-start]));
		row.appendChild(makeCell('brown',values[18][i-start]));
		row.appendChild(makeCell('brown',values[19][i-start]));

		// add the row to the table, and push the row array onto our 2d cell
		// array
		table.appendChild(row);
	}
	/*
	 * then update the values. The operation performed in update() could have
	 * been included in the switch-case above, but then if I changed it, I'd
	 * need to change it in two places. Casts the value from the select box to
	 * Number. for *, / , etc. the value is interpreted as a number anyways, but
	 * for +, it assumes it's a string value.... so we have to cast it.
	 */
	// update(Number(hideout.options[hideout.selectedIndex].value));
	} catch(e) { alert(e.message); }
}