var map;
var geocoder;
var custMarker;
var baseMarker;
var baseIcon;
var custImage;
var dealerImage;
var dealers;
var xmlDoc;
var directionsPanel;
var directions;
var curMarker;
var openBallon;
var endMarker;
var toDealer;
var contextmenu;
var clickPixel;

function loadMap() {        
    try {        
	if (GBrowserIsCompatible()) {                
	    // Create and Center a Map
	    map = new GMap2(document.getElementById("map"));	    
	    //map.setCenter(new GLatLng(37.4419, -122.1419), 13);
	    map.setCenter(new GLatLng(41.512691,-73.564453), 7);
	    map.addControl(new GLargeMapControl(),new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 20)));
	    map.addControl(new GMapTypeControl());
	    map.addControl(new GScaleControl());         
	    map.enableDoubleClickZoom();
            map.enableContinuousZoom();
	    
	    //initialize some variables
	    geocoder = new GClientGeocoder();
	    directionsPanel = document.getElementById("route");                    
	    directions = new GDirections(map,directionsPanel);
            baseMarker = new GMarker(new GLatLng(37.4419, -122.1419));
            baseIcon = baseMarker.getIcon();           
            custImage = "../images/red_MarkerY.png";
            dealerImage = "../images/darkgreen_MarkerD.png";
            dealers = new Array();
            toDealer = true;
            
            // === create the context menu div ===
            contextmenu = document.createElement("div");          
            contextmenu.style.visibility="hidden";
            contextmenu.style.background="#ffffff";
            contextmenu.style.border="1px solid #8888FF";
            contextmenu.style.padding="2px";
  
            contextmenu.innerHTML = '<a href="javascript:placeMarker(true);"><div width="50" class="context">Directions from here</div></a>'
                              + '<a href="javascript:placeMarker(false);"><div width="50" class="context">Directions to here</div></a>'
                              + '<a href="javascript:zoomIn()"><div width="50" class="context">Zoom in</div></a>'
                              + '<a href="javascript:zoomOut()"><div width="50" class="context">Zoom out</div></a>'
                              + '<a href="javascript:zoomInHere()"><div width="50" class="context">Zoom in here</div></a>'
                              + '<a href="javascript:zoomOutHere()"><div width="50" class="context">Zoom out here</div></a>'
                              + '<a href="javascript:centreMapHere()"><div width="50" class="context">Center map here</div></a>';  
            map.getContainer().appendChild(contextmenu);

	    
	    //add a load listener to the GDirections object
	    GEvent.addListener(directions, "load", function() {
                try{
                        var miles = directions.getSummaryHtml();               
                        document.getElementById('miles').innerHTML = miles;
                        
                        if(toDealer == true){                        
                                directions.getRoute(0).getStartGeocode().address = custMarker.getTitle();
                                directions.getRoute(0).getEndGeocode().address = curMarker.getTitle();                                
                        }else{
                                directions.getRoute(0).getStartGeocode().address = curMarker.getTitle();
                                directions.getRoute(0).getEndGeocode().address = custMarker.getTitle();    
                        }
                        
                } catch (er) {
                        alert(er.name + " " + er.message);
                }	 
	    });
            
            //add "addoverlay" listener to hide directions markers
            GEvent.addListener(directions, "addoverlay", function(){               
                for(i=0; i < directions.getNumRoutes() + 1; i++){
                        var m = directions.getMarker(i);
                        map.removeOverlay(m);                                             
                }          
            });            
	    
	    //call funtion to import xml file and load the dealer markers
	    importXML();          
	    
	    GEvent.addListener(map, "singlerightclick", function(point, src, marker) {
                try{
                        clickedPixel = point;
                        var x=point.x;
                        var y=point.y;
                        if (x > map.getSize().width - 120) { x = map.getSize().width - 120 }
                        if (y > map.getSize().height - 100) { y = map.getSize().height - 100 }
                        var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
                        pos.apply(contextmenu);
                        contextmenu.style.visibility = "visible";                    
                        
                } catch (er) {
                        alert(er.name + " " + er.message);
                }	 
            });
            
            // === If the user clicks on the map, close the context menu ===
            GEvent.addListener(map, "click", function() {
                contextmenu.style.visibility="hidden";
            });
            
            GEvent.addListener(map, "mouseout", function() {
                contextmenu.style.visibility="hidden";
            });            
	}
	else{
	    alert("Your browser is not compatible!");
	}
    } catch (e) {
	    alert(e.name + " " + e.message);
    }	 
}

