/* 
	Title: AJAX javascript file
	Client: Barlclays
	Date: 11/09/2006
	Author: Ben Ellis
*/

// Create variables
var xmlHttp

// Function to create the http object to parse data through
function getXmlHttpObject(){ 
	var objXMLHttp=null;
	if (window.XMLHttpRequest){
		objXMLHttp=new XMLHttpRequest();
	}
	else if (window.ActiveXObject){
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return objXMLHttp;
}

// Function to change page state every time http object changes
function stateChanged(){ 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
		document.getElementById("column1").innerHTML=xmlHttp.responseText;
	} 
}

// Function to show data
function getData(id){ 
	// Create the http object
	xmlHttp=getXmlHttpObject();
	if (xmlHttp==null){
		alert ("Browser does not support HTTP Request");
		return;
	}
	// URL
	var url="php/getData.php";
	// Data to parse
	url=url+"?id="+id;
	// Run the functions
	xmlHttp.onreadystatechange=stateChanged;
	xmlHttp.open("GET",url,true);
	xmlHttp.send(null);
}

// Funciton to load google maps
function loadMap(xmlFile){

    if (GBrowserIsCompatible()) { 

      // Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(40,0),2);
    
      // arrays to hold copies of the markers and html used by the sidebar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;
	  
		// Creates a marker at the given point with the given number label
		function createMarker(point,txt) {
			var marker = new GMarker(point);
			GEvent.addListener(marker, "click", function() {
				marker.openInfoWindowHtml(txt);
			});
			return marker;
		}

      // Read the data from example4.xml
      
      var request = GXmlHttp.create();
      request.open("GET", xmlFile, true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
			var title = markers[i].getAttribute("title");
			var id = markers[i].getAttribute("id");
			var txt = markers[i].getAttribute("txt");
			var date = markers[i].getAttribute("date");

			var html = '<div class="bubble"><h3>'+title+' - '+date+'</h3><p>'+txt+' <a href="javascript:getData(\''+id+'\')" title="Watch video clip">Watch video clip [..]</a></p></div>';
            // create the marker
            var marker = createMarker(point,html);
            map.addOverlay(marker);
          }
		  
           // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
            }
            map.addOverlay(new GPolyline(pts,colour,width));
          }
          // ================================================           
        }
      }
      request.send(null);

    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}