var tooltip    = document.createElement("div");
var maintitle  = "Thames Valley League Cricket Grounds";
var legends    = [];
var locations  = [];
var iGMarkers  = [];
var notes      = [];
var directions = [];
var lines      = [];
var gerror     = 0;
var xmlDoc;
var map;
var gDir;
var localSearch;


function getFile()
{
  if (GBrowserIsCompatible()) 
  {
    var request = GXmlHttp.create();
    request.open("GET", "test.xml", true);
    request.onreadystatechange = function()
	  {
      if (request.readyState == 4) 
		  {
			  xmlDoc = GXml.parse(request.responseText); 
				initMap();   
		  }		
	  }
		request.send(null);
	}  
}

function initMap()
{
  var center = getCenter();
	map = new GMap2(document.getElementById("map"));
	map.setCenter(center, 9);
	map.disableDragging();

	createMarkerArray();

	for(var i=0;i<iGMarkers.length;i++)
	{
	  map.addOverlay(iGMarkers[i].m);
	}
	document.getElementById("map").appendChild(tooltip);
  hideTooltip();
  document.getElementById("buttons").innerHTML = createButtonHTML();
	document.getElementById("list").innerHTML = createLegendHTML();
	document.title = maintitle;
	lines = xmlDoc.documentElement.getElementsByTagName("line");
		document.getElementById("overview").innerHTML="";
	localSearch = new GlocalSearch();
}

function loadMap(indexno) 
{
  loliteLink('a','legend',indexno);
  map = new GMap2(document.getElementById("map")); 
  gDir=new GDirections(map, document.getElementById("nav"));
	GEvent.addListener(gDir, "error", function(){gdirError();});
  var iGM = createMarker(indexno,locations[indexno],0); 
	iGM.dir    = createDirections(indexno,locations[indexno]);
	map.setCenter(iGM.m.getLatLng(),15);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
  map.addOverlay(iGM.m);
	map.hideControls();
  GEvent.addListener(map, "mouseover", function(){map.showControls();});
  GEvent.addListener(map, "mouseout", function(){map.hideControls();});
	document.title = maintitle + "; "+legends[indexno].text;
	var infoContent = createInfo(iGM)+iGM.dir;
	iGM.m.openInfoWindowTabsHtml([new GInfoWindowTab("info",infoContent),new GInfoWindowTab("transport",iGM.note)]);
	document.getElementById("overview").innerHTML='<a href="javascript:onclick=resetMap()">Return to Overview Map</a>';
}

function resetMap()
{ 
  document.getElementById("nav").innerHTML = '<div id="buttons"></div> <div id="list"></div>'; // this may have been overwritten by directions so restore it
  initMap();
}

function getCenter()
{
   var temp   = [];
   temp       = xmlDoc.documentElement.getElementsByTagName("centre");
	 var lat    = parseFloat(temp[0].getAttribute("lat"));
 	 var lon    = parseFloat(temp[0].getAttribute("lon"));
	 var center = new GLatLng(lat,lon);
	 return center;
}

function createMarkerArray()
{
  var temp;
	
	legendHTML="";
	locations = xmlDoc.documentElement.getElementsByTagName("location");
	for(var i=0;i<locations.length;i++)
	{
	  iGMarkers[i] = createMarker(i,locations[i],1);
		iGMarkers[i].m.tooltip = createLegend(i,locations[i]);
	}
}

