// I hold all the lines obj
		var linesObj = [];

		var ancObj =[];
		
		var map;

		//my bootstrap
		loadData();

		


	function loadData() {

		//for div size
		window.onresize = myResize;

			

			var request = GXmlHttp.create();
			request.open("GET", "ver6-1/ver6.xml", true);

			//assign what needs to be done when we get the response
			request.onreadystatechange = function() {
			  if (request.readyState == 4) {

				var xmlDoc = request.responseXML;

				//parse and load the lines
				var lines = xmlDoc.documentElement.getElementsByTagName("line");

				//load the data into the object array
				loadLines(lines);

				//populate the lines drop down
				populateLinesDropDown();

				handleInitialSelection();
				
				myResize();

			  }//end of if
			}

			request.send(null);
			
			

	}//end of loadData


	function handleInitialSelection() {

		var qs = new Querystring();
		var queryLine = qs.get("line");
		var queryStation = qs.get("station");

		if(!handleTriggerSelectionBasedOnUserInput(queryLine,queryStation)) {

			//I manually trigger as if first line has been selected
			document.getElementById("lines").selectedIndex = 0;
			handleLineSelected(document.getElementById("lines"));

		}


	}

	function handleTriggerSelectionBasedOnUserInput(queryLine, queryStation) {

		var lineIndex = -1;
		var stationIndex = -1;
		var found = false;

		//go through all the lines
		if(queryLine != null) {
			
			//get the lineIndex
			for(i=0;i<linesObj.length;i++) {
				var lineObj = linesObj[i];
				if(lineObj.anchor == queryLine) {
					lineIndex = i;
					break;
				}
			}
			
			if(lineIndex != -1 && queryStation != null) {
				var stations = linesObj[i].stations;
				for(i=0;i<stations.length;i++) {
					var station = stations[i];
					if(station.anchor == queryStation) {
						stationIndex = i; 
						break;
					}
				}
			}//end of if
			
		}//end of if queryline != null


		//decide whether to select		
		if(lineIndex != -1) {
			found = true;
		
			//Trigger line and station selection as passed in the query
			document.getElementById("lines").selectedIndex = lineIndex;
			handleLineSelected(document.getElementById("lines"));
				
			if(stationIndex != -1) {
				document.getElementById("stations").selectedIndex = stationIndex;
				handleStationSelected(document.getElementById("stations"));
			}

		}
		
		
		return found;
	}


	function loadLines(lines) {

		//go through all the lines
		for (var i = 0; i < lines.length; i++) {
			var myLine = new Object();

			//get the line
			var line = lines[i];

			//populate the object
			myLine.name = line.getAttribute("name");
			myLine.schedulesLink = line.getAttribute("schedulesLink");
			myLine.anchor = line.getAttribute("anchor");
			myLine.stations = loadStations(line);

			//push it to the array
			linesObj.push(myLine);
		}

	}//end of loadLines



	function loadStations(line) {
		var stationData = [];

		//get the stations
		var stations = line.getElementsByTagName("station");
		for(var j=0; j<stations.length;j++) {
			var data = new Object();

			//get each station
			var station = stations[j];
			data.lng = station.getAttribute("lng"); //x
			data.lat = station.getAttribute("lat"); //y
			data.name = station.getAttribute("name");
			data.anchor = station.getAttribute("anchor");
			
			data.branchStart = station.getAttribute("branchStart");
			data.branch = station.getAttribute("branch");
			data.end = station.getAttribute("end");
			stationData.push(data);
		}

		return stationData;

	}



function populateLinesDropDown() {

	var myHtml = '<b>Lines :</b> <select id="lines" name="lines" onChange="javascript:handleLineSelected(this)">';
	for(i=0 ; i < linesObj.length; i++) {
		myHtml = myHtml + '<option>' + linesObj[i].name + '</option>';
	}
	myHtml = myHtml + '</select>';

	document.getElementById("linesCont").innerHTML = myHtml;

}


function populateStationsDropDown(lineIndex, stationData){

	var myHtml = '<b>Stations :</b> <select name="stations" id="stations"  onChange="javascript:handleStationSelected(this)">';
	for(i=0 ; i < stationData.length; i++) {
		myHtml = myHtml + '<option value="' + lineIndex + '">' + stationData[i].name + '</option>';
	}
	myHtml = myHtml + '</select>';
	myHtml = '<span style="padding-left:5px">' + myHtml + '</span>';

	document.getElementById("myStationsCont").innerHTML = myHtml;
}



function handleLineSelected(linesSelDD) {
	var selIndex = linesSelDD.selectedIndex;
	//alert("Line Selected Index" + selIndex);
	populateStationsDropDown(selIndex, linesObj[selIndex].stations);
	loadMap(selIndex,linesObj[selIndex].stations);
	loadRightNavBar(selIndex);
	generateLineLink(selIndex);
}


