function updateLastScreenQuestion(screen, question){
	
	userData.setValue("last_screen", screen);
	userData.setValue("last_question", question);
	$('last_screen').value = screen;
	$('last_question').value = question;
}


function removeObservers() { //alert('removeObservers');
	// call before drawing new UI elements
	  var inputs = $('setvalue').getElements();
	  for (var i = 0; i < inputs.length; i++) {
	  	if (inputs[i].type == 'radio') {
			Event.stopObserving(inputs[i], 'click', function(event){
			// add code
			});
		} else {
			Event.stopObserving(inputs[i], 'change', function(event){
			// add code
			});
			
		}
	  }
}


function populateForm() { //alert('populateForm');


	var traceString = "";
	  var inputs = $('setvalue').getElements();
	  for (var i = 0; i < inputs.length; i++) {
	  	if (inputs[i].type == 'radio') {
			Event.observe(inputs[i], 'click', function(event){
				//alert('radio ' + Event.element(event).id + " " + Event.element(event).getValue() );
				userData.setValue(Event.element(event).id, Event.element(event).getValue());
				Event.element(event).removeClassName('default-answer');
				
				if (Event.element(event).id == 'refrigerator_qty') {
				  	var num = Event.element(event).getValue();
					for (var n = 1; n <= 3; n++) {
						if (n <= num) {
							$('has_refrigerator_'+n).value = 1;
						} else {
							$('has_refrigerator_'+n).value = 0;
						}
					}
						
				}
				if (Event.element(event).id == 'vehicle_qty') {
				  	var num = Event.element(event).getValue();
					for (var n = 1; n <= 3; n++) {
						if (n <= num) {
							$('has_car_'+n).value = 1;
						} else {
							$('has_car_'+n).value = 0;
						}
					}
						
				}
				if (Event.element(event).id == 'car_1_year') {
				} else if (Event.element(event).id == 'car_2_year') {
				} else if (Event.element(event).id == 'car_3_year') {
				} else if (Event.element(event).id == 'car_1_Make') {
				} else if (Event.element(event).id == 'car_2_Make') {
				} else if (Event.element(event).id == 'car_3_Make') {
				
				} else {
			    	sendAjaxRequest();
				}
				
			});
		
		}
		else {
			Event.observe(inputs[i], 'change', function(event){
				//alert('populateForm ' + Event.element(event).id + " " + Event.element(event).getValue() );
				
				userData.setValue(Event.element(event).id, Event.element(event).getValue());
				Event.element(event).removeClassName('default-answer');
				
				//add special case here for refrigerators.  if user toggles number of refrigerators, setValue for has_refrigerator_1, 2, and 3.	
				if (Event.element(event).id == 'refrigerator_qty') {
				  	var num = Event.element(event).getValue();
					if (num == 1) { 
						userData.setValue('has_refrigerator_1', 1);
						userData.setValue('has_refrigerator_2', 0);
						userData.setValue('has_refrigerator_3', 0);
						
					} else if (num ==2) { 
						userData.setValue('has_refrigerator_1', 1);
						userData.setValue('has_refrigerator_2', 1);
						userData.setValue('has_refrigerator_3', 0);
						
					} else if (num == 3 ) {
						userData.setValue('has_refrigerator_1', 1);
						userData.setValue('has_refrigerator_2', 1);
						userData.setValue('has_refrigerator_3', 1);
					}
					
				  	var num = Event.element(event).getValue();
					for (var n = 1; n <= 3; n++) {
						if (n <= num) {
							$('has_refrigerator_'+n).value = 1;
						} else {
							$('has_refrigerator_'+n).value = 0;
						}
					}
						
				}
				
				//add special case here for cars.  if user toggles number of cars, setValue for has_car_1, 2, and 3.	
				if (Event.element(event).id == 'vehicle_qty') {
				  	var num = Event.element(event).getValue();
					if (num == 1) { 
						userData.setValue('has_car_1', 1);
						userData.setValue('has_car_2', 0);
						userData.setValue('has_car_3', 0);
						
					} else if (num ==2) { 
						userData.setValue('has_car_1', 1);
						userData.setValue('has_car_2', 1);
						userData.setValue('has_car_3', 0);
						
					} else if (num == 3 ) {
						userData.setValue('has_car_1', 1);
						userData.setValue('has_car_2', 1);
						userData.setValue('has_car_3', 1);
					}
					
				  	var num = Event.element(event).getValue();
					for (var n = 1; n <= 3; n++) {
						if (n <= num) {
							$('has_car_'+n).value = 1;
						} else {
							$('has_car_'+n).value = 0;
						}
					}
						
				}			
					
				if (Event.element(event).id == 'car_1_year') {
				} else if (Event.element(event).id == 'car_2_year') {
				} else if (Event.element(event).id == 'car_3_year') {
				} else if (Event.element(event).id == 'car_1_Make') {
				} else if (Event.element(event).id == 'car_2_Make') {
				} else if (Event.element(event).id == 'car_3_Make') {
				} else if (Event.element(event).id == 'car_1_Model') {
				} else if (Event.element(event).id == 'car_2_Model') {
				} else if (Event.element(event).id == 'car_3_Model') {
				
				} else {
			    	sendAjaxRequest();
				}
				
			});
		}
	  }
	// populates form elements with default values from userData object
	updateForm('setvalue', userData);
	
}


