// JavaScript Document
if( document.getElementById ) {
	getElemById = function( id ) {
		return document.getElementById( id );
	}
} else if( document.all ) {
	getElemById = function( id ) {
		return document.all[ id ];
	}
} else if( document.layers ) {
	getElemById = function( id ) {
		return document.layers[ id ];
	}
}

function clickclear(thisfield, defaulttext) {
	if (thisfield.value == defaulttext) {
		thisfield.value = "";
	}
}

function clickrecall(thisfield, defaulttext) {
	if (thisfield.value == "") {
		thisfield.value = defaulttext;
	}
}


function showhide_swap( id) {
	if ( getElemById( id ).style.display == 'none' ) {
		getElemById( id ).style.display = '';
	}
	else
	{
		getElemById( id ).style.display = 'none';
	}
}

function hide_elem( id) {
	if(getElemById( id ).style.display == '')
	{
		getElemById( id ).style.display = 'none';
		return true;
	}
	else
	{
		return false;	
	}
}

function show_elem( id) {
	if(getElemById( id ).style.display == 'none')
	{
		getElemById( id ).style.display = '';
		return true;
	}
	else
	{
		return false;	
	}
}

function changeVal( id, id_val) {
	getElemById( id ).value = id_val;
}


function calculate_savings()
{
	var total = $("#savings_income").val() * 1;
	var commitment = $("#savings_commitment").val() * 1;
	var bills = $("#savings_bills").val() * 1;
	var total_costs = commitment + bills;
	var level = (total_costs / total) * 100;
	level = Math.round(level);
	var remaining = Math.round(total - total_costs);
	var rec_fun = Math.round(remaining * .1);
	var rec_neverknow = Math.round(remaining * .2);
	var rec_passive = Math.round(remaining * .3);
	var rec_retirement = Math.round(remaining * .3);
	var rec_give = Math.round(remaining * .1);
	
	if(total == 0) $("#savings_level").val("N/A");
	else $("#savings_level").val(level+"%");
	$("#savings_remaining").val(remaining);
	$("#rec_fun").html(rec_fun);
	$("#rec_neverknow").html(rec_neverknow);
	$("#rec_passive").html(rec_passive);
	$("#rec_retirement").html(rec_retirement);
	$("#rec_give").html(rec_give);
}


// example of innerHTML usage with divs, just for reference
var open_icon = "../images/open.gif";
var closed_icon = "../images/closed.gif";
function step1_toggle_open(var_id,open_id,current_status)
{
	var newDiv = document.createElement("div");
	newDiv.setAttribute('id',open_id);
	
	if(current_status == 0)
	{
		var icon = open_icon;
		var is_open = 1;
	}
	else
	{
		var icon = closed_icon;
		var is_open = 0;
	}
	newDiv.innerHTML = '<a href="javascript:step1_toggle_open(\'' + var_id + '\',\'' + open_id + '\',' + is_open + ')"><img src="' + icon + '" border="0"></a>';
	newDiv.innerHTML += '<input type="hidden" name="' + var_id + '" id="' + var_id + '" value="' + is_open + '"/>';
	var oldDiv = getElemById( open_id );
	oldDiv.parentNode.replaceChild(newDiv, oldDiv);
}