function handleStationSelected(stationsSelDD) {

	var stationIndex = stationsSelDD.selectedIndex;
	var lineIndex = stationsSelDD.value;

	//alert("Station Selected Index " + stationIndex);
	//alert("line Index " + lineIndex);

	handlePopupInfoMarker(lineIndex, stationIndex);
	
	generateStationLink(lineIndex, stationIndex);
	
}


function handlePopupInfoMarker(lineInd, stationInd) {

	//get the station we are interested
	var station = linesObj[lineInd].stations[stationInd];


	//show the info window on the marker
	var html = getDisplayTabsForTabbedInfoMarker(station.name, lineInd,stationInd);

	map.setCenter(new GLatLng(station.lat,station.lng));
	
	
	station.marker.openInfoWindowTabsHtml(html);
	


}


//line index will be in driving
function loadMap(lineIndex,stations ) {

		//create stationPointArray
		var stationPoints = [];

		//create branchPointArray
		var branchPoints = [];


		// Center the map on Edison
		//var map = new GMap2(document.getElementById("map"));
		if(map == null ) {

			map = new GMap2(document.getElementById("map"));
			
			map.setCenter(new GLatLng(stations[0].lat, stations[0].lng), 10);
			
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			//map.addControl(new GOverviewMapControl());

			//initially center in on first station
			

		}


		//clear existing overlays
		map.clearOverlays();

		//to dynamically calculate the center
		var myCenterStationLat  = 0.0;
		var myCenterStationLng = 0.0;


			for (var i = 0; i < stations.length; i++) {

			  var station = stations[i];

			  var point = new GLatLng(parseFloat(station.lat),
									 parseFloat(station.lng));

			  var dispText = station.name;
			  var endFlag = station.end;

			  var marker = createMarker(point,dispText, lineIndex,i,endFlag);
			  //var marker = new GMarker(point);
			  map.addOverlay(marker);

			  //store the marker in the station object to be used with station drop down select
			  station.marker = marker;

			  //store it in the array , stationpoints will hold the main line and branchPoints will
			  //hold the different terminal line
			  if(station.branch != null || station.branchStart != null ) {

			  	//implies branch ending and start branch
			  	branchPoints.push(point);


			  	if(station.branchStart != null) {
			  		//add these to main branch too
			  		stationPoints.push(point);
			  	}

			  } else {

			  	//implies main ending
			  	stationPoints.push(point);

			  }


			  //keep adding to get the average
			  myCenterStationLat = parseFloat( parseFloat(myCenterStationLat) + parseFloat(station.lat) );
			  myCenterStationLng = parseFloat(parseFloat(myCenterStationLng) + parseFloat(station.lng));

			}



			//average it
			myCenterStationLat = (parseFloat(myCenterStationLat) / stations.length);
			myCenterStationLng = (parseFloat(myCenterStationLng) / stations.length);


			//center it
			//map.centerAndZoom(new GPoint(myCenterStationLng,myCenterStationLat), 7);

			//map.recenterOrPanToLatLng(new GPoint(myCenterStationLng,myCenterStationLat));
			map.panTo(new GLatLng(myCenterStationLat,myCenterStationLng));


          //now create the main polyline
          //map.addOverlay(new GPolyline(stationPoints));
          map.addOverlay(new GPolyline(stationPoints,"#ff6633",3, 0.8));

          //now for branch ending if it exists
		  if(branchPoints.length > 0) {
			map.addOverlay(new GPolyline(branchPoints,"#523419",3, 0.8));
		  }



          
          //display help
 		  //map.openInfoWindowHtml(new GPoint(myCenterStationLng,myCenterStationLat), getHelpText());


	  
}//end of load map




		// Creates a marker whose info window displays the given number
		function createMarker(point, dispText,lineIndex, stationIndex,endFlag) {

		  var marker;
		  if(stationIndex == 0) {

		  	marker = new GMarker(point,getStartIcon());
		  	//marker = new GMarker(point);

		  }else if(endFlag != null && endFlag =="yes") {

		  	marker = new GMarker(point,getEndIcon());
		  	

		  } else {

		  	marker = new GMarker(point);
		  }



  		  GEvent.addListener(marker, "click", function() {
  		  	generateStationLink(lineIndex,stationIndex);
  		  	var tabs = getDisplayTabsForTabbedInfoMarker(dispText, lineIndex,stationIndex);

    	                marker.openInfoWindowTabsHtml(tabs);

    	    	
    	    
  		 });

   		 return marker;

		}//end of create marker


		function getDisplayTabsForTabbedInfoMarker(dispText,lineIndex,stationIndex) {
		
			//get the station we are interested
			var station = linesObj[lineIndex].stations[stationIndex];

			
			var to = "<form  target='_new' action='http://maps.google.com/maps' method='get'><input type='hidden' name='daddr' value='" +station.lat + " " + station.lng  +"'/> To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: " 
			+ station.name 
			+" <br/> From : <input type='text' id='textInput' name='saddr'/> <input type='hidden' name='hl' value='en'/><br/><input type='submit' value='Get Directions' id='submitBtn'></form>";
			
			var from = "<form  target='_new' action='http://maps.google.com/maps' method='get'><input type='hidden' name='saddr' value='" +station.lat + " " + station.lng  +"'/>From : "
			+ station.name 
			+" <br/>To&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: <input type='text' id='textInput' name='daddr'/> <input type='hidden' name='hl' value='en'/><br/><input type='submit' value='Get Directions' id='submitBtn'></form><br/>";
		
			var infoTabs = [
			  new GInfoWindowTab("Dir To", to),
			  new GInfoWindowTab("Dir From", from)
			];
			
			return infoTabs;	
			
			
		}
		

		function displayHelp(){
			var hlpTxt = "To get directions \n"
				       + "1) Select the train line and the train station "
				       + "or click on the tear drop icon.\n"
				       + "2) On the popup window click 'From' or 'To'.\n"
				       + "3) Type the address in the text box and hit the Get button.\n\n"
				       +"Please feel free to link to the lines or stations from your website \n"
				       +"To generate link for a train line \n"
				       +"Select the train line. Right click on 'Link to the line' and copy the link location \n"
				       + "To generate link for a station \n"
				       +"Select the train line and the train station. Right click on 'Link to the station' and copy the link location \n";
				       
			alert(hlpTxt);
			//map.openInfoWindow(map.getCenterLatLng(),hlpTxt);
		}

		function loadRightNavBar(selIndex) {


			var html = "<b>Line :" + linesObj[selIndex].name + "</b><br/>";

			html = html + "<div style='margin-top:5px;' >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a target='_blank' href='"
				+ linesObj[selIndex].schedulesLink
				+ "'>Schedules</a> <br/></div>";

			html= html + "<ul>";

			var stations = linesObj[selIndex].stations;

			for(var i = 0; i < stations.length; i++) {

				var station = stations[i];
				html = html + getHtmlForRightNavBarItem(selIndex,i,station) ;
			}

			html = html + "</ul>";
			document.getElementById("rightNavBar").innerHTML= html;
		}

		function getHtmlForRightNavBarItem(lineInd, stationInd, station) {
			var html = "<li><a href='javascript:void(0) '"
				+ "onClick='javascript:handleRightNavBarClick(" + lineInd + "," + stationInd + ")'>"
				+ station.name + "</a> </li>";

			return html;
		}

		function handleRightNavBarClick(lineInd, stationInd) {
			//alert(lineInd + "," + StationInd);
			handlePopupInfoMarker(lineInd,stationInd);
			generateStationLink(lineInd, stationInd);
		}


		function getBaseIcon(){

			var baseIcon = new GIcon();
			baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
			baseIcon.iconSize = new GSize(20, 34);
			baseIcon.shadowSize = new GSize(37, 34);
			baseIcon.iconAnchor = new GPoint(9, 34);
			baseIcon.infoWindowAnchor = new GPoint(9, 2);
			baseIcon.infoShadowAnchor = new GPoint(18, 25);
			return baseIcon;
			
		}



		function getStartIcon(){
			var startIcon = getBaseIcon();
			startIcon.image = "http://www.google.com/mapfiles/dd-start.png";
			return startIcon
		}

		function getEndIcon(){
			var endIcon = getBaseIcon();
			endIcon.image = "http://www.google.com/mapfiles/dd-end.png";
			return endIcon;

		}

		function generateLineLink(lineInd) {
			var lineAnc = linesObj[lineInd].anchor;
			var myLink = "Link to this : <a href='http://trainsnj.com?line=" + lineAnc + "'>line</a>";
			document.getElementById("extLink").innerHTML = myLink;
		}
		
		
		function generateStationLink(lineInd,stationInd) {

			var lineAnc = linesObj[lineInd].anchor;
			var stationAnc = linesObj[lineInd].stations[stationInd].anchor;
			var myLink = "Link to this : <a href='http://trainsnj.com?line=" + lineAnc 
				+ "&station=" + stationAnc
				+ "'>station</a>";
			document.getElementById("extLink").innerHTML = myLink;
			
		
		}
		
	function windowHeight() {
	  return window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
	}



	function myResize() {
		document.getElementById("map").style.height = (windowHeight() - 110) + "px";
		document.getElementById("rightNavBar").style.height = (windowHeight() - 120) + "px";
	}