function updateFormZip(data) {
	//if (data.getValue('zip') != "" && data.getValue('zip').length == 5) {
		$('ScoresZip').value = data.getValue('zip');
	//}
	
}


/**
 * Given a form, retrieves all of the inputs from that form and sets their values
 * to whatever the userData object has stored under their id.
 * Also sets the "default-answer" class on any inputs where the userData contains
 * only a default answer (rather than an answer provided by the user).
 */
function updateForm(form, data) {
 // var inputs = $(form).getInputs('text');
  var inputs = $(form).getElements();
  for (var i = 0; i < inputs.length; i++) {
  
  	if (inputs[i].type == 'radio') {
  	
  		if (inputs[i].value == data.getValue(inputs[i].id)) {
  			inputs[i].checked = true;
  		}
  		else {
  			inputs[i].checked = false;
  		}
  		
  	}
  	else {
  		inputs[i].value = data.getValue(inputs[i].id);
  	}
  	
  	if (data.isDefaultValue(inputs[i].id)) {
  		inputs[i].addClassName('default-answer');
  	}
  	else {
  		inputs[i].removeClassName('default-answer');
  	}
  }
}


function updateFormElement(id) {
	
	$(id).value = userData.getValue(id);	
    if (userData.isDefaultValue(id)) {
      $(id).addClassName('default-answer');
    } else {
     $(id).removeClassName('default-answer');
    }
	
}


function updateScoresProjects(){
	updateScores(true, true);

}


