var x = 0
var amount = 0
var per
var timesby
var total = 0;
var item_count = 0;
function filterNum(str) {
	re = /^\$|,/g;
	return str.replace(re, "");
}
function buildItem(item){
	item_count++;
	$('scroll').innerHTML += '<div class="question"><label>'+item+'</label><input type="text" value="$0" class="amount"><div class="radio"><input type="radio" name="radio'+item_count+'" value="W" checked /></div><div class="radio"><input type="radio" name="radio'+item_count+'" value="F" /></div><div class="radio"><input type="radio" name="radio'+item_count+'" value="M" /></div><div class="radio"><input type="radio" name="radio'+item_count+'" value="Q" /></div><div class="radio"><input type="radio" name="radio'+item_count+'" value="H" /></div><div class="radio"><input type="radio" name="radio'+item_count+'" value="A" /></div><input type="text" value="$0" class="total" readonly></div><div class="clear"></div>'
}
function calculate(){
	total = 0;
	$$('.question input').each(function(el) {
		if (x==0){
			amount=filterNum(el.value)
		}
		if (x>0 && x<=7){
			if (el.checked){
				per = el.value
				if (per == "W") timesby = "52"
				if (per == "F") timesby = "26"
				if (per == "M") timesby = "12"
				if (per == "Q") timesby = "4"
				if (per == "H") timesby = "2"
				if (per == "A") timesby = "1"
			}
		}
		x++
		if (x==8){
			el.value = "$" + amount * timesby
			x=0
		}
	});
	$$('.total').each(function(el) {
		if (el.value){
		total = total + (filterNum(el.value) * 1)
		$('total').value = "$" + total.toFixed(0)
	}
	});
		var re = /^\$|,/g;
		var t = $('income').value.replace(re, "")-$('total').value.replace(re, "");
		if (t>0){
			$('result').innerHTML = "You are left with $" + t + " each year."
		}else if(t==0){
			$('result').innerHTML = "You spend exactly how much you earn."
		}else{
			$('result').innerHTML = "You are behind $" + t + " each year and will go into debt."
		}
}

Element.observe(window, 'load', function(){
	$('annual_expenditure').innerHTML = '<div class="question"><label class="l_item">Item</label><label class="l_amount">Amount</label><label class="l_per">Per</label><label class="l_annual">Annual</label><div class="clear"></div></div><div class="clear"></div><div class="question"><label class="l_item"></label><label class="l_amount"></label><div class="radio">W</div><div class="radio">F</div><div class="radio">M</div><div class="radio">Q</div><div class="radio">H</div><div class="radio">A</div><div class="clear"></div></div><div class="clear"></div>' + $('annual_expenditure').innerHTML;
//
	$$('.question input').each(function(el) {
		Element.observe(el, 'click', function(){
			calculate()
		});
		Element.observe(el, 'keyup', function(){
			calculate()
		});
	});
	$$('.amount').each(function(el) {
		Element.observe(el, 'click', function(){
			if ($(el).value=="$0"){
				$(el).value="$";
			}
		});
		Element.observe(el, 'blur', function(){
			
			var re = /^\$|,/g;
			
			$(el).value="$"+$(el).value.replace(re, "");
		});
	});
	Element.observe($('income'), 'keyup', function(){
		var re = /^\$|,/g;
		var t = $('income').value.replace(re, "")-$('total').value.replace(re, "");
		if (t>0){
			$('result').innerHTML = "You are left with $" + t + " each year."
		}else if(t==0){
			$('result').innerHTML = "You spend exactly how much you earn."
		}else{
			$('result').innerHTML = "You are behind $" + t + " each year and will go into debt."
		}
	});
	
});