function computeBmi(){
	var weight = document.getElementById('weight').value;
	var height= document.getElementById('height').value;
	// check to confirm that weight and height in valid range
	var errMsg = "";
	var withError = false;
	if (!checkRange(weight, 5, 200)){
		errMsg = errMsg  + "Weight must be between 5 and 200Kg\n";
		withError = true;
	} 
	if (!checkRange(height, 0.5, 10)){
		errMsg = errMsg  + "Height must be between 0.5 and 10m\n";
		withError = true;
	} 
	if (withError){
		alert (errMsg);
		return;
	}

	var bmi = "";
	if (height > 0){
		bmi = weight/height/height;
		bmi = bmi.toPrecision(3);
		var asianType = getType(bmi, "asian", 18.5, 23, 27.5);
		var caucasianType = getType(bmi, "caucasian", 18.5, 25, 30);
		document.getElementById('bmi').value = bmi;
		setAllColors(asianType, caucasianType);
	} else {
		setAllColors("", "");
	}
}

function getType(bmi, 
tag, range1, range2, range3){
	var retType = "";
	if (bmi < range1){
		retType = tag+"Underweight";
	} else if (bmi < range2){
		retType = tag+"Healthy";
	} else if (bmi < range3){
		retType = tag+"Overweight";
	} else {
		retType = tag+"Obese";
	}
	return retType;
}



function checkRange(value, lowRange, highRange){
	value = parseFloat(value);
	return (value >= lowRange && value <= highRange);
}		

function resetColor(){
	setAllColors("");
}

function setAllColors(asianType, caucasianType){
	setColor("asianUnderweight", asianType);
	setColor("asianHealthy",  asianType);
	setColor("asianOverweight", asianType);
	setColor("asianObese", asianType);
	setColor("caucasianUnderweight", caucasianType);
	setColor("caucasianHealthy",  caucasianType);
	setColor("caucasianOverweight", caucasianType);
	setColor("caucasianObese", caucasianType);
}

function setColor(setting, type){
	var color = "";
	if (setting == type){
		color = "yellow";
	}
	var elems = document.getElementsByName(setting);
	var len = elems.length;
	for (i = 0; i < len; i++){
		elems[i].style.background = color;
	}
}