function updateScores(animate, projectMode) {
	
	var scoreDiv = $('scores');
	var data = userData;
	var defaultAverageLili = 100;
	
	// UPDATING BAR CHART
    var liliScores = data.getScore('LILI');
	
	// SCORE CALCULATIONS
	var water = 	liliScores['fresh_water_user_ratio'];
	var energy = 	liliScores['energy_use_user_ratio'];
	var co2 =  		liliScores['co2_user_ratio'];
	var runoff = 	liliScores['runoff_user_ratio'];
	var wastewater = liliScores['wastewater_user_ratio'];
	var trash = 	liliScores['trash_user_ratio'];
	var money = 	liliScores['money_user_ratio'];
	
	//alert(wastewater);
	
	var v_water = 	Comma(liliScores['fresh_water_user'].toFixed(0));
	var v_energy = 	Comma(liliScores['energy_use_user'].toFixed(0));
	var v_co2 =  	Comma(liliScores['co2_user'].toFixed(0));
	// JWP modified to reverse values on 1-16-08
	//var v_runoff = 	Comma(liliScores['wastewater_user'].toFixed(0));
	//var v_wastewater = Comma(liliScores['runoff_user'].toFixed(0));
	var v_runoff = 	Comma(liliScores['runoff_user'].toFixed(0));
	var v_wastewater = Comma(liliScores['wastewater_user'].toFixed(0));
	var v_trash = 	Comma(liliScores['trash_user'].toFixed(0));
	var v_money = 	Comma(liliScores['money_user'].toFixed(0));
	

	// CALCULATE LILI
	var lili_base = liliScores['fresh_water_lili_base'];
	lili_base+= liliScores['energy_use_lili_base'];
	lili_base+= liliScores['co2_lili_base'];
	lili_base+= liliScores['wastewater_lili_base'];
	lili_base+= liliScores['runoff_lili_base'];
	lili_base+= liliScores['trash_lili_base'];
	lili_calculator = Math.round(lili_base);
	var total_proj_lili = 0;
	
	if (data['scores']['projects'] != null) {
		projectMode = true;
	}
	
	
	if (projectMode == true) {
		
		var projScores = data['scores']['projects'];
				// PROJECT RELATED SCORE CALCULATIONS
		var sumFreshWater 		= projScores['fresh_water_sum'];
		// Changed by JWP on 1-20-08 to count MBTU, not Energy towards energy bar
		var sumEnergy 			= projScores['energy_sum'];  // TODO: need to turn this to MBTU
		var sumCo2 				= projScores['co2_sum'];
		var sumWastewater 		= projScores['wastewater_sum'];
		var sumRunoff 			= projScores['runoff_sum'];
		var sumTrash 			= projScores['trash_sum'];
		var sumMoney			= projScores['money_sum'];
	
		var fresh_water_completed = projScores['fresh_water_completed'];
			//if (fresh_water_completed < 0) {fresh_water_completed = 0};
		var energy_use_completed = projScores['energy_use_completed'];
			//if (energy_use_completed < 0) {energy_use_completed = 0};
		var co2_completed = projScores['co2_completed'];
			//if (co2_completed < 0) {co2_completed = 0};
		var wastewater_completed = projScores['wastewater_completed'];
			//if (wastewater_completed < 0) {wastewater_completed = 0};
		var runoff_completed = projScores['runoff_completed'];
			//if (runoff_completed < 0) {runoff_completed = 0};
		var trash_completed = projScores['trash_completed'];
			//if (trash_completed < 0) {trash_completed = 0};
		var money_completed = projScores['money_completed'];
			//if (money_completed < 0) {money_completed = 0};
		
		var fresh_water_completed_ratio 	= projScores['fresh_water_completed_ratio'];
		var energy_use_completed_ratio 		= projScores['energy_use_completed_ratio'];
		var co2_completed_ratio 			= projScores['co2_completed_ratio'];
		var wastewater_completed_ratio 		= projScores['wastewater_completed_ratio'];
		var runoff_completed_ratio 			= projScores['runoff_completed_ratio'];
		var trash_completed_ratio 			= projScores['trash_completed_ratio'];
		var money_completed_ratio 			= projScores['money_completed_ratio'];
		
		
	// Added by JWP on 2-9-08 to change labels of bar charts
	  var v_water_comp_round = Math.round(fresh_water_completed/100)*100;
		var v_water_comp = 	Comma(v_water_comp_round.toFixed(0));
	// Energy units OK, no rounding needed
		var v_energy_comp = 	Comma(energy_use_completed.toFixed(0));
	  var v_co2_comp_round = Math.round(co2_completed/100)*100;
		var v_co2_comp =  	Comma(v_co2_comp_round.toFixed(0));
	  var v_runoff_comp_round = Math.round(runoff_completed/100)*100;
		var v_runoff_comp = 	Comma(v_runoff_comp_round.toFixed(0));
	  var v_wastewater_comp_round = Math.round(wastewater_completed/100)*100;
		var v_wastewater_comp = Comma(v_wastewater_comp_round.toFixed(0));
	  var v_trash_comp_round = Math.round(trash_completed/10)*10;
		var v_trash_comp = 	Comma(v_trash_comp_round.toFixed(0));
	  var v_money_comp_round = Math.round(money_completed/10)*10;
		var v_money_comp = 	Comma(v_money_comp_round.toFixed(0));
		
		//LILI REDUCTION FROM SELECTED PROJECTS
 		total_proj_lili = Math.round(projScores['lili_reduction']);

	}
	
	
	
	// if bar chart divs haven't been made yet then make them
	if ($('money_user') == undefined) {
		var divBarChart = $('scores');
		makeBarchartRow(divBarChart, 'fresh_water_user');
		makeBarchartRow(divBarChart, 'energy_use_user');
		makeBarchartRow(divBarChart, 'co2_user');
		makeBarchartRow(divBarChart, 'wastewater_user');
		makeBarchartRow(divBarChart, 'runoff_user');
		makeBarchartRow(divBarChart, 'trash_user');
		makeBarchartRow(divBarChart, 'money_user');
	}
	
	
	if (projectMode == false) {
		updateBarchartRow($('fresh_water_user'), 'Water', water, v_water,  "GAL", animate);
		//alert( $('energy_use_user') + ", " + 'Energy' + ", " +  energy + ", " +  v_energy + ", " +  "MBTU" + ", " +  animate  );
		updateBarchartRow($('energy_use_user'), 'Energy', energy, v_energy, "MBTU", animate);
		updateBarchartRow($('co2_user'), 'Carbon Dioxide', co2, v_co2, "LBS", animate);
		updateBarchartRow($('runoff_user'), 'Runoff', runoff, v_runoff, "GAL", animate);
		updateBarchartRow($('wastewater_user'), 'Wastewater', wastewater, v_wastewater, "GAL", animate);
		updateBarchartRow($('trash_user'), 'Trash', trash, v_trash, "LBS", animate);
		updateBarchartRow($('money_user'), 'Money', money, v_money, "$", animate);
	
	} else {
		
		// Added by JWP on 2-9-08 to change labels of bar charts
		updateBarchartRowProject($('fresh_water_user'), 'Water', water, v_water_comp, fresh_water_completed_ratio, fresh_water_completed, "GAL", animate, sumFreshWater);
		updateBarchartRowProject($('energy_use_user'), 'Energy', energy, v_energy_comp, energy_use_completed_ratio, energy_use_completed, "MBTU", animate, sumEnergy);
		updateBarchartRowProject($('co2_user'), 'Carbon Dioxide', co2, v_co2_comp, co2_completed_ratio, co2_completed, "LBS", animate, sumCo2);
		updateBarchartRowProject($('runoff_user'), 'Runoff', runoff, v_runoff_comp, runoff_completed_ratio, runoff_completed, "GAL", animate, sumRunoff);
		updateBarchartRowProject($('wastewater_user'), 'Wastewater', wastewater, v_wastewater_comp, wastewater_completed_ratio, wastewater_completed, "GAL", animate, sumWastewater);
		updateBarchartRowProject($('trash_user'), 'Trash', trash, v_trash_comp, trash_completed_ratio, trash_completed, "LBS", animate, sumTrash);
		updateBarchartRowProject($('money_user'), 'Money', money, v_money_comp, money_completed_ratio, money_completed, "$", animate, sumMoney);
		
	}
	
	
	
	
	//new Effect.Highlight('scores', {startcolor:'#ffff99', endcolor:'#ffffff'});

	// UPDATING LILI GRAPHICS AND SCORE
	final_lili_score = lili_calculator - total_proj_lili;
	updateLiliScoreGraphics(lili_calculator, total_proj_lili, final_lili_score, animate);

	
	if ($('colMeter') == undefined) {
		drawLILIMeter(final_lili_score, animate, defaultAverageLili);
		//updateLILIMeter(lili_base, animate);
	} else {
		updateLILIMeter(final_lili_score, animate, defaultAverageLili);
	}

	drawHouse(final_lili_score, animate, defaultAverageLili);

	if ($('avg_line') == undefined) {
		
		var divAvg = new Element('div', {id:'avg_line', 'class':'bar_chart_markers' });
			var div_0 = new Element('div', {'class':'marker_0_perc' }).update('0%<br/><img src="/images_calculator/bar_scale.gif"/>');
			var div_100 = new Element('div', {'class':'marker_100_perc' }).update('100%<br/>regional average');
			var div_200 = new Element('div', {'class':'marker_200_perc' }).update('200%<br/><img src="/images_calculator/bar_scale.gif"/>');
			var div_300 = new Element('div', {'class':'marker_300_perc' }).update('300%<br/><img src="/images_calculator/bar_scale.gif"/>');
			
			divAvg.appendChild(div_0);
			divAvg.appendChild(div_100);
			divAvg.appendChild(div_200);
			divAvg.appendChild(div_300);
			
		new Insertion.After($('money_user'),divAvg);
		
	}
		

	
	// ADDITIONAL BAR CHART GRAPHIC ELEMENTS
		if ($('bar_key') != undefined) {
			$('bar_key').remove();
		}
		//if (projectMode == true) {
		if (total_proj_lili > 0 ) {
			var divKey = new Element('div', {
				id: 'bar_key',
				'class': 'bar_chart_key'
			});
			var divKeyBar = new Element('div', {
				'class': 'key_bar',
				style: 'width:30px'
			}).update("&nbsp;");
			
			var divKeyBarLabel = new Element('div', {
				'class': 'label'
			}).update("w/ Projects");
			
			var divKeyBarBase = new Element('div', {
				'class': 'key_base',
				style: 'width:30px'
			}).update("&nbsp;");
			
			var divKeyBarBaseLabel = new Element('div', {
				'class': 'label'
			}).update("Baseline");
			
			var divWhatIs = new Element('div', {
				'class': 'explainBarchart'
			});
			var a = new Element('a', {
				href: '/pages/lili_graph',
				'class': 'help',
				target: '_blank'
			}).update('about this graph');
			divWhatIs.appendChild(a);
			
			divKey.appendChild(divKeyBar);
			divKey.appendChild(divKeyBarLabel);
			divKey.appendChild(divKeyBarBase);
			divKey.appendChild(divKeyBarBaseLabel);
			divKey.appendChild(divWhatIs);
			new Insertion.After($('avg_line'),divKey);
		} else {
		
			var divKey = new Element('div', {
				id: 'bar_key',
				'class': 'bar_chart_key'
			});
			var divKeyBar = new Element('div', {
				'class': 'key_bar',
				style: 'width:30px'
			}).update("&nbsp;");
			
			var divKeyBarLabel = new Element('div', {
				'class': 'label'
			}).update("Baseline");
			
			var divWhatIs = new Element('div', {
				'class': 'explainBarchart'
			});
			var a = new Element('a', {
				href: '/pages/lili_graph',
				'class': 'help',
				target: '_blank'
			}).update('about this graph');
			divWhatIs.appendChild(a);
			
			divKey.appendChild(divKeyBar);
			divKey.appendChild(divKeyBarLabel);
			divKey.appendChild(divWhatIs);
			new Insertion.After($('avg_line'),divKey);
		}
			
		
		
	
}