function createLegend(indexno,location,type)
{
  var l = new legend;
	var rvalue;
	
  l.text = location.getAttribute("city") + ", " + location.getAttribute("ground") + ", " + location.getAttribute("pc");
  l.city = location.getAttribute("city");
	  
  l.nav = location.getAttribute("nav"); 
	legends[indexno] = l;
	rvalue = '<div class="tooltip">'+l.city+'</div>';
	return rvalue;
}
function createButtonHTML()
{
  var a = "'A'";

  var buttonHTML = "";
   buttonHTML ='<ul id="menu">';
   buttonHTML += '<li class="top"><a href= "javascript:onclick = jumpTo('+"'A'"+')" class="top_link"><span>A-B</span></a></li>';
   buttonHTML += '<li class="top"><a href= "javascript:onclick = jumpTo('+"'C'"+')" class="top_link"><span>C-E</span></a></li>';
   buttonHTML += '<li class="top"><a href= "javascript:onclick = jumpTo('+"'F'"+')" class="top_link"><span>F-J</span></a></li>';
   buttonHTML += '<li class="top"><a href= "javascript:onclick = jumpTo('+"'K'"+')" class="top_link"><span>K-P</span></a></li>';
   buttonHTML += '<li class="top"><a href= "javascript:onclick = jumpTo('+"'T'"+')" class="top_link"><span>Q-Z</span></a></li>';
	 buttonHTML += '</ul>';
   return buttonHTML;
}

function jumpTo(pos)
{
  ScrollToControl(pos);
  //var x = getElementById("list");
//x.scrollTo(10,100);

  //window.location.hash = pos;
  //var coords = {x: 0, y: 0 };
  
  

}



function createLegendHTML()
{
  var legendHTML = "";
  
  for(var i=0;i<legends.length;i++)
	{
    if(legends[i].nav == "")
      legendHTML  += '<a class= "legend" href="javascript:onclick = loadMap('+i+')" onmouseover="showtip('+i+')" onmouseout="hidetip()">' +legends[i].text+ '</a><br>';
    else
    {
      legendHTML  += '<a name="';
      legendHTML  += legends[i].nav;
      legendHTML  += '" id="';
      legendHTML  += legends[i].nav;
      legendHTML  += '" class= "legend" href="javascript:onclick = loadMap('+i+')" onmouseover="showtip('+i+')" onmouseout="hidetip()">' +legends[i].text+ '</a><br>';
    }
  }
	return legendHTML;
}

function createMarker(indexno,location,nIcon)
{
  var legend;
  var mIcon  = createIcon(nIcon);
	var iGM    = new iGMarker(indexno);
	var lat    = parseFloat(location.getAttribute("lat"));
	var lon    = parseFloat(location.getAttribute("lon"));
	var lalo   = new GLatLng(lat,lon);
	var note   = location.getAttribute("notes");
  iGM.m      = new GMarker(lalo, {icon:mIcon});
	iGM.note   = createTransport(location);
	GEvent.addListener(iGM.m, "click", function() {
    loadMap(iGM.indexno);});		
	GEvent.addListener(iGM.m,"mouseover", function() {
		hiliteLink('a','legend',iGM.indexno);});       
  GEvent.addListener(iGM.m,"mouseout", function() {
		loliteLink('a','legend',iGM.indexno);}); 
	return iGM;
}

function hiliteLink(tagname,classname,indexno)
{
  var elem = getElementByClassName(tagname,classname,indexno);
  var id = elem.innerHTML.substring(0,1);
  jumpTo(id);
	elem.style.color = '#ff0000';
	elem.style.fontSize = '9pt';
	elem.style.textDecoration = 'none';
}

function loliteLink(tagname,classname,indexno)
{
  var elem = getElementByClassName(tagname,classname,indexno);
	elem.style.color = '#c68c06';
	elem.style.fontSize = '8pt';
	elem.style.textDecoration = 'underline';
}

function showTooltip(m)
{
  tooltip.innerHTML = m.tooltip;
	var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(m.getPoint(),map.getZoom());
	var anchor=m.getIcon().iconAnchor;
	var width=m.getIcon().iconSize.width;
	var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
}

function hideTooltip()
{
  tooltip.style.visibility="hidden";
}

function showtip(indexno)
{
  var temp = iGMarkers[indexno];
  showTooltip(temp.m);
}

function hidetip() 
{
	tooltip.style.visibility="hidden";
}

