// JavaScript Document
var number = /^[0-9]{0,3}\.?[0-9]*$/;

$(document).ready( function(){
	$("#waistHipIndicator").css("visibility", "hidden");
	
	$("#goalSlidder").draggable({
		axis: 			'x',
		containment: 	'parent',
		stop: 			pointerToWH,
		drag: 			pointerToWH
	});
	
	$("input[name='waist']").change(function() {
		if (okay()) {
			displayPointer();
		} else {
			hidePointer();
		}
	});
	
	$("input[name='hip']").change(function() {
		if (okay()) {
			displayPointer();
		} else {
			hidePointer();	
		}
	});
	
	$("input[name='w2hGoal']").change(function() {
		if (number.test($(this).val()) & $(this).val() != "") {
			var goal = $(this).val() * 1;
			var percent = 100 * ((goal - $(".continuum0 span").text()) / ($(".continuum12 span").text()-$(".continuum0 span").text()));
			percent = (percent < 0) ? -1 : percent;
			percent = (percent > 100) ? 101 : percent;
			$("#goalSlidder").css("left", percent+"%");
			$("#goalSlidder").find("span").text(goal.toFixed(2));
			if (okay()) {
				displayPointer();
			}
		} else {
			$("input[name='w2hGoal']").val("");
			$("#goalSlidder").css("left", "0px")
			$("span#waistGoal").html("&nbsp;");
			$("span#difference").html("&nbsp;");
			$("#goalSlidder").find("span").html("&nbsp;");
		}
	});
});

function okay() {
	var okay = true;
	if (!number.test($("input[name='waist']").val()) | $("input[name='waist']").val() == "") {
		$("input[name='waist']").val("");
		okay = false;
	}
	
	if (!number.test($("input[name='hip']").val()) | $("input[name='hip']").val() == "") {
		$("input[name='hip']").val("");
		okay = false;
	}
	//check for age and sex and upload information
	return okay;
}

function displayPointer() {
	var waist = $("input[name='waist']").val() * 1;
	var hip =  $("input[name='hip']").val() * 1;
	
	var w2h = waist / hip;
	if (w2h) {
		$("span#w2h").text(w2h.toFixed(2));
		//display the indicator
		//calculate where the indicator needs to be
		var location = 100 * ((w2h - $(".continuum0 span").text()) / ($(".continuum12 span").text()-$(".continuum0 span").text()));
		location = (location <= 0) ? -1 : location;
		location = (location >= 100) ? 101 : location;
		$("#waistHipIndicator").css("left", location+"%")
		
		//display the pointer
		$("#waistHipIndicator").css("visibility", "visible").find("span").text(w2h.toFixed(2));
	}
	
	if ($("input[name='w2hGoal']").val() != "" & number.test($("input[name='w2hGoal']").val())) {
		//calcualte goals
		var w2hGoal = $("input[name='w2hGoal']").val();
		if (w2h) {
			var waistGoal = hip * w2hGoal;
			var difference = waist - waistGoal;
			$("span#waistGoal").text(waistGoal.toFixed(2));
			if (difference >= 0) {
				$("em#gainLoss").text("Loss");
			} else {
				difference *= -1;
				$("em#gainLoss").text("Gain");
			}
			$("span#difference").text(difference.toFixed(2));
		}
	}
}

function hidePointer() {
	//clear calculated fields
	$("span#difference").html("&nbsp;");
	$("span#waistGoal").html("&nbsp;");
	$("span#w2h").html("&nbsp;");
	
	//hide the pointer
	$("#waistHipIndicator").css("visibility", "hidden");
}

function pointerToWH() {
	var wh = (parseInt($("#goalSlidder").css("left")) / parseInt($("#goalSlidder").parent().css("width"))) * ($(".continuum12 span").text()-$(".continuum0 span").text()) + .6;
	$("#goalSlidder").find("span").text(wh.toFixed(2));
	$("input[name='w2hGoal']").val(wh.toFixed(2));
	displayPointer();
}