htmlBuilder = function() {
	var agent_element_suffix = "_element";
	var agent_dropdown_suffix = "_dropdown";
	var agent_status_suffix = "_status";
	var my_side;
	var blue_force_target;
	var village_sentiment_target;
	var hover_cb;
	var select_cb;
	var level_indicators = {};

	return {
		initialize : function(side, blue_target, village_target,
					option_hover, option_select) {
			my_side = side;
			blue_force_target = blue_target;
			village_sentiment_target = village_target;
			hover_cb = option_hover;
			select_cb = option_select;
			initialize_global_status_elements();
			build_bomb_report();
			setup_side_specific_elements();
		},

		changeSide : function(side) {
			$("#side").removeClass(my_side);
			$("#my_status").empty();
			my_side = side;
			setup_side_specific_elements();
		},

		updateStatus : function(agent_type, status) {
			var agent = agents[agent_type];
			var status_id = agent_type + agent_status_suffix;
			var element_id = agent_type + agent_element_suffix;
			$('#'+status_id).text(status);
			if (agent.color_class) {
				remove_functional_classes(element_id);
				$('#'+element_id).addClass(agent.color_class);
			}
			if (agent.fuel) {
				level_indicators[agent_type+"_fuel"].val(
					agent.fuel_level);
			}
		},

		setDropdown : function(agent_type, entries) {
			var dropdown_id = agent_type + agent_dropdown_suffix;

			/* remove old entries and renable dropdown menu */
			$("#"+dropdown_id).empty();
			$("#"+dropdown_id).prop("disabled", false);

			/* This is for the buggy select element hack */
			agents[agent_type].mousedown_count = 0;
			
			/* Now add the entries. */
			entries.forEach(function(entry, index, arr) {
				var option_id = entry.value + '_' +
					dropdown_id;
				var option_html = '<option ' +
					'id="' + option_id + '" ' +
					'value="' + entry.value + '">' +
					entry.display +
					'</option>';

				$(option_html).appendTo('#'+dropdown_id);
				$('#'+option_id).hover(function(evt) {
					hover_cb(agent_type,
						entry.value,
						(evt.type === "mouseenter" ?
							true : false));
				});
				$('#'+option_id).click(function(evt) {
					select_cb(agent_type);
				});
			});
		},

		getDropdownValue : function(agent_type) {
			var dropdown_id = agent_type + agent_dropdown_suffix;
			return $('#'+dropdown_id).val();
		},

		dropdownDisable : function(agent_type) {
			var dropdown_id = agent_type + agent_dropdown_suffix;
			$("#"+dropdown_id).focusout();
			$("#"+dropdown_id).prop("disabled", true);
		},

		setBombCount : function(location_name, count) {
			$('#'+location_name+'_bomb_count').text(String(count));
		},

		setVillageSentiment : function(village, sentiment) {
			level_indicators[village + "_sentiment"].val(sentiment);
		},

		setBlueForceStrength : function(strength) {
			level_indicators.bf_strength.val(strength);
		}
	}

	function initialize_global_status_elements() {
		villages.forEach(function(village) {
			var id = village + "_sentiment";
			var text = locations[village].display_name +
				" Sentiment";
			level_indicators[id] = new PercentRangeIndicator(
				id, text, 0, village_sentiment_target);
		} );
		level_indicators.bf_strength = new PercentRangeIndicator(
			"bf_strength", "Blue Force Strength",
			blue_force_target, 100, true);
	}

	function build_bomb_report() {
		var location_name;
		var bomb_html;
		var height;

		/* table with all of the bombable locations */
		for (location_name in bombs) {
			bomb_html = '<tr class="bomb_row">' +
				'<td class="bomb_label_col">' +
				locations[location_name].display_name +
				'</td><td id="' + location_name +
				'_bomb_count" class="bomb_count_col">0' +
				'</td></tr>';
			$(bomb_html).appendTo("#bomb_report");
		}

		/*
		 * Now set the height of the intelligence section
		 * to match the bomb report.  In order for the
		 * intelligence section to have a scroll bar,
		 * the height must be fixed.
		 */
		height = $("#bomb_report")[0].clientHeight;
		$("#intelligence_data").css("height", String(height) + "px");
	}

	function setup_side_specific_elements() {

		/* You are... banner */
		$("#side").addClass(my_side);
		$("#player").text(sides[my_side].name);

		/* agent icons, status, and dropdown menus */
		sides[my_side].agents.forEach(function(agent_type, index, arr) {
			var agent = agents[agent_type];
			var element_id, element_html;
			var dropdown_id, dropdown_html;
			var fuel_id, fuel_html = '';
			var status_id;
			var img_html = '';
			var agent_html;

			agent = agents[agent_type];

			/*
			 * this builds the basic cell which will contain
			 * the agent name, icon, and status (to be
			 * filled in later)
			 */
			element_id = agent_type + agent_element_suffix;
			element_html = '<td id="' + element_id + '" ' +
				'class="agent ' + my_side + '"</td>';

			/*
			 * if this agent is moveable, turn this into
			 * table with two cells, one for the cell above,
			 * and one for the dropdown menu
			 */
			if (agent.moveable) {
				dropdown_id = agent_type +
						agent_dropdown_suffix;
				dropdown_html = '<tr><td>' +
					select_html(dropdown_id) +
					'</td></tr>';
				if (agent.fuel) {
					fuel_id = agent_type + "_fuel";
					fuel_html = '<tr><td><div id="' +
						fuel_id + '"></div></td></tr>';
				}
				element_html = '<td><table><tr>' +
					element_html + '</tr>' +
					fuel_html +
					dropdown_html + '</table></td>';
			}

			/* Now add element(s) to the page */
			$(element_html).appendTo("#my_status");

			/*
			 * Now fill in the agent name, icon and placeholder
			 * for status, and set the class for the element
			 */
			status_id = agent_type + agent_status_suffix;
			if (agent.file !== null)
				img_html = '<img src="' +
					getFile(agent.file) + '" />';
			agent_html = '<span class="agent_name">' +
				agent.display_name + '</span><br>' +
				img_html + '<br>' +
				'<span id="' + status_id + '" ' +
				'class="agent_status"></span>';
			$('#'+element_id).html(agent_html);

			/*
			 * Add indicator level for fuel level
			 */
			if (agent.fuel) {
				level_indicators[fuel_id] =
					new TextEmbeddedIndicator(fuel_id,
						"Fuel Level", 0,
						agent.fuel_capacity, true);
			}

			/*
			 * For moveable agents, put in hacks for browsers
			 * with buggy (or non-existant) implementation
			 * for select elements.
			 */
			if (agent.moveable)
				set_dropdown_hacks(agent_type);
		});
	}

	function select_html(dropdown_id) {
		return '<select id="' + dropdown_id + '" class="agent_action">';
	}

	function set_dropdown_hacks(agent_type) {
		var dropdown_id = agent_type + agent_dropdown_suffix;
		var dropdown_parent = $('#'+dropdown_id).parent();

		/*
		 * This hack is for a bug in Safari which
		 * occassionally causes the dropdown to lock
		 * onto one value only, even thought it's
		 * being properly updated with new entries.
		 * So, get rid of the dropdown and start anew,
		 * and the problem goes away.
		 */
		agents[agent_type].mousedown_count = 0;
		dropdown_parent.html(select_html(dropdown_id));

		/*
		 * Now add event handlers to detect Safari bug.
		 */
		$('#'+dropdown_id).bind("mousedown mouseup", function(evt) {
			if (evt.type === "mousedown")
				agents[agent_type].mousedown_count++;
			else if (evt.type === "mouseup")
				agents[agent_type].mousedown_count--;
				/*
				 * For browsers which do not support
				 * select element events, call the select
				 * callback.
				 */
				select_cb(agent_type);
		} );
		$('#'+dropdown_id).focusout(function() {
			if (agents[agent_type].mousedown_count > 0) {
				console.log("Detected select element bug for " +
					agent_type +
					" dropdown menu.  Menu reset.");
				set_dropdown_hacks(agent_type);
				agents[agent_type].proposed_location = "";
				agents[agent_type].proposed_action = "";
				htmlBuilder.setDropdown(agent_type,
					gameLogic.makeDropdownEntries(
						agent_type));
				return;
			}

			/*
			 * For browsers which do not support
			 * select element events, call the select
			 * callback.
			 */
			select_cb(agent_type);
			agents[agent_type].mousedown_count = 0;
		});
	}
}();