var unlinkElevation0 = "off";
var unlinkElevation100 = "small";
var unlinkElevation200 = "large";
var linkElevation0 = "<a href=\"javascript:elevationSwitch('0');\">off</a>";
var linkElevation100 = "<a href=\"javascript:elevationSwitch('100');\">small</a>";
var linkElevation200 = "<a href=\"javascript:elevationSwitch('200');\">large</a>";

function drawControls() {
	
	var content;
	content = '<div style="border:solid 1px #000000;padding:3px"><h1 style="font-family:sans-serif;font-size:medium;">Gmaps Pedometer</h1><form name="controlPanel" id="controlPanel">        <input type="button" name="startRecording" id="startRecording" value="Start recording" onclick="bRecordPoints=true;this.value=\'Recording...\';"><br><input type="button" name="removeLastLegButton" id="removeLastLegButton" value=" Undo last point" onclick="removeLastLeg()">        <table class="plain">        <tr><td colspan="2"><input type="radio" name="units" id="units" value="0" checked onclick="handleUnitToggle(ENGLISH);">english<input type="radio" name="units" id="units" value="1" style="margin-left:10px" onclick="handleUnitToggle(METRIC);">metric</td></tr>        <tr><td  class="col1">Total Distance:</td><td><input type="text" name="mileage" id="mileage" size="15" value="0"><span id="dstUnits1">miles</span></td></tr>        <tr><td  class="col1">Last Leg:</td><td><input type="text" name="lastLeg" id="lastLeg" size="15" value="0"><span id="dstUnits2">miles</span></td></tr>        <tr><td  colspan="2"><div id="markerSwitch">Turn <a href="javascript:toggleMarkers(HIDE);">off</a> mile markers</div></td></tr><tr><td  colspan="2"><div id="calorieCounterSwitch">Turn <a href="javascript:toggleCalorieCounter(SHOW);">on</a> calorie counter</div><div id="elevationSwitch">Elevation: <span id="elevationSwitch0">' + unlinkElevation0 + '</span> <span id="elevationSwitch100">' + linkElevation100 + '</span> <span id="elevationSwitch200">' + linkElevation200 + '</span> </div></td></tr>        <tr id="weightRow" style="display:none"><td class="col1">Weight:</td><td><input type="text" name="weight" id="weight" size="15" value="0" onchange="handleWeightChange(distancesArray[distancesArray.length-1]);"><span id="wtUnits">lb</span></td></tr>        <tr id="calorieRow" style="display:none"><td class="col1">Calories Burned:</td><td><input type="text" name="calories" id="calories" size="15" value="0"></td></tr>        <tr><td  colspan="2"><div id="thereAndBackLink"><a href="javascript:completeThereAndBackCourse();">Complete</a> there and back route</div></td></tr></table></form><div class="para"><a href="javascript:createPermalink();">Permalink</a> or <a href="javascript:createTinyURL();">TinyURL</a> (to email or bookmark your route)</div>        <form id="tinyUrlForm" name="tinyUrlForm" action="http://tinyurl.com/create.php" method="post" style="display:none"><input type="hidden" id="url" name="url"></form>        <div class="para"><a href="javascript:clearLinkHandler();">Clear points and start over</a></div>        <!--<div class="para"><a href="javascript:map.centerAndZoom(new GPoint(-95.677068, 37.0625), 13);">Click here if you don\'t live in Hoboken</a></div>--><div class="para"><a href="javascript:printMap();">Print map</a></div><div class="para"><a href="http://www.elsewhere.org/GMapToGPX/" target="_blank">Export as GPX</a> (external link)</div></div>';
	
	document.write(content);
	
}
drawControls();