function updateLiliScoreGraphics(startScore, projScore, finalScore, animate) {
	
	if (projScore == 0) {
		
		if ($('startLiliScore') != undefined) {
			$('startLiliLabel').update("&nbsp;");
			$('startLiliScore').remove();
		}
		$('symbol1').update("&nbsp;");
		
		if ($('projLiliScore') != undefined) {
			$('projLiliScore').remove();
			$('projLiliScoreContainer').update("<br/>YOUR LOW IMPACT LIVING INDEX (LILI) IS:");
			$('projLiliLabel').update("");
		}
		$('symbol2').update("&nbsp;");
		
		/*<li><br/><a href='/scores/faq' class="help" >what is this?</a></li>*/
		
	} else {
		
		if ($('startLiliScore') == undefined) {
			var div = new Element('div', {'class':'lili_circle_light', id:'startLiliScore'} );
			var kids = $('startLili').childElements();
			kids[1].appendChild(div);
		}
		$('startLiliLabel').update("STARTING<br/>LILI");
		$('startLiliScore').update(startScore);
		
		$('symbol1').update("-");
		
		
		$('projLiliScoreContainer').update("");
		if ($('projLiliScore') == undefined) {
			var div = new Element('div', {'class':'lili_circle', id:'projLiliScore'} );
			var kids = $('projLili').childElements();
			kids[1].appendChild(div);
		}
		$('projLiliLabel').removeClassName("bigLabel");
		$('projLiliLabel').update("PROJECT<br/>REDUCTIONS");
		
		$('symbol2').update("=");
		
		$('projLiliScore').update(projScore);
		
		
	}
	$('finalLiliScore').update(finalScore);

	if (animate == true) {
		$('finalLiliScore').setStyle({
			color: '#ffffff'
		});
		new Effect.Morph($('finalLiliScore'), {
			style: {
				color: '#2abbd4'
			}
		});
		if (projScore > 0) {
			$('projLiliScore').setStyle({
				color: '#2abbd4'
			});
			new Effect.Morph($('projLiliScore'), {
				style: {
					color: '#ffffff'
				}
			});
		}
	} else {
		$('finalLiliScore').setStyle({
			color: '#2abbd4'
		});
		if (projScore > 0) {
			$('projLiliScore').setStyle({
				color: '#ffffff'
			});
		}
		
	}
	
}