function createIcon(nIcon)
{
  var mIcon = new GIcon();

  switch(nIcon)
	{
	  case 0:
		  mIcon.image = "images/stump1.png";
		  mIcon.iconSize = new GSize(30,47);
	    mIcon.iconAnchor = new GPoint(15,47);
		  mIcon.infoWindowAnchor = new GPoint(15,1);
		break;
	  case 1:
		  mIcon.image = "images/stump2.png";
		  mIcon.iconSize = new GSize(16,27);
	    mIcon.iconAnchor = new GPoint(8,27);
		  mIcon.infoWindowAnchor = new GPoint(8,1);
		break;
		default:
		break;
  }	
	return mIcon;
}

function createDirections(indexno,location)
{
	var label  = location.getAttribute("ground");
	var lat    = parseFloat(location.getAttribute("lat"));
	var lon    = parseFloat(location.getAttribute("lon"));
  var directions = 
	  '<form class="trans" action="javascript:prepareDirections()">' 
	  +' <b>Directions to here from</b>: <input type="text" SIZE=20 MAXLENGTH=20 name="fromAddr" id="fromAddr" value="" onClick="javascript:this.form.fromAddr.focus();this.form.fromAddr.select();"/><br>'
	  +'[eg "51.4846, -0.288429" or UK postcode]<br>'
	  +'<INPUT name="ginput" id ="ginput" value="Get Directions" TYPE="SUBMIT">'
	  +'<input type="hidden" id="thisAddr" value="'+label+"@"+ lat+ ',' + lon+'"/><br></form>';
  return directions;
}

function createTransport(location)
{
  var transport;
  var start = location.getAttribute("start");
  var code  = location.getAttribute("code");
  if(code != "")
  {
    transport='<p class="trans"><b>Nearest station: </b>';
	  transport+=createNR(start,code);
  }
	else
    transport='<p class="trans">';
  var temp = location.getAttribute("notes");
	temp = checkTfL(temp); // triggered by 'TfL' in xml file
  var temp1 = checkNR(temp);
  var temp2 = checkWalk(temp1,location);
  var temp3 = checkBus(temp2,location)
  transport+=temp3;
  
	location.setAttribute("notes",temp);
	transport+='<div id="key">Click links and transport icons above for local travel information</div>';
	transport+='</p>';	

	return transport
}

function checkTransport(str,code)
{
  var isat = [];
  var j = 0;
  var i;
  
  var len = str.length;
	for(i=0;i<len-2;i++)
	{
	  if(str.substring(i,i+3) == code)
		{
      isat[j] = i;
      j++;
    }
  }
  return isat;
}

function checkTfL(str)
{
  var temp,temp1,temp2,temp3;
	var pos;

  temp = str;
  var isat = checkTransport(str,"TfL");
  for(var i=0;i<isat.length;i++)
  {  
    temp1 = str.substring(isat[i]);
    pos   = temp1.indexOf(')');
    temp2 = temp1.substring(0,pos+1);  
    temp3 = constructTfL(temp1);
    temp = temp.replace(temp2,temp3);
  }
  str = temp;
  return str; 
}

function checkNR(str)
{
  var temp,temp1,temp2,temp3;
	var pos;
 
  temp = str;
  var isat = checkTransport(str,"NxR");
  for(var i=0;i<isat.length;i++)
  {  
    temp1 = str.substring(isat[i]);
    pos   = temp1.indexOf(')');
    temp2 = temp1.substring(0,pos+1);  
    temp3 = constructNR(temp1);
    temp = temp.replace(temp2,temp3);
  }
  str = temp;
  return str; 
}

function checkWalk(str,location)
{
  var temp,temp1,temp2,temp3;
	var pos;
 
  temp = str;
  var isat = checkTransport(str,"WlK");
  for(var i=0;i<isat.length;i++)
  {  
    temp1 = str.substring(isat[i]);
    pos   = temp1.indexOf(')');
    temp2 = temp1.substring(0,pos+1);  
    temp3 = constructWalk(temp1,location);
    temp = temp.replace(temp2,temp3);
  }
  str = temp;

  return str; 
}

