var icon1 = new GIcon(); 
    icon1.image = 'images/1.png';
    icon1.shadow = 'images/shadow.gif';
    icon1.iconSize = new GSize(20, 44);
    icon1.shadowSize = new GSize(20, 44);
    icon1.iconAnchor = new GPoint(0, 44);
    icon1.infoWindowAnchor = new GPoint(9, 44);

var icon2 = new GIcon(); 
    icon2.image = 'images/2.png';
    icon2.shadow = 'images/shadow.gif';
    icon2.iconSize = new GSize(20, 44);
    icon2.shadowSize = new GSize(20, 44);
    icon2.iconAnchor = new GPoint(0, 44);
    icon2.infoWindowAnchor = new GPoint(9, 44);

var icon3 = new GIcon(); 
    icon3.image = 'images/3.png';
    icon3.shadow = 'images/shadow.gif';
    icon3.iconSize = new GSize(20, 44);
    icon3.shadowSize = new GSize(20, 44);
    icon3.iconAnchor = new GPoint(0, 44);
    icon3.infoWindowAnchor = new GPoint(9, 44);

var icon4 = new GIcon(); 
    icon4.image = 'images/4.png';
    icon4.shadow = 'images/shadow.gif';
    icon4.iconSize = new GSize(20, 44);
    icon4.shadowSize = new GSize(20, 44);
    icon4.iconAnchor = new GPoint(0, 44);
    icon4.infoWindowAnchor = new GPoint(9, 44);

var icon5 = new GIcon(); 
    icon5.image = 'images/5.png';
    icon5.shadow = 'images/shadow.gif';
    icon5.iconSize = new GSize(20, 44);
    icon5.shadowSize = new GSize(20, 44);
    icon5.iconAnchor = new GPoint(0, 44);
    icon5.infoWindowAnchor = new GPoint(9, 44);

var icon6 = new GIcon(); 
    icon6.image = 'images/6.png';
    icon6.shadow = 'images/shadow.gif';
    icon6.iconSize = new GSize(20, 44);
    icon6.shadowSize = new GSize(20, 44);
    icon6.iconAnchor = new GPoint(0, 44);
    icon6.infoWindowAnchor = new GPoint(9, 44);

    var customIcons = [];
    customIcons["level1"] = icon1;
    customIcons["level2"] = icon2;
    customIcons["level3"] = icon3;
    customIcons["level4"] = icon4;
    customIcons["level5"] = icon5;
    customIcons["level6"] = icon6;

var markerGroups = { "level1": [], "level2": [], "level3": [], "level4": [], "level5": [], "level6": []};

var types=["level1","level2","level3","level4","level5","level6"];

var bounds = new GLatLngBounds();
var ovControl=new GOverviewMapControl(new GSize(250,100));

var gmarkers = [];
var htmls = [];
var j = 0;
var links_html = "";
var points = [];
var names = [];

var link_color = "";
var link_background = "";
var link_id="";

/////////////////



function load(){
var myWidth=document.documentElement.clientWidth;
myWidth=myWidth-150;
myHeight=Math.floor(0.4*myWidth);
document.getElementById('map_div').style.height=myHeight+"px";
document.getElementById('map_div').style.width=myWidth+"px";
      if (GBrowserIsCompatible()){
        map = new GMap2(document.getElementById("map_div"));
	map.setCenter(new GLatLng(0, 0));
	map.setZoom(0);
      map.setMapType(G_HYBRID_MAP);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
	map.addControl(new GScaleControl());
        GDownloadUrl("images/xmarkerdata.xml", function(data){
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("facility");

	var info_html = "<strong>" +  markers[i].getAttribute("facility") + "</strong><br />Level " +  markers[i].getAttribute("level") + "<br /><br />" +  markers[i].getAttribute("name") + ", " +  markers[i].getAttribute("title") + "<br />";
	if( markers[i].getAttribute("address1") != ""){
	info_html = info_html +  markers[i].getAttribute("address1") + "<br />";
}
	if( markers[i].getAttribute("address2") != ""){
	info_html = info_html +  markers[i].getAttribute("address2") + "<br />";
}
	info_html = info_html +  markers[i].getAttribute("city") + ", " +  markers[i].getAttribute("state") + " " + markers[i].getAttribute("zip") + "<br /><br />" + markers[i].getAttribute("phone")
	
	var type = markers[i].getAttribute("marker_type");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, info_html, type, i);
            map.addOverlay(marker);
	    bounds.extend(point);
          }
	  names=names.sort();
	for(var i=0;i<names.length;i++){
		var split_result=names[i].split("|");
        	links_html += '<a id="link' + split_result[1] + '" class="level' + split_result[2] + 'link" href="#" onclick="myclick(' + split_result[1] + ')" onmouseover="hilightMarker(gmarkers[' + split_result[1] + '],'+split_result[2]+')" onmouseout="clearHilight(gmarkers[' + split_result[1] + '],'+split_result[2]+')">' + split_result[0] + '<\/a>';
	}
	document.getElementById("links").innerHTML = links_html;
      map.setZoom(map.getBoundsZoomLevel(bounds));
      map.setCenter(bounds.getCenter());
      mapCenter=bounds.getCenter();
	map.addControl(ovControl);
	ovControl.hide(true);
	initial_zoom=map.getZoom();
        });
      }
    }
    