function drawLILIMeter(final_lili_score, animate, defaultAverageLili){
	
	var divMeter = new Element('div', {id:'colMeter', 'class':'colMeter' });
	var divPush = new Element('div', {id:'meterBallPush'});
	var divBall = new Element('div', {id:'meterBall'}).update("<img src='/images_calculator/meter_ball.gif'/>");
	divMeter.appendChild(divPush);
	divMeter.appendChild(divBall);
	new Insertion.After($('colLili'),divMeter);
	
	updateLILIMeter(final_lili_score, animate, defaultAverageLili);
}


function updateLILIMeter(final_lili_score, animate, defaultAverageLili) {
	
		var final_lili_perc = (final_lili_score / defaultAverageLili) * 100;
	
		if ($('meterBallPush') != undefined) {
			
			var pushMe;
			if (final_lili_perc <= 0) {
				pushMe = 118-4;
			} else if (final_lili_perc == 100) {
				pushMe = 88-4;
			} else if (final_lili_perc == 150) {
				pushMe = 57-4;
			} else if (final_lili_perc > 150) {
				pushMe = 57-4;
			} else if (final_lili_perc < 100) {
				pushMe = 118 - ((30 / 100) * final_lili_perc)  - 4;
			} else {
				pushMe = 88 + ((30 / 50) * (100 - final_lili_perc))  - 4;
			}
			
			if (animate == true) {
				new Effect.Morph($('meterBallPush'), {
					style: {
						height: pushMe + 'px'
					}
				});
			}
			else {
				$('meterBallPush').setStyle({
					height: pushMe + 'px'
				});
			}
		}
}