function placeMarker(toDlr){
        try{
                contextmenu.style.visibility="hidden";
                toDealer = toDlr;
                var p = map.fromContainerPixelToLatLng(clickedPixel);           
                showAddress(p.toUrlValue());
                
        } catch (e) {
	    alert(e.name + " " + e.message);
        }
       	 
}


function loadDealers(){
    try{        
	// create the icon we will user dealers
	var icon = new GIcon(baseIcon);        
	icon.image = dealerImage;
	var x = xmlDoc.getElementsByTagName('dealer');
	       
	//loop through the nodes
	for (i=0;i<x.length;i++) {
	    //list the variables we will be using to create our markers
	    var name=""; var address=""; var city=""; var state=""; var zip=""; var web=""; var lat=""; var lon="";
	    
	    //loop through the child nodes and put markers on the map
	    for (j=0;j<x[i].childNodes.length;j++) {
		if (x[i].childNodes[j].nodeType != 1){
		    continue;
		}
		
		var node = x[i].childNodes[j];
		
		if(node.nodeName == "name" && node.firstChild) {                        
		    name = node.firstChild.data;
		}
		else if(node.nodeName == "address" && node.firstChild) {
		    address = node.firstChild.data;
		}
		else if(node.nodeName == "city" && node.firstChild) {
		    city = node.firstChild.data;
		}
		else if(node.nodeName == "state" && node.firstChild) {
		    state = node.firstChild.data;
		}
		else if(node.nodeName == "zip" && node.firstChild) {
		    zip = node.firstChild.data;
		}
		else if(node.nodeName == "phone" && node.firstChild) {
		    phone = node.firstChild.data;
		}
		else if(node.nodeName == "web" && node.firstChild) {
		    web = node.firstChild.data;
		}
		else if(node.nodeName == "lat" && node.firstChild) {
		    lat = node.firstChild.data;
		}
		else if(node.nodeName == "long" && node.firstChild) {
		    lon = node.firstChild.data;                    
		}                
	    }                
	    
	    //we have the data for a mark so create it
	    var point = new GLatLng(lat,lon);                 
	    dealers[i] = new GMarker(point,{icon: icon, clickable: true, title: name});              
	    map.addOverlay(dealers[i]);                
	    dealers[i].bindInfoWindowHtml(name + "<br />" + address + "<br />" + city + ", " + state + " " + zip + "<br />" + phone + "<br /><a href=\"http://" + web + "\" target=\"_blank\">" + web + "</a><br />" +
					  "Get Directions:<br><a id=\"" + i + "\" title=\"Click to get directions to this point\" href=\"#\" onclick=\"javascript: setCurrentMarker(this.id); getDirections(true);\">To Here</a>" +
					  " - <a id=\"" + i + "\" title=\"Click to get directions from this point\" href=\"#\" onclick=\"javascript: setCurrentMarker(this.id); getDirections(false);\">From Here</a>");
            
            //this listener will cause a "click" event on the marker causing it to display it's info window
            GEvent.addListener(dealers[i], "mouseover", function(){
                GEvent.trigger(this,"click");
            });
            
            
            GEvent.addListener(dealers[i], "dblclick", function(){
                map.zoomIn();
            });  
            
	}
    } catch (e) {
	   alert(e.name + " " + e.message);
    }	 
}

function importXML() {
    try{
        var browserName=navigator.appName; 
        if (browserName=="Netscape"){           
                var req = new XMLHttpRequest;
                req.onreadystatechange = function () {                        
                        if (req.readyState == 4){                       
                                xmlDoc = req.responseXML;
                                loadDealers();   
                        }                 
                };       
                req.open("GET", "/dealer_locations.xml", true);
                req.send("");                
                
                return;
                
        }
        else if (browserName=="Microsoft Internet Explorer") {                
                var req = new ActiveXObject("Msxml2.XMLHTTP")
                req.onreadystatechange = function () {                        
                        if (req.readyState == 4){                       
                                xmlDoc = req.responseXML;
                                loadDealers();   
                        }                 
                };       
                req.open("GET", "/dealer_locations.xml", true);
                req.send("");         
        }
        else {
                alert("Your browser is not compatible with this page");
        }
        
    } catch (e) {
	   alert("Error in importXML().... " + e.name + " " + e.message);
    }	
}

function setCurrentMarker(id){
        curMarker.show();
        curMarker = dealers[id];        
}