function checkBus(str,location)
{
  var temp,temp1,temp2,temp3;
	var pos;
  temp = str;
  var isat = checkTransport(str,"BxS");
  for(var i=0;i<isat.length;i++)
  {  
    temp1 = str.substring(isat[i]);
    pos   = temp1.indexOf(')');
    temp2 = temp1.substring(0,pos+1);  
    temp3 = constructBus(temp2,location);
    temp = temp.replace(temp2,temp3);  
  }
  return temp;
}

function constructTfL(str)
{
  var temp;
  var pos,pos1;

  var tfl;
  pos   = str.indexOf(')'); //closing bracket
  pos1  = str.indexOf(',');
  var from  = str.substring(4,pos1); // removes WlK & brackets
  temp = str.substring(pos1+1,pos);
  pos1  = temp.indexOf(',');
  var ftype = temp.substring(0,pos1);
  temp = temp.substring(pos1+1,pos);
  pos1  = temp.indexOf(',');
  var dest = temp.substring(0,pos1);
  temp = temp.substring(pos1+1,pos);
  pos1  = temp.indexOf(',');
  var dtype = temp.substring(0,pos1);
  var code  = temp.substring(pos1+1,pos);

  tfl = createTfL(from,ftype,dest,dtype,code);
  return tfl;
}

function constructNR(str)
{
  var temp;
  var pos;
     
  pos    = str.indexOf(')'); //closing bracket
  temp   = str.substring(4,pos); // removes WlK & brackets
  pos    = temp.indexOf(','); 
  dest   = temp.substring(0,pos);
  code   = temp.substring(pos+1,pos+4); // station code must be 3 chars
  var nr = createNR(dest,code);
  
  return nr;
}

function constructWalk(str,location)
{
  var temp,start;
  var pos,pos1;

  pos   = str.indexOf(')'); //closing bracket
  temp  = str.substring(4,pos); // removes WlK & brackets
  pos   = temp.indexOf(',');//find ','
  pos1  = temp.indexOf('@');//find  '@'
  lat   = temp.substring(0,pos);
  lon   = temp.substring(pos+1,pos1);
  start = temp.substring(pos1+1);
  temp  = createWalk(lat,lon,location,start);

  return temp;
}

function constructBus(str,location)
{
  var temp;
  var pos;
     
  pos     = str.indexOf(')'); //closing bracket
  temp    = str.substring(4,pos); // removes WlK & brackets
  var bus = createBus(temp,location);
  return bus;
}


function createNR(start,code)
{
  var nr = '<a class="blue" href="http://www.nationalrail.co.uk/stations/';
	nr     += code;
  nr     += '.html">';
	nr     += start;
	nr     += '(N.R.)</a>';

	return nr;
}

function createTfL(from,ftype,dest,dtype,code)
{
  var start,end,logo;

  if(ftype == "st")
    start = from+'&amp;type_origin=stop';
  else
    start = from+'&amp;type_origin=locator';
  if(dtype == "st")
    end = dest+'&amp;type_destination=stop';
  else
    end = dest+'&amp;type_destination=locator';
  if(code == 0)
    logo = '"><img src="images/tfllogo_bgd.png" alt="tfl" border="0"></a>';
  else
    logo = '"><img src="images/tfllogo1_bgd.png" alt="tfl" border="0"></a>';


  if(from == "nwh") // 'to' only
  {
    tfl    = '<a class="blue" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;execInst=&amp;sessionID=0&amp;ptOptionsActive=1&amp;place_destination=London&amp;name_destination=';
    tfl    += end;
    tfl    += logo;
  }
  else // 'from' and 'to' specified
  {
    tfl    = '<a class="blue" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;execInst=&amp;sessionID=0&amp;ptOptionsActive=1&amp;place_origin=London&amp;name_origin=';
    tfl    += start;
    tfl    += '&amp;place_destination=London&amp;name_destination=';
	  tfl    += end;
    tfl    += logo;
  }

  return tfl;
}