function makeBarchartRow(target, id) {
	
	var div = new Element('div', {id:id, 'class':'bar_chart'});
		var divCont = new Element('div', {'class':'bars'});
		var divLabel = new Element('div', {'class':'label'});
		var divBar = new Element('div', {'class':'bar'});
		var divBase = new Element('div', {'class':'base'});
		var divValue = new Element('div', {'class':'value'});
		
			divCont.appendChild(divBase);
				divCont.appendChild(divBar);
				
		div.appendChild(divCont);
		div.appendChild(divLabel);
		div.appendChild(divValue);
	
	target.appendChild(div);
}

function updateBarchartRow(el, label, value, actualValue, unit, animate){

	if (value < 0) { value = 0;}

	var contEl = el.getElementsByClassName('bars');
	var labelEl = el.getElementsByClassName('label');
	var valueEl = el.getElementsByClassName('value');
	var barEl = el.getElementsByClassName('bar');
	var baseEl = el.getElementsByClassName('base');
	var unitEl = el.getElementsByClassName('unit');
	labelEl[0].update(label);
	valueEl[0].update(actualValue + " " + unit);
	
	var barW = 80 * value;
	if (barW > 240) {
		barW = 240;
	}
		
	var contW = barW;
	
	if (animate == true) {
		 new Effect.Morph(barEl[0],{
			 style:{
			 	width: barW + 'px'
			 }
		 });
		 new Effect.Morph(baseEl[0],{
			 style:{
			 	width: '0px'
			 }
		 });
		 new Effect.Morph(contEl[0],{
			 style:{
			 width: contW + 'px'
			 }
		 });
	}
	else {
	
		barEl[0].setStyle({
			width: barW + 'px'
		});
		baseEl[0].setStyle({
			width: '0px'
		});
		contEl[0].setStyle({
			width: contW + 'px'
		});
	}
}


function makeBarchartRowProject(target, id) {

	var div = new Element('div', {id:id, 'class':'bar_chart'});
		var divCont = new Element('div', {'class':'bars'});
		var divLabel = new Element('div', {'class':'label'});
		var divBar = new Element('div', {'class':'bar'});
		var divBase = new Element('div', {'class':'base'});
		var divValue = new Element('div', {'class':'value'});
			divCont.appendChild(divBar);
			divCont.appendChild(divBase);
		div.appendChild(divCont);
		div.appendChild(divLabel);
		div.appendChild(divValue);
	
	target.appendChild(div);
}

