$(document).bind('ready', function () {
	// start with a placeholder at the end; later it should float...
	function render_all () {
	    total_raw_cost = 0.0;
	    $("tr > td:last-child").each(function(idx) {
		    if ( $(this).attr("count") ) {
			count = Number($(this).attr("count")); 
			cost = count * Number($(this).text().replace("$",""));
			// alert("this " + cost);
			total_raw_cost += cost;
			// consider *100 to avoid float issues later
		    }
		});

	    $("#raw").text("$" + total_raw_cost.toFixed(2));
	    tax_rate = 0.05;
	    tax_value = tax_rate * total_raw_cost;
	    $("#tax").text("$" + tax_value.toFixed(2));
	    tip_rate = 0.18;
	    tip_value = tip_rate * total_raw_cost;
	    $("#tip").text("$" + tip_value.toFixed(2));
	    total = total_raw_cost + tax_value + tip_value;
	    $("#total").text("$" + total.toFixed(2));
	};

	// make all prices into buttons:
	$("tr > td:last-child").wrapInner(document.createElement("button"));

	// clock on row -> increment count
	$("tr > td:last-child > button").click(function () {
		// alert("clicked " + this);
		if ($(this).parent().attr("count")) {
		    old_count = Number($(this).parent().attr("count"));
		    old_count += 1;
		} else {
		    old_count = 1;
		}
		$(this).parent().attr("count", old_count);
		render_all();
	    });


	$("div.total").after('<button id="clear">Clear</button>');
	$("button#clear").click(function () {
		$("tr > td:last-child").attr("count", "0");
		render_all();
	    });

	// initialize; should really insert the total-div here too
	render_all();
})