function createBus(start,location)
{
  var end = location.getAttribute("pc");
  var bus = '<a class="blue" href="http://www.transportdirect.info/transportdirect/en/journeyplanning/jplandingpage.aspx?id=BusinessLinks&do=p&d=';
	bus     += end;
  bus     += '&oo=p&o=';
	bus     += start;
	bus     += '&p=1"><img src="images/coach_bgd.png" alt="public transport" border="0"></a>';
	return bus;
}

function createWalk(flat,flon,location,start)
{
  var route = '<a href="javascript:Walk(';
  route+=flat;
  route+=',';
  route+=flon;
  route+=',';
  route+=location.getAttribute("lat");
  route+=',';
  route+=location.getAttribute("lon");
  route+=",'";
  route+=start;
  route+="'";
  route+=",'";
  route+=location.getAttribute("ground");
  route+="'";
  route+=')"><img src="images/walk_bgd.png" alt="walk" border="0"></a>';

	return route;
}

function Walk(flat,flon,tlat,tlon,start,end)
{
  var thisAddr = end+'@'+ tlat+ ',' + tlon;
  var fromAddr = start+'@'+ flat+ ',' + flon;

  gDir.load("from: " +fromAddr+ " to: "+thisAddr, {getPolyline: true,travelMode:G_TRAVEL_MODE_WALKING} );
	GEvent.addListener(gDir,'load',formatPolyline);
  document.getElementById("nav").innerHTML = "";
  if(gerror)
  {
    var text = "Error: Walk";
		alert(text);
	  gerror = 0;
  }
}

function prepareDirections() 
{
	var fromAddr = document.getElementById("fromAddr").value;
  var thisAddr = document.getElementById("thisAddr").value;	
  
	if(isPostcode(fromAddr))
	{
	  usePointFromPostcode(fromAddr,thisAddr, callbackPostcode);
	}
	else
	  getDirections(thisAddr,fromAddr);
}

function getDirections(thisAddr,fromAddr) 
{
  gDir.load("from: " +fromAddr+ " to: "+thisAddr, { getPolyline: true} );
	GEvent.addListener(gDir,'load',formatPolyline);
  if(!gerror)
	{ 
    var inputState = document.getElementById("ginput");
	  if(inputState.value == "Get Directions")
	  {
	    document.getElementById("nav").innerHTML = "";
	    inputState.value = "Clear directions";	
	  }
	  else
	  {
	    gDir.clear();
	    inputState.value = "Get Directions";
		  document.getElementById("nav").innerHTML = createLegendHTML();
			document.getElementById("fromAddr").value = "";
	  }
	}
	else
	{
	  var text = "Error: Check that the coordinates are correct\n[eg. '47.5123N,7.7890E' or 47 51.23N, 7 7.789E]\nNote: Some place names are not recognized";
		alert(text);
		//inputState.value == "Get Directions";
		
	  gerror = 0;
	}
}
function formatPolyline()
{
  var points = [];
  var pLine = gDir.getPolyline();
  for (var i=0; i< pLine.getVertexCount();i++)
  {
    points[i] = pLine.getVertex(i);
  }
  pLine.hide();
  var newLine = new GPolyline(points, "#c68c06", 3, 1);
  map.addOverlay(newLine);
}

function onFoot(lineno)
{
  var pts = [];
 
	var colour = lines[lineno].getAttribute("colour");
  var width  = parseFloat(lines[lineno].getAttribute("width"));
	var points = lines[lineno].getElementsByTagName("point");
  for (var i=0;i<points.length;i++)
	{
    pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                         parseFloat(points[i].getAttribute("lng")));
  }
	var line = new GPolyline(pts,colour,width);
	map.addOverlay(line);
	var d = document.getElementById("dist");
	d.innerHTML = "Follow ";
	switch(colour)
	{
	  case "#FF0000":
		  d.innerHTML += '<img src="images/redline.png" height="3" width="20"> (approx.';
		break;
		case "#0054A6":
		  d.innerHTML += '<img src="images/blueline.png" height="3" width="20"> (approx.';
		break;
		case "#006E3A":
		  d.innerHTML += '<img src="images/greenline.png" height="3" width="20"> (approx.';
		break;
	}
	var dist = Math.round(line.getLength());
	d.innerHTML += dist+'m).';
}