function updateBarchartRowProject(el, label, ratio, actualValue, p_ratio, p_actual, unit, animate, sum){

	if (sum == 0) {
		 updateBarchartRow(el, label, ratio, actualValue, unit, animate);
		 
	} else { 
		var contEl = el.getElementsByClassName('bars');
		var labelEl = el.getElementsByClassName('label');
		var valueEl = el.getElementsByClassName('value');
		var baseEl = el.getElementsByClassName('base');
		var barEl = el.getElementsByClassName('bar');
		var unitEl = el.getElementsByClassName('unit');
		labelEl[0].update(label);
		valueEl[0].update(actualValue + " " + unit);
	
		var projW = 80 * p_ratio;
		if (projW > 240) {
			projW = 240;
		}
		
		var barW = 80 * ratio;
		if (barW > 240) {
			barW = 240;
		}
		
		var contW = projW;
		if (barW > projW) {
			contW = barW;
		}
		
		if (animate == true) {
			 new Effect.Morph(baseEl[0],{
				 style:{
				 width: barW + 'px'
				 }
			 });
			 new Effect.Morph(barEl[0],{
				 style:{
				 width: projW + 'px'
				 }
			 });
			 new Effect.Morph(contEl[0],{
				 style:{
				 width: contW + 'px'
				 }
			 });
			 
		} else {
			baseEl[0].setStyle({
				width: barW + 'px'
			});
			barEl[0].setStyle({
				width: projW + 'px'
			});
			contEl[0].setStyle({
				width: contW + 'px'
			});
		}
	}

}

var intval;
function drawHouse(final_lili_score, animate, defaultAverageLili){
	
	
	
	var final_lili_perc = (final_lili_score / defaultAverageLili) * 100;
		
	// get the canvas element using the DOM
	var canvas = $('house');
	
	// Make sure we don't execute when canvas isn't supported
	if (canvas.getContext){
	  // use getContext to use the canvas for drawing
	  endScale = final_lili_perc/150;
	  if (final_lili_perc > 150) {
	  	endScale = 1;
	  }

	// find house color
	var houseTxt;
	if (final_lili_score <= 25) {
		houseColor = '#00ff1d';
		houseTxt = "Now that's living light on the planet!";
	} else if (final_lili_score > 25 && final_lili_score <= 75) {
		houseColor = '#b6ff2f';
		houseTxt = "You're pretty low impact - nice work!";
	} else if (final_lili_score > 75 && final_lili_score <= 125) {
		houseColor = '#ffe400';
		houseTxt = "You're about average - plenty of room to improve!";
	} else if (final_lili_score > 125 && final_lili_score <= 200) {
		houseColor = '#ffc000';
		houseTxt = "Above average - lots of easy cuts to make!";
	} else if (final_lili_score > 200) {
		houseColor = '#ff9000';
		houseTxt = "Over 2x average - there's some real work to do!";
	}
	$('houseText').update(houseTxt);
	  
	  ctx = canvas.getContext('2d');
	
	  if (intval == undefined) {
	  } else {
	  	window.clearInterval(intval);
	  }
	  if (animate == true) {
	  	scaleInc = ((endScale - startScale) / numSteps).toFixed(4);
	  	currentScaleStep = 0;
	  	
		if (scaleInc != 0) {
			intval = setInterval(houseAnimator, 10);
		}
		
	  } else {
	  	houseDrawNoAnimate();
	  }
	
	
	} else {
	  alert('You need Safari, Firefox 1.5+, or IE 6+ to see this demo.');
	}

	
}


var houseAlreadyDrawn = false;
var startScale = 0;
var endScale = 1;
var scaleInc = .1;
var currentScale = .1;
var currentScaleStep = 0;
var numSteps = 10;
var houseColor;
var ctx;


function houseAnimator() {
	
	if (scaleInc > 0 && currentScale >= endScale) {
		window.clearInterval(intval);
		startScale = endScale;
	} else if (scaleInc < 0 && currentScale <= endScale) {
		window.clearInterval(intval);
		startScale = endScale;
	} else {
		ctx.clearRect(0, 0, 220, 141);
		var baseColor = '#c2ff4b';
		var topColor = '#94C923';
		var markerColor = '#649a00';
		var lineColorAvg = '#89e5f4';
		var lineColorWorst = '#f7c385';
		var lineColorLt = '#c8e5e1';
		var lineColorLt = '#03b5d2';
		var lineColorLt = '#ffffff';
		var skyColor = '#cdeaf2';
		
		currentScale = startScale + (currentScaleStep * scaleInc);
		ctx.clearRect(0, 0, 220, 141);
		drawRectangle(ctx, 220, 141, skyColor, false);
		drawHouseShape(ctx, currentScale, houseColor, true);
		drawHouseShape(ctx, .65, lineColorLt, false);
		currentScaleStep = currentScaleStep + 1;
	}

}

function houseDrawNoAnimate() {

		ctx.clearRect(0, 0, 220, 141);
		var baseColor = '#c2ff4b';
		var topColor = '#94C923';
		var markerColor = '#649a00';
		var lineColorAvg = '#89e5f4';
		var lineColorWorst = '#f7c385';
		var lineColorLt = '#c8e5e1';
		var lineColorLt = '#03b5d2';
		var lineColorLt = '#ffffff';
		var skyColor = '#cdeaf2';
		
		currentScale = endScale;
		ctx.clearRect(0, 0, 220, 141);
		drawRectangle(ctx, 220, 141, skyColor);
		drawHouseShape(ctx, currentScale, houseColor, true);
		drawHouseShape(ctx, .65, lineColorLt, false);

}

function drawRectangle(ctx, w, h, color) {
	
	  var p0x = 0;
	  var p0y = 0;
	  
	  var p1x = w;
	  var p1y = 0;
	  
	  var p2x = w;
	  var p2y = h;
	  
	  var p3x = 0;
	  var p3y = h;
	  
	  ctx.beginPath();
	  ctx.moveTo(p0x, p0y);
	  ctx.lineTo(p1x, p1y);
	  ctx.lineTo(p2x, p2y);
	  ctx.lineTo(p3x, p3y);
	  ctx.closePath();
	  ctx.fillStyle = color;
	  ctx.fill();
}

function drawHouseShape(ctx, scale, color, fill){
	
	  var lili = scale * 150;
	
	  var maxW = 150;
	  var maxS = 84;
	  var maxP = 47;
	  var maxH = maxS + maxP;
	  var minS = 24;
	  var medS = minS + ((maxS - minS)/2);
	  var marginY = 10;
	  var marginX = 0;
	  var originX = marginX;
	  var originY = marginY + maxH;
	  
		var s;
		if (lili <= 0) {
			s = minS;
		} else if (lili == 100) {
			s = medS;
		} else if (lili == 150) {
			s = maxS;
		} else if (lili > 150) {
			s = maxS;
		} else if (lili < 100) {
			s = minS + ((30 / 100) * lili);
		} else {
			s = medS + ((30 / 50) * (lili - 100));
		}


	  var p = (s * maxP)/maxS;
	  var w = (s * maxW)/maxS;
	  var h = s + p;
	  
	  var p0x = originX;
	  var p0y = originY;
	  
	  var p1x = originX;
	  var p1y = originY - s;
	  
	  var p2x = originX + (w/2);
	  var p2y = originY - h;
	  
	  var p3x = originX + (w);
	  var p3y = originY - s;
	  
	  var p4x = originX + (w);
	  var p4y = originY;
	  
	  
	 
	 if (fill == true) {
		  ctx.beginPath();
		  ctx.moveTo(p0x, p0y);
		  ctx.lineTo(p1x, p1y);
		  ctx.lineTo(p2x, p2y);
		  ctx.lineTo(p3x, p3y);
		  ctx.lineTo(p4x, p4y);
		  ctx.closePath();
		  ctx.fillStyle = color;
		  ctx.fill();
	 
	 }
	 else {
	 	ctx.strokeStyle = color;
	 	ctx.lineWidth = 2.5;
	 	ctx.beginPath();
	 	ctx.moveTo(p1x, p1y);
	 	//ctx.lineTo(p1x, p1y);
	 	ctx.lineTo(p2x, p2y);
	 	ctx.lineTo(p3x, p3y);
	 	ctx.lineTo(p4x, p4y);
	 	//ctx.closePath();
	 	ctx.stroke();
	 }
	  
}



 
 function Comma(number) {
	number = '' + number;
	if (number.length > 3) {
	var mod = number.length % 3;
	var output = (mod > 0 ? (number.substring(0,mod)) : '');
	for (i=0 ; i < Math.floor(number.length / 3); i++) {
	if ((mod == 0) && (i == 0))
	output += number.substring(mod+ 3 * i, mod + 3 * i + 3);
	else
	output+= ',' + number.substring(mod + 3 * i, mod + 3 * i + 3);
	}
	return (output);
	}
	else return number;
}