function createMarker(point, name, info_html, type, i){
      var marker = new GMarker(point, customIcons[type]);
      markerGroups[type].push(marker);
      var html = '<p class="iwindow"><strong>' + info_html + '</p><p class="zoom_link"><a href="javascript:myzoom('+i+')">Zoom In</a></p>';
	gmarkers[i] = marker;
        htmls[i] = html;
	points[i] = point;
	level=type.replace(/level/,"");
	names[i]=name  + "|" + i + "|" + level;

      GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(html); });
	    GEvent.addListener(marker, "mouseover", function() {
		    link_id="link"+i;
		    link_color=document.getElementById(link_id).style.color;
		    link_background=document.getElementById(link_id).style.background;
		    document.getElementById(link_id).style.color="#f00";
		    document.getElementById(link_id).style.background="#fff";
		    document.getElementById(link_id).style.fontWeight="bold";
	    });
	    GEvent.addListener(marker, "mouseout", function() {
		    document.getElementById(link_id).style.color=link_color;
		    document.getElementById(link_id).style.background=link_background;
		    document.getElementById(link_id).style.fontWeight="normal";
					    
			    
	    });


      return marker;
    }
///////
function toggleGroup(type){
	var this_class=type + "link";
	var these_links = getElementsByClassName(this_class);
	for(var i = 0; i < these_links.length; i++) {
		this_link=these_links[i];
		if(this_link.style.display=='none'){
			this_link.style.display='inline';
		} else {
			this_link.style.display='none';
		}
	}

      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      } 
    }

function toggleGroupOn(type){
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
          marker.show();
      } 
    }

function toggleLinksOn(type){
	var this_class=type + "link";
	var these_links = getElementsByClassName(this_class);
	for(var i = 0; i < these_links.length; i++) {
		this_link=these_links[i];
		if(this_link.style.display=='none'){
			this_link.style.display='inline';
		}
	}
}


function reset(){
      map.setMapType(G_HYBRID_MAP);
	ovControl.hide(true);
	map.setZoom(initial_zoom);
	map.setCenter(mapCenter);
	map.closeInfoWindow();
	for(var i=0;i<types.length;i++){
		toggleGroupOn(types[i]);
		toggleLinksOn(types[i]);
		checkboxID=types[i]+"Checkbox";
		document.getElementById(checkboxID).checked=true;
	}
}

function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
}

var hilightInterval;
var this_marker;
var icon_img;

function hilightMarker(marker,img) {
	this_marker=marker;
	hicon_img="images/h"+img+".png";
	this_marker.setImage(hicon_img);
	this_img=img;
	hilightInterval=setTimeout("dehilightMarker(this_marker,this_img)",150);
}
	
function dehilightMarker(marker,img) {
	this_marker=marker;
	icon_img="images/"+img+".png";
	this_marker.setImage(icon_img);
	this_img=img;
	hilightInterval=setTimeout("hilightMarker(this_marker,this_img)",150);
}

function clearHilight(marker,img) {
	clearTimeout(hilightInterval);
	this_marker=marker;
	icon_img="images/"+img+".png";
	this_marker.setImage(icon_img);
}

function myzoom(i) {
      map.setCenter(points[i]);
	map.setZoom(13);
	ovControl.show(true);
}