function gdirError()
{
	gerror = 1;
}

function createInfo(iGM)
{
  var info;
	if(legends[iGM.indexno].text.length < 45)
	  info = '<p class="smp"><b>'+legends[iGM.indexno].text+'</b>: ('+iGM.m.getLatLng().lat()+'N,'+iGM.m.getLatLng().lng()+'E)</p>';
	else
    info = '<p class="smp"><b>'+legends[iGM.indexno].text+'</b>:<br>('+iGM.m.getLatLng().lat()+'N,'+iGM.m.getLatLng().lng()+'E)</p>';
  return info;
}

function mapKey() 
{
  var key = "ABQIAAAAH-UKi_zhkpJuRJZyYTzFNxRgIbwa8B9ODUamrkQ2dSzX331U1xRVMwIpRNS2IH8mDV8ojb-IA0-2LQ";
  return key;
}

function searchKey() 
{
  var key = "ABQIAAAAH-UKi_zhkpJuRJZyYTzFNxRgIbwa8B9ODUamrkQ2dSzX331U1xRVMwIpRNS2IH8mDV8ojb-IA0-2LQ";
  return key;
}

function iGMarker(i)
{
  var m ;
	var note;
	var dir;
	this.indexno = i;
}

function legend()
{
  var city;
  var text;
  var nav ="";
}

function getElementByClassName(tagname,classname,indexno)
{
  var lc = [];
	var j  = 0;
	var d = document.getElementsByTagName(tagname);
  for(var i=0;i<d.length;i++)
	{
	
	  if(d[i].className == classname)
		{
	    lc[j] = d[i];
			j++;
		}
	}
  return lc[indexno];
}

function getElementsByClassName(tagname,classname)
{
  var lc = [];
	var j  = 0;
	var d = document.getElementsByTagName(tagname);
  for(var i=0;i<d.length;i++)
	{
	  if(d[i].className == classname)
		{
	    lc[j] = d[i];
			j++;
		}
	}
  return lc;
}

function usePointFromPostcode(postcode, thisAddr, callbackPostcode)
{
	localSearch.setSearchCompleteCallback(null, function()
	{
			if (localSearch.results[0])
			{		
				var resultLat = localSearch.results[0].lat;
				var resultLng = localSearch.results[0].lng;
				var point = new GLatLng(resultLat,resultLng);
				callbackPostcode(point,thisAddr);
			}
			else
			{
				alert("Postcode not found!");
			}	
	});	
  localSearch.execute(postcode + ", UK");
}

function callbackPostcode(point,thisAddr)
{
  var fromAddr = point.lat()+', '+point.lng();
  getDirections(thisAddr,fromAddr);
}

function isPostcode(fromAddr)
{
  var retValue = false;
  if( (fromAddr.length > 4) || (fromAddr.length < 9) )
	{
	   var regex=/^[0-9a-zA-Z\s]+$/; // exclude all but alphanum and space
		 if (regex.test(fromAddr))
		   regex=/[0-9]/;  //must have at least one num
			 if (regex.test(fromAddr))
			   regex = /[a-zA-Z]/; //must have at least one alpha
			     if (regex.test(fromAddr))
		         retValue = true;
	}
	 return retValue;
}

function emailer()
{
  var address = "rmt1@";
	address += "rmthomas";
	address+= ".org";
	createMail(address, "maps page");
}

function createMail(address,subject)
{
  window.location = "mailto:"+address+"?subject="+subject
}
/**

function dirTo(indexno) 
{
  iGM[i].m.openInfoWindowHtml(iGM[i].dir);
}

function dirFrom(indexno) 
{
  iGM[i].m.openInfoWindowHtml(iGM[i].dir);
}
http://www.transportdirect.info/transportdirect/en/journeyplanning/jplandingpage.aspx?id=BusinessLinks&do=en&dn=SW113TP&d=527027,177190&oo=en&on=EC1R3HN&o=531261,182231&p=1
http://www.transportdirect.info/transportdirect/en/journeyplanning/jplandingpage.aspx?id=BusinessLinks&do=p&d=GU12 4BP&oo=p&o=GU11 1HN&p=1
OS X (Eastings)     487668
OS Y (Northings)    149195

<div style="display:block; width:187px; height:235px;font-family:Verdana, Arial, Helvetica, sans-serif;background:url(http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/jp-panel.gif) #fff no-repeat; font-size:90%;"><div style="display:block;padding:35px 15px 15px 15px;"><strong style="color: rgb(36, 66, 102); text-align: center; display: block;">Journey Planner</strong><form action="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2" id="jpForm" method="post" target="tfl" style="margin:5px 0 0 0 !important;padding:0 !important;"><input type="hidden" name="language" value="en" /> <!-- in language = english --><input type="hidden" name="execInst" value="" /> <input type="hidden" name="sessionID" value="0" /> <!-- to start a new session on JP the sessionID has to be 0 --> <input type="hidden" name="ptOptionsActive" value="-1" /> <!-- all pt options are active -->  <input type="hidden" name="place_origin" value="London" /> <!-- London is a hidden parameter for the origin location -->  <input type="hidden" name="place_destination" value="London" /><div><input type="text"  name="name_origin" style="width:155px !important;" value="From"/></div><div><select style="width:155px !important;" name="type_origin"><option value="stop">Station or stop</option><option value="locator">Postcode</option><option value="address">Address</option><option value="poi">Place of interest</option></select><input type="text" name="name_destination" style="width:155px !important;" value="Enter destination"/></div><div><select style="width:155px !important;" name="type_destination"><option selected="selected" value="stop">Station or stop</option><option  value="locator">Postcode</option><option value="address" >Address</option><option  value="poi">Place of interest</option></select></div><input type="submit" title="Leave now" value="Leave now"   style="width:155px !important;"/><div style="margin-top:5px;text-align:center;"><a style="text-decoration:none; color:#113B92;font-size:90%;background:#fffbfc;white-space:nowrap;" target="tfl" href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;ptOptionsActive=1"  onclick="javascript:document.getElementById('jpForm').ptOptionsActive.value='1';document.getElementById('jpForm').execInst.value='readOnly';document.getElementById('jpForm').submit(); return false">Advanced options</a></div></form></div></div>

<a href="http://journeyplanner.tfl.gov.uk/user/XSLT_TRIP_REQUEST2?language=en&amp;execInst=&amp;sessionID=0&amp;ptOptionsActive=-1&amp;place_destination=London&amp;name_destination=TW9 2DF&amp;type_destination=locator"><img src="http://www.tfl.gov.uk/tfl/gettingaround/journeyplanner/banners/images/jp-banner-1.gif" alt="Journey Planner" /></a>
**/

function elementPosition(obj) {
var curleft = 0, curtop = 0;

if (obj.offsetParent) {
curleft = obj.offsetLeft;
curtop = obj.offsetTop;

while (obj = obj.offsetParent) {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}

return { x: curleft, y: curtop };
}

function ScrollToControl(id)
{
var nav = document.getElementById("nav");
var list = document.getElementById("list");
var elem = document.getElementById(id);
var scrollPos = elementPosition(elem).y;
var scrollPos2 = elementPosition(list).y;


//scrollPos = scrollPos - document.documentElement.scrollTop;
 
var remainder = scrollPos - scrollPos2;
//var repeatTimes = (scrollPos - remainder) / 50;
//ScrollSmoothly(scrollPos,repeatTimes);
list.scrollTop= remainder;

}