var html = '';
html += '<link type="text/css" rel="stylesheet" href="portals/0/Calculator/calculator.css" />';
html += '<div id="c2-calc">';
//html += '<h3>Home Office Calculator</h3>';
html += '<div id="c2-calc-form">';
html += '<table cellpadding="2" cellspacing="0">';
html += '<tr><th colspan="2"><div class="calc_title">Business Rent Calculator</div></th></tr>';
html += '<tr class="c2-calc-row-1"><td class="c2-calc-row-label"><label for="c2-calc-form-area-business">Area for Business</label>';
html += '</td><td><input type="text" id="c2-calc-form-area-business" /></td></tr>';
html += '<tr class="c2-calc-row-2"><td class="c2-calc-row-label"><label for="c2-calc-form-area-total">Area of House</label>';
html += '</td><td><input type="text" id="c2-calc-form-area-total" /></td></tr>';
//html += '<div><label for="c2-calc-form-percentage" style="display:block;">% used for Business</label>';
//html += '<input type="text" id="c2-calc-form-percentage" style="width: 70px;" /></div>';
html += '<tr class="c2-calc-row-3"><td class="c2-calc-row-label"><label for="c2-calc-form-expenses">Yearly Expenses</label>';
html += '</td><td><input type="text" id="c2-calc-form-expenses" /></td></tr>';
html += '<tr class="c2-calc-row-4"><td class="c2-calc-row-label"><label for="c2-calc-form-result">Business Rent Cost</label>';
html += '</td><td><input type="text" id="c2-calc-form-result" /></td></tr>';
html += '</table>';
html += '</div>';
html += '</div>';
document.write(html);

$(document).ready(function() {
	var area_total = 0;
	var area_business = 0;
	var percentage = 0;
	var expenses = 0;
	
	$("#c2-calc-form-area-total").change(function () {
		area_total = $(this).val();
		area_total = parseInt(area_total.replace(/[a-zA-Z\%\$\,]/g, ""));
		$(this).val(area_total);
		update_percentage();
	});
	$("#c2-calc-form-area-business").change(function () {
		area_business = $(this).val();
		area_business = parseInt(area_business.replace(/[a-zA-Z\%\$\,]/g, ""));
		$(this).val(roundNumber(area_business, 2));
		update_percentage();
	});
	$("#c2-calc-form-percentage").change(function () {
		percentage = $(this).val();
		percentage = parseFloat(percentage.replace(/[a-zA-Z\%\$\,]/g, ""));
		if (percentage > 100) {
			percentage = 100;
		}
		if (percentage < 0) {
			percentage = 0;	
		}
		$(this).val(roundNumber(percentage, 2) + "%");
		update();
	});
	
	$("#c2-calc-form-expenses").change(function () {
		expenses = $(this).val();
		expenses = expenses.replace(/[a-zA-Z\%\$\,]/g, "");
		$(this).val("$" + addCommas(roundNumber(expenses, 2)));
		update();
	});
	
	function update_percentage() {
		if (area_total != 0) {
			if (area_business > area_total ) {
				alert("ERROR: You cannot have more area dedicated to business than the total area of the house. Please correct the areas.");
				return;
			}
			percentage = area_business / area_total * 100;
			$("#c2-calc-form-percentage").val(roundNumber(percentage, 2) + "%");
			update();
		}
	}
	
	function update() {
		$("#c2-calc-form-result").val("$" + addCommas(calculate(percentage, expenses)));
	}
	
	function calculate(percentage, expenses) {
		return roundNumber(percentage / 100 * expenses, 2);
	}

	function roundNumber(number, decimals) {
		return Math.round(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
	}

	function addCommas(number) {
		number += ''; 
		var parts = number.split('.');
		var main = parts[0];
		var fraction = parts.length > 1 ? ('.' + parts[1]) : '';
		var regex = /(\d+)(\d{3})/;
		while(regex.test(main)) {
			main = main.replace(regex, '$1' + ',' + '$2');
		}
		return main + fraction;
	}
});