function showAddress(address) {        
  if (geocoder) {       
    geocoder.getLocations(
      address,
      function(response) {
	
	if (!response || response.Status.code != 200) {
                alert("Location \"" + address + "\" not found");
	} else {
                try{              
                        var place = response.Placemark[0];
                        var point = new GLatLng(place.Point.coordinates[1],
                        place.Point.coordinates[0]);

                        map.setCenter(point, 6);
                        map.removeOverlay(custMarker);    
        
                        var icon = new GIcon(baseIcon);
                        icon.image = custImage;               
        
                        custMarker = new GMarker(point,{icon: icon, draggable: true, clickable: true, title: place.address});                
                        map.addOverlay(custMarker);
                        custMarker.bindInfoWindowHtml(place.address + "<br><br>Get Directions To/From Dealer:<br><a href=\"#\" onclick=\"javascript: getDirections(false);\">To Here</a>" +
					  " - <a href=\"#\" onclick=\"javascript: getDirections(true);\">From Here</a>");                        
                        
                        //GLog.write(place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName);
                        
                        // now we want to find the closest dealer	      
                        var closest = 0;
                        var d = 0;
                        var x = 0;
                        var pnt = custMarker.getPoint();
        
                        for (x in dealers) {
                            var distance = pnt.distanceFrom(dealers[x].getPoint());
                            if(x == 0){
                               closest = distance;
                               d = x;
                            }
        
                            if(distance < closest){
                                closest = distance
                                d = x;
                            }
                        }
                        
                        //set closest dealer as the current marker
                        if(curMarker == null){
                              curMarker = dealers[d];  
                        }                                            
                        
                        //now load the directions
                        getDirections(toDealer);
                        
                        //listen for the custMarker "dragend" event
                        GEvent.addListener(custMarker, "dragend", function(){
                                showAddress(custMarker.getPoint().toUrlValue());                                
                        });
                        
                        //this listener will cause a "click" event on the marker causing it to display it's info window
                        GEvent.addListener(custMarker, "mouseover", function(){
                            GEvent.trigger(this,"click");
                        });
                        
                        GEvent.addListener(custMarker, "dragstart", function(){
                                custMarker.closeInfoWindow();                               
                        });
                        
                } catch (e) {
                  alert("An error occurred in showAddress...." + e.name + " " + e.message);
                }
	}
      }
    );
  }
}

function getDirections(toDlr) {
    try{
        toDealer = toDlr;
	directions.clear();
	if(custMarker != null){                
                
                if(toDealer){
                    directions.load(custMarker.getPoint().toUrlValue() + " to " + curMarker.getPoint().toUrlValue());                    
                }
                else{
                    directions.load(curMarker.getPoint().toUrlValue() + " to " + custMarker.getPoint().toUrlValue());  
                }                
                	    
	}
	else{
	    alert("Please type in your address or zip code above first!");
	}        
    } catch (e) {
	alert(e.name + " " + e.message);
    }
}    
    
function clickclear(thisfield, defaulttext) {
    if (thisfield.value == defaulttext) {
        thisfield.value = "";
    }
}

function clickrecall(thisfield, defaulttext) {
    if (thisfield.value == "") {
        thisfield.value = defaulttext;
    }
}

function toggleLayer(in_layer, in_action) {
        if(document.getElementById(in_layer).style.display == "block" && in_action != 'on'){
                document.getElementById(in_layer).style.display="none";
                if(in_layer == "location"){
                        document.getElementById("sidebar").style.display="none";
                }
        }else{
                document.getElementById(in_layer).style.display="block";
                if(in_layer == "location"){
                        document.getElementById("showHide").checked="checked";
                        document.getElementById("sidebar").style.display="block";
                }
        }

}

// === functions that perform the context menu options ===
function zoomIn() {
  // perform the requested operation
  map.zoomIn();
  // hide the context menu now that it has been used
  contextmenu.style.visibility="hidden";
}      
function zoomOut() {
  // perform the requested operation
  map.zoomOut();
  // hide the context menu now that it has been used
  contextmenu.style.visibility="hidden";
}      
function zoomInHere() {
  // perform the requested operation
  var point = map.fromContainerPixelToLatLng(clickedPixel)
  map.zoomIn(point,true);
  // hide the context menu now that it has been used
  contextmenu.style.visibility="hidden";
}      
function zoomOutHere() {
  // perform the requested operation
  var point = map.fromContainerPixelToLatLng(clickedPixel)
  map.setCenter(point,map.getZoom()-1); // There is no map.zoomOut() equivalent
  // hide the context menu now that it has been used
  contextmenu.style.visibility="hidden";
}      
function centreMapHere() {
  // perform the requested operation
  var point = map.fromContainerPixelToLatLng(clickedPixel)
  map.setCenter(point);
  // hide the context menu now that it has been used
  contextmenu.style.visibility="hidden";
}