var gmarkers = [ ];
var initMapCalled = false;
/**
 * Note: This is used for other pages and is NOT used
 * on the location.html page because the selection
 * drop down is build in the map creation. This is because the "values"
 * for the select are different (array indexes), where on other pages,
 * the "values" are the index ids.
 *
 * @see initMap
 */
function createLocationSelection(element_id, xml_location) {
    if(initMapCalled == true) return;
  // Read the data from example.xml
  document.getElementById(element_id).options[0] = new Option("Choose One", "Choose One", true, false);
  var i=0;
  $.get(xml_location, {}, 
    function(xml) {
        $(xml).find("marker").each(function() {
            var marker = $(this);
            var label = marker.attr("label");
            document.getElementById(element_id).options[i+1] = new Option(label, label, true, false);
            i++;
          }
        )
    }
  );
  /*
  GDownloadUrl(xml_location, function(doc) {
    var xmlDoc = GXml.parse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    document.getElementById(element_id).options[0] = new Option("Choose One", "Choose One", true, false);
    for (var i = 0; i < markers.length; i++) {
      var label = markers[i].getAttribute("label");
      document.getElementById(element_id).options[i+1] = new Option(label, label, true, false);
    }
  });
  */
}

function initMap() {
  initMapCalled = true;
  if (GBrowserIsCompatible()) {
    
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(35.200745,-118.894043), 6);
    map.setUIToDefault();
    map.removeMapType(G_HYBRID_MAP);
    map.removeMapType(G_SATELLITE_MAP);
    map.removeMapType(G_PHYSICAL_MAP);
    
    // Read the data from example.xml
    GDownloadUrl(xml_location, function(doc) {
      var xmlDoc = GXml.parse(doc);
      var markers = xmlDoc.documentElement.getElementsByTagName("marker");
      // If we have a get var for a location, we need to go there.
      var $_GET = {};
      var init_location = -1;
      document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
          function decode(s) {
              return decodeURIComponent(s).replace(/\+/g, " ");
          }
          $_GET[decode(arguments[1])] = decode(arguments[2]);
      });
      var init_label_name = $_GET['init_location'];
      document.getElementById("location_select").options[0] = new Option("Choose One", "Choose One", true, false);
      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 html = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
        var street = GXml.value(markers[i].getElementsByTagName("street")[0]);
        var directions = GXml.value(markers[i].getElementsByTagName("crossstreet")[0]);
        var city = GXml.value(markers[i].getElementsByTagName("city")[0]);
        var state = GXml.value(markers[i].getElementsByTagName("state")[0]);
        var zip = GXml.value(markers[i].getElementsByTagName("zip")[0]);
        var bhours = GXml.value(markers[i].getElementsByTagName("branchhours")[0]);
        var phours = GXml.value(markers[i].getElementsByTagName("phonehours")[0]);
        var ahours = GXml.value(markers[i].getElementsByTagName("automatedhours")[0]);
        var phone = GXml.value(markers[i].getElementsByTagName("phone")[0]);
        var label = markers[i].getAttribute("label");
        if(label == init_label_name) {
          init_location = i;
        }
        var info = '';
        // Build the HTML
        html += "<h5>" + label + "</h5>";
        html += "<p>" + street + "<br />";
        html += city + ", " + state + " " + zip + "<br />";
        html += "<strong>Phone:</strong> " + phone + "<br />";
        html += "<strong>Cross Street:</strong> " + directions;
        html += "</p>";
        // Info HTML
        info += '<p>';
        info += '<strong>Branch Hours:</strong> ' + bhours + "<br />";
        info += '<strong>Phone Hours: </strong> ' + phours + "<br />";
        info += '<strong>Automated Account Information:</strong> ' + ahours + "<br />";
        info += '</p>';
        //Directions Link
        
        street = replaceAll(street,' ','+');
        street = replaceAll(street,'#','%23+');
        city = replaceAll(city,' ','+');
        state = replaceAll(state,' ','+');
        zip = replaceAll(zip,' ','+');
        
        html += '<p><a target="_blank" href="';
        html += 'http://maps.google.ca/maps?q=to%3A+';
        html += street + ',' + city + ',' + state + '+' + zip + '&f=d&hl=en';
        html += '">Get Directions</a>';
        html += '</p>';
        
        
        // create the marker
        //var marker = createMarker(point,label,html);
        var marker = createTabbedMarker(point, html, info, "Location", "Info");
        map.addOverlay(marker);
        // Add to the drop down
        document.getElementById("location_select").options[i+1] = new Option(label, i+1, true, false);
      }

      
      if(init_location > -1) {
        animateToBank(init_location+1);
        document.getElementById("location_select").options[init_location+1].selected = true;
      }
    });
    
    // A function to create the marker and set up the event window
    function createMarker(point,name,html) {
      
      
    
      var marker = new GMarker(point);
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
      });
      // save the info we need to use later for the side_bar
      gmarkers.push(marker);
      return marker;
    }
    function createTabbedMarker(point,html1,html2,label1,label2) {
    
      // Create our "tiny" marker icon
      var blueIcon = new GIcon(G_DEFAULT_ICON);
      blueIcon.image = "/assets/images/csb_google_icon2.png";
      // Set up our GMarkerOptions object
      markerOptions = { icon:blueIcon };
    
      var marker = new GMarker(point, markerOptions);
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
      });
      gmarkers.push(marker);
      return marker;
    }
    
  }
}

function animateToBank(e) {
    if(e == "Choose One") {
        return false;
    }
  if(document.getElementById("map_canvas") != null) {
    GEvent.trigger(gmarkers[e-1], "click");
  }
  else {
  document.location = '/about-us/locations.aspx?init_location=' + e;
  }
}

// Needs to handle relative paths.
function showBankLocation(e) {
if(document.getElementById("map_canvas") != null) {
  document.location = 'locations.html?init_location=' + e;
  }
}

function replaceAll(OldString,FindString,ReplaceString)
{
var SearchIndex = 0;
var NewString = "";
while (OldString.indexOf(FindString,SearchIndex) != -1)
{
NewString += OldString.substring(
SearchIndex,
OldString.indexOf(FindString,SearchIndex)
);
NewString += ReplaceString;
SearchIndex = (OldString.indexOf(FindString,SearchIndex) + FindString.length);
}
NewString += OldString.substring(SearchIndex,OldString.length);
return NewString;
}