//<![CDATA[

    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";
      side_bar_html+='<table style="width:95%;">';
      
      var projname;
      var ctr=0;
    
      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;
     
     
      // A function to create the marker and set up the event window
      function createMarker(point,name,html,icontype) {
        var marker = new GMarker(point,getRstIcon(icontype));
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
          
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
        
        // add a line to the side_bar html
        if (i%2==0){
            if (ctr==0){
            side_bar_html += '<tr><td class="rowColor"><a href="javascript:myclick(' + i + ')" style="text-decoration:underline;color:#000;">' + name + '<\/a></td></tr>';
            i++;}
        }
        else {
            if (ctr==0){
            side_bar_html += '<tr><td class="rowSndColor"><a href="javascript:myclick(' + i + ')" style="text-decoration:underline;color:#000;">' + name + '<\/a></td></tr>';
            i++;}
        }
        return marker;
      }

      // This function is for the icon selector
      function getRstIcon(IconName) 
      {
        var icon = new GIcon();
        icon.image = "Images/" + IconName;
        icon.shadowSize = new GSize(22, 20);
        icon.iconAnchor = new GPoint(6, 20);
        icon.infoWindowAnchor = new GPoint(5, 1);
        return icon;
      }
      
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }
       
      
      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.addControl(new GScaleControl()) ;
	  map.enableScrollWheelZoom();
      map.setCenter(new GLatLng(33.7899,-118.1518),12);
      
      var side_bar_html = "";
      side_bar_html+='<table style="width:95%;">';
      
      // === Define the function thats going to process the text file ===
      process_marker = function(doc) {
        // === split the document into lines ===
        lines = doc.split("\n");
        for (var i=0; i<lines.length; i++) {
          if (lines[i].length > 1) {
            // === split each line into parts separated by "|" and use the contents ===
            parts = lines[i].split("|");
            var status = parts[0];
            var mptype = parts[1];
            if (status=="In Design"){
                if (mptype=="Point"){
                    ctr=0;
                    var html = parts[2];
                    var lat = parseFloat(parts[3]);
                    var lng = parseFloat(parts[4]);
                    var proj = parts[7];
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "iconb.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                }
                
                if (mptype=="Line"){
                    var html = parts[2];
                    var lat = parseFloat(parts[3]);
                    var lng = parseFloat(parts[4]);
                    var elat = parseFloat(parts[5]);
                    var elng = parseFloat(parts[6]); 
                    var proj = parts[7];
                    projname = proj
                    ctr = 0;
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "blue_MarkerS.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    ctr+=1;
                    
                    var point = new GLatLng(elat,elng);
           
                    // === read the icontype attribute ===
                    var icontype = "blue_MarkerE.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    
                    var colour = "#FF0000";
                    var width =  parseFloat(4);
                    var pts = [];
                    pts[0] = new GLatLng(lat,lng);
                    pts[1] = new GLatLng(elat,elng);
      
                    map.addOverlay(new GPolyline(pts,colour,width));

                }
                
                if (mptype=="MultiPoint"){
                    if (i==0) {
                        parts2 = parts;
                    }
                    if (i>0){
                        parts2 = lines[i-1].split("|");
                    }
                    if (parts[7]!=parts2[7]){
                        ctr = 0;
                    }
                    var html = parts[2];
                    var lat = parseFloat(parts[9]);
                    var lng = parseFloat(parts[10]);
                    var proj = parts[7];
                    var pinid = parts[8];
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "iconb" + pinid + ".png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    ctr++;
                    
                }
            
            }
            if (status=="Under Construction"){
                if (mptype=="Point"){
                    ctr=0;
                    var html = parts[2];
                    var lat = parseFloat(parts[3]);
                    var lng = parseFloat(parts[4]);
                    var proj = parts[7];
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "iconr.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                }
                if (mptype=="Line"){
                    var html = parts[2];
                    var lat = parseFloat(parts[3]);
                    var lng = parseFloat(parts[4]);
                    var elat = parseFloat(parts[5]);
                    var elng = parseFloat(parts[6]); 
                    var proj = parts[7];
                    projname = proj
                    ctr = 0;
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "red_MarkerS.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    ctr+=1;
                    
                    var point = new GLatLng(elat,elng);
           
                    // === read the icontype attribute ===
                    var icontype = "red_MarkerE.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    
                    var colour = "#FF0000";
                    var width =  parseFloat(4);
                    var pts = [];
                    pts[0] = new GLatLng(lat,lng);
                    pts[1] = new GLatLng(elat,elng);
      
                    map.addOverlay(new GPolyline(pts,colour,width));
                    
                }
                if (mptype=="MultiPoint"){
                    if (i==0) {
                        parts2 = parts;
                    }
                    if (i>0){
                        parts2 = lines[i-1].split("|");
                    }
                    if (parts[7]!=parts2[7]){
                        ctr = 0;
                    }
                    var html = parts[2];
                    var lat = parseFloat(parts[9]);
                    var lng = parseFloat(parts[10]);
                    var proj = parts[7];
                    var pinid = parts[8];
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "iconr" + pinid + ".png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    ctr++;
                }
            }
            
            if (status=="Construction Complete"){
                if (mptype=="Point"){
                    ctr=0;
                    var html = parts[2];
                    var lat = parseFloat(parts[3]);
                    var lng = parseFloat(parts[4]);
                    var proj = parts[7];
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "icong.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                }
                if (mptype=="Line"){
                    var html = parts[2];
                    var lat = parseFloat(parts[3]);
                    var lng = parseFloat(parts[4]);
                    var elat = parseFloat(parts[5]);
                    var elng = parseFloat(parts[6]); 
                    var proj = parts[7];
                    projname = proj
                    ctr = 0;
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "green_MarkerS.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    ctr+=1;
                    
                    var point = new GLatLng(elat,elng);
           
                    // === read the icontype attribute ===
                    var icontype = "green_MarkerE.png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    
                    var colour = "#FF0000";
                    var width =  parseFloat(4);
                    var pts = [];
                    pts[0] = new GLatLng(lat,lng);
                    pts[1] = new GLatLng(elat,elng);
      
                    map.addOverlay(new GPolyline(pts,colour,width));
                    
                }
                if (mptype=="MultiPoint"){
                    if (i==0) {
                        parts2 = parts;
                    }
                    if (i>0){
                        parts2 = lines[i-1].split("|");
                    }
                    if (parts[7]!=parts2[7]){
                        ctr = 0;
                    }
                    var html = parts[2];
                    var lat = parseFloat(parts[9]);
                    var lng = parseFloat(parts[10]);
                    var proj = parts[7];
                    var pinid = parts[8];
                    if (proj.length > 39){
                        var label = parts[7].substring(0,39)+"...";
                    }
                    else {
                        var label = parts[7];
                    }
                    var point = new GLatLng(lat,lng);
           
                    // === read the icontype attribute ===
                    var icontype = "icong" + pinid + ".png";
                                   
                    // create the marker
                    var marker = createMarker(point,label,'<div>'+ html +'<\/div>',icontype);
                    map.addOverlay(marker);
                    ctr++;
                }
            }
            
          }
        }
        
        side_bar_html+='</table>';
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = side_bar_html;
      }          
            
      // === Draw the polygon from the City Outlines ===
      process_it = function(doc) {
        // === split the document into lines ===
        lines = doc.split("\n");
        var pts = [];
        var flat;
        var flng;
        for (var i=0; i<lines.length; i++) {
          if (lines[i].length > 1) {
            // === split each line into parts separated by "|" and use the contents ===
            parts = lines[i].split("|");
            var lat = parseFloat(parts[0]);
            var lng = parseFloat(parts[1]);
            if (i==0){
                flat = lat;
                flng = lng;
            }
            pts[i] = new GLatLng(lat,lng);
             
          }
           
        }
        pts[i + 1] = new GLatLng(flat,flng);      
        var polygon = new GPolygon(pts, "#0000A0", 3, 1, "", 0.2 );
        map.addOverlay(polygon);
      }          
          
      GDownloadUrl("LA.txt", process_it);
      GDownloadUrl("LB.txt", process_it);
      GDownloadUrl("SH.txt", process_it);
      GDownloadUrl("Projects.txt", process_marker);
      
            
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
    
    //]]>