var map;
var lat;  //Current selected ealer lat
var lon;  //Current selected dealer lon
var proxyServerName = "";
var proxyServerPort = "";
// this is the important one, it tells the JSAPI where to send the XML request (the location of the proxy on my own server)
var ProxyServerPath = "/JSAPIProxyPage/proxy.aspx";
var serverName = "geocode.access.mapquest.com";
var serverPort = "80";
var serverPath = "mq";
var myGcExec = new MQExec(serverName, serverPath, serverPort, proxyServerName, ProxyServerPath, proxyServerPort);
var myRExec = new MQExec("route.access.mapquest.com", serverPath, serverPort, proxyServerName, ProxyServerPath, proxyServerPort);
var myLocColl = new MQLocationCollection("MQGeoAddress");


var myRtColl = new MQLocationCollection("MQGeoAddress");
var myOptions = new MQRouteOptions();
var myRtResults = new MQRouteResults();
var myTrkRtColl = new MQTrekRouteCollection();
var myManeuverColl = new MQManeuverCollection();
var myManStr = "";
var myTrkStr = "";
var mySessID = myRExec.createSessionEx(new MQSession());
var myBoundingBox = new MQA.RectLL(new MQA.LatLng(),new MQA.LatLng());
myOptions.setMaxShapePointsPerManeuver(2);


var alphabetArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ];
function loadMap(canvasId){
    map = new MQA.TileMap(document.getElementById(canvasId));	
	
	// Create an MQA.LargeZoomControl attached to the map
	zControl = new MQA.ZoomControl(map);
	//tell the map to display the control we just attached
	map.addControl(zControl);

  
    if(hybridEnabled){
    	//Create a map view type control
	    myVControl = new MQA.ViewControl(map);

	    //Display control specifying the CornerPlacement, and an MQA.Size object to define X,Y offset
	    map.addControl(myVControl, new MQA.MapCornerPlacement(MQA.MapCorner.TOP_RIGHT, new MQA.Size(20,20)));

    }

    if(locations.length == 1){
      lat = locations[0][0];
      lon = locations[0][1];
      if(ddLat != null){
        getDirections(null,true);
      }
    }
    for(i = 0; i < locations.length; i++){
        var point = new MQA.Poi(new MQA.LatLng(locations[i][0],locations[i][1]));
        point.setValue('infoTitleHTML',locations[i][2]);
        var locBubble = document.getElementById("bubble-loc" + i);
        if(locBubble != null){
            var bDiv = document.createElement("div");
            var tabs = getBubbleTabs(locBubble);
            if(tabs.length > 0){
                for(j = 0; j < tabs.length; j++){
                  bDiv.appendChild(tabs[j]);
                  bDiv.appendChild(document.createElement("hr"));
                }
            }
            else{
                bDiv.innerHTML = locBubble.innerHTML;
            }
                
            point.setValue('infoContentHTML',"<div style='text-align:left;font-size:12px'>" + bDiv.innerHTML + "</div>");
        }
        else{
            var markerText = "<div style='text-align:left;font-size:12px'>";
            //markerText += "<span style='font-weight:bold;'>" + locations[i][2] + "</span>";
            //markerText += "<br>"
            markerText += locations[i][3] + "<br>" + locations[i][4] + ", " + locations[i][5] + " " + locations[i][6];
            if(document.getElementById("fl_route") != null){
                markerText += "<br><br>"; 
                markerText += "<input id='bubbleDirections' type='text' onclick='this.focus();' size='40'><br><input type=\"button\" onclick=\"lat=" + locations[i][0]+";lon=" + locations[i][1] + ";getDirections(document.getElementById('bubbleDirections').value)\" value=\"Get Directions\">";
            }
            markerText += "</div>";	
            point.setValue('infoContentHTML',markerText);
        }
                
        
          
           
          var myIcon = new MQA.Icon(iconBase + iconName + "mq-" + locations[i][7] + (numbered?i+1:alphabetArray[locations.length == 1?1:i]) + ".png",iconWidth,iconHeight);
	       //alert(iconXAlign + " " + iconHeight);
	      point.setValue('icon',myIcon);
	      point.setValue('iconOffset',new MQA.Point(iconXAlign!=0?-iconXAlign:0,iconYAlign!=0?-iconYAlign:0));

           
           
        map.setMapShadowState(true);
        map.addShape(point);
        if(locations.length > 1){
          map.bestFit();
        }
        else{
          map.setCenter(new MQLatLng(locations[0][0],locations[0][1]), 13);
        }
    }
    
    
}

    function getBubbleTabs(container){
        var tabs = new Array();
        var divs = container.getElementsByTagName("div");
        for(var i = 0; i < divs.length; i++){
            if(divs[i].className == "bubble-tab"){
                tabs.push(divs[i]);
            }
        }
        return tabs;
    }
    function getDirectionsWithDetails(street,city,state,postalCode,countryAbbr){
        clearInfo();
        var myAddr = new MQAddress();
	if(street != null && street.length > 0){
        	myAddr.setStreet(street);
	}
	if(city != null && city.length > 0){
        	myAddr.setCity(city);
	}
	if(state != null && state.length > 0){
        	myAddr.setState(state);
	}
	if(postalCode != null && postalCode.length > 0){
        	myAddr.setPostalCode(postalCode);
	}
	if(countryAbbr != null && countryAbbr.length > 0){
        	myAddr.setCountry(countryAbbr);
	}
        myGcExec.geocode(myAddr,myLocColl);
        if(myLocColl.getSize() == 0){
            alert("No location found, please check your input");
        }
        else{
            var routeCollection = new MQLocationCollection("MQGeoAddress");
	        var toAddress = new MQGeoAddress();
	        toAddress.setMQLatLng(new MQA.LatLng(lat,lon));
	        myRtColl.add(myLocColl.get(0));
	        myRtColl.add(toAddress);
	        myRExec.doRoute(myRtColl,myOptions,myRtResults,mySessID,myBoundingBox);
            displayRoute();
        }
    }
function getDirections(from,isInitialLoad){
    clearInfo();
	var mySLA = new MQSingleLineAddress();
	if(!isInitialLoad){
	    mySLA.setAddress(from==null?document.getElementById("directionInput").value:from);
        myGcExec.geocode(mySLA,myLocColl);
    }
    else{
        var geoAddress = new MQGeoAddress();
        geoAddress.setMQLatLng(new MQLatLng(ddLat,ddLon));
        myLocColl.add(geoAddress);
    }
    if(myLocColl.getSize() == 0){
        alert("No location found, please check your input");
    }
    else{
        var routeCollection = new MQLocationCollection("MQGeoAddress");
	    var toAddress = new MQGeoAddress();
	    toAddress.setMQLatLng(new MQA.LatLng(lat,lon));
	    myRtColl.add(myLocColl.get(0));
	    myRtColl.add(toAddress);
	    myRExec.doRoute(myRtColl,myOptions,myRtResults,mySessID,myBoundingBox);
        displayRoute();
	    
    }
}
/*
*  clear the junk
*/
function clearInfo(){
	map.removeRouteHighlight();
	myTrkStr = "";
	toAddress = new MQAddress();
	myFAddress = new MQAddress();
	myGcColl = new MQLocationCollection("MQGeoAddress");
	myRtColl = new MQLocationCollection("MQGeoAddress");
	myOptions = new MQRouteOptions();
    myOptions.setMaxShapePointsPerManeuver(2);
	if(locale != null){
	    switch(locale){
	        case "fr":
	            myOptions.setLanguage("French");
	            break;
	        case "es":
	            myOptions.setLanguage("Spanish");
	            break;
	        case "de":
	            myOptions.setLanguage("German");
	            break;
	        case "ja":
	            myOptions.setLanguage("Japanese");
	            break;
	        default:
	            myOptions.setLanguage("English");
	            break;
	    }
	}
	
	
	myRtResults = new MQRouteResults();
	myBoundingBox = new MQA.RectLL(new MQA.LatLng(),new MQA.LatLng());
	document.getElementById("fl_route").innerHTML = '';
	mySessID = myRExec.createSessionEx(new MQSession());
	if(startShape != null && endShape != null){
	    map.removeShape(startShape);
	    map.removeShape(endShape);
	}
}

/*
var startShape = null;
var endShape = null;
function displayRoute(){
	var myMinutes = myRtResults.getTime()/60;
	if (myMinutes > 60) {
		if (myMinutes/60 == 1) {
			var myTotTime = "1 hr ";
		}
		else {
			var myTotTime = Math.round((myMinutes/60)*100)/100 + " hrs";
		}
	}
	else {
		var myTotTime = myMinutes + " minutes";
	}
	var myDist = Math.round(myRtResults.getDistance()*100)/100;

	myTrkRtColl = myRtResults.getTrekRoutes();
	myManeuverColl = myTrkRtColl.get(0).getManeuvers();

    myTrkStr = "<table width=\"100%\">";
    myTrkStr += "<tr><td valign=\"middle\" colspan=\"3\">";
    myTrkStr += "<img src=\"http://localhost/DefaultSite/Images/Map Icons/start.png\" alt=\"startIcon\">";
    myTrkStr += "</td></tr>";
    myTrkStr += "<tr><td></td><td colspan=\"2\" align=\"right\">";
    myTrkStr += myDist + "mi (About " + myTotTime + ")";
    myTrkStr += "</td></tr>";
	for (intX = 0; intX < myManeuverColl.getSize(); intX ++){
	    //display start and end icons on map
	    if(intX == 0){
	        var shapePoints = myManeuverColl.get(intX).getShapePoints();
            var startIcon = new MQA.Icon("http://localhost/DefaultSite/Images/Map Icons/start.png",32,28);
            //alert(iconXAlign + " " + iconHeight);
            var point = new MQA.Poi(new MQA.LatLng(shapePoints.get(0).getLatitude(),shapePoints.get(0).getLongitude() ));
            point.setValue('icon',startIcon);
            point.setValue('iconOffset',new MQA.Point(0,-28));
            map.addPoi(point);
            startShape = point;
	    }
	    else if(intX == myManeuverColl.getSize() -1){
	        var shapePoints = myManeuverColl.get(intX).getShapePoints();
            var endIcon = new MQA.Icon("http://localhost/DefaultSite/Images/Map Icons/end.png",32,28);
            //alert(iconXAlign + " " + iconHeight);
            var point = new MQA.Poi(new MQA.LatLng(shapePoints.get(shapePoints.getSize()-1).getLatitude(),shapePoints.get(shapePoints.getSize()-1).getLongitude() ));
            point.setValue('icon',endIcon);
            point.setValue('iconOffset',new MQA.Point(0,-28));
            map.addPoi(point);
            endShape = point;
	    
	    }
	
	
	    
        myTrkStr += "<tr>";
        
        myTrkStr += "<td>";
        myTrkStr += (intX +1) +  ". ";
        myTrkStr += "</td>";
        
        myTrkStr += "<td>";
        myTrkStr += myManeuverColl.get(intX).getNarrative() ;
        myTrkStr += "</td>";
        
        
        myTrkStr += "<td nowrap align=\"right\">";
        myTrkStr += " (" + Math.round(myManeuverColl.get(intX).getDistance()*100)/100 + " mi)";
        myTrkStr += "</td>";
		//myManDist = Math.round(myManeuverColl.get(intX).getDistance()*100)/100;
		//myManStr = (intX +1) +  ". " + myManeuverColl.get(intX).getNarrative() + "(Distance: " + myManDist + " mi)";
		//myTrkStr = myTrkStr + myManStr + "<br/><hr/>";
        //myTrkStr += "</tr>";

	}
    myTrkStr += "<tr><td colspan=\"3\">";
    myTrkStr += "<img src=\"http://localhost/DefaultSite/Images/Map Icons/end.png\" alt=\"endIcon\">";
    myTrkStr += "</td></tr>";
    myTrkStr += "</table>";
	document.getElementById("fl_route").innerHTML = myTrkStr;
  	map.addRouteHighlight(myBoundingBox,"http://map.dev.mapquest.com",mySessID,true);

}
*/
var startShape = null;
var endShape = null;

    function displayRoute(){
	    var myMinutes = myRtResults.getTime()/60;
	    if (myMinutes > 60) {
		    if (myMinutes/60 == 1) {
			    var myTotTime = "1 hr ";
		    }
		    else {
			    var myTotTime = Math.round((myMinutes/60)*100)/100 + " hrs";
		    }
	    }
	    else {
		    var myTotTime = Math.round(myMinutes) + " min";
	    }
	    var myDist = Math.round(myRtResults.getDistance()*100)/100;
	    myTrkRtColl = myRtResults.getTrekRoutes();
	    
	    
	    
	    /*
        myTrkStr = "<table width=\"100%\">";
        myTrkStr += "<tr><td colspan=\"3\">";
        myTrkStr += "<img src=\"http://localhost/DefaultSite/Images/Map Icons/start.png\" alt=\"startIcon\">";
        myTrkStr += "</td></tr>";
        myTrkStr += "<tr><td></td><td colspan=\"2\" align=\"right\">";
        myTrkStr += myDist + "mi (About " + myTotTime + ")";
        myTrkStr += "</td></tr>";
	    */
	    
	    
	    try{
	    for(trekNbr = 0; trekNbr < myTrkRtColl.getSize(); trekNbr++){
	    var trek = myTrkRtColl.get(trekNbr);
	    var trekMinutes = trek.getTime()/60;
	    var trekTime;
	    if (trekMinutes > 60) {
		    if (trekMinutes/60 == 1) {
			    trekTime = "1 hr ";
		    }
		    else {
			    trekTime = Math.round((trekMinutes/60)*100)/100 + " hrs";
		    }
	    }
	    else {
		    trekTime = Math.round(trekMinutes) + " min";
	    }
	    
	    
	        myManeuverColl = myTrkRtColl.get(trekNbr).getManeuvers();
	    
	        for (i = 0; i < myManeuverColl.getSize(); i ++){
	        
		        myManDist = Math.round(myManeuverColl.get(i).getDistance()*100)/100;
	        /*
	                var shapePoints = myManeuverColl.get(i).getShapePoints();
	                for(j = 0; j < shapePoints.getSize(); j++){
	                    var point = new MQA.Poi(new MQA.LatLng(shapePoints.get(j).getLatitude(),shapePoints.get(j).getLongitude()));
                        var myIcon = new MQA.Icon("http://localhost/DefaultSite/Images/map icons/blueletter-b.png",20,34);
	                    point.setValue('icon',myIcon);
	                    point.setValue('iconOffset',new MQA.Point(0,-25));
	                    map.addPoi(point);
	                }
	        */
	            if(trekNbr == 0 && i == 0){
	            
	            
                    myTrkStr = "<table width=\"100%\">";
                    myTrkStr += "<tr><td colspan=\"3\">";
                    myTrkStr += "<div style=\"margin-right:20px;\" class=\"trip-stop\"><img src=\"" + iconBase + "/start.png\" alt=\"start\">" + myManeuverColl.get(i).getStreets().get(0) + "</div>";
                    myTrkStr += "</td></tr>";
                    myTrkStr += "<tr><td></td><td colspan=\"2\" align=\"right\">";
                    myTrkStr += Math.round(myTrkRtColl.get(trekNbr).getDistance()*100)/100 + "mi (About " + trekTime + ")";
                    myTrkStr += "</td></tr>";
                    myTrkStr += "<tr><td colspan=\"3\"><hr/></td></tr>";
	                var shapePoints = myManeuverColl.get(i).getShapePoints();

                    var startIcon = new MQA.Icon(iconBase + "/start.png",39,25);
	                //alert(iconXAlign + " " + iconHeight);
                    startPoint = new MQA.Poi(new MQA.LatLng(shapePoints.get(0).getLatitude(),shapePoints.get(0).getLongitude() ));
	                startPoint.setValue('icon',startIcon);
	                startPoint.setValue('iconOffset',new MQA.Point(0,-25));
	                map.addPoi(startPoint);
	                startShape = startPoint;
	            }
	            else if(trekNbr == myTrkRtColl.getSize() - 1 && i == myManeuverColl.getSize() -1){
	                var shapePoints = myManeuverColl.get(i).getShapePoints();
                    var endIcon = new MQA.Icon(iconBase + "/end.png",32,28);
	                //alert(iconXAlign + " " + iconHeight);
                    endPoint = new MQA.Poi(new MQA.LatLng(shapePoints.get(shapePoints.getSize()-1).getLatitude(),shapePoints.get(shapePoints.getSize()-1).getLongitude() ));
	                endPoint.setValue('icon',endIcon);
	                endPoint.setValue('iconOffset',new MQA.Point(0,-28));
	                map.addPoi(endPoint);
	                endShape = endPoint;
	            }
		        
		        
                myTrkStr += "<tr>";
                myTrkStr += "<td width=\"1%\" style=\"font-weight:bold;\" valign=\"top\">";
                myTrkStr += (i +1) +  ". ";
                myTrkStr += "</td>";
                myTrkStr += "<td>";
                myTrkStr += myManeuverColl.get(i).getNarrative() ;
                myTrkStr += "</td>";
                myTrkStr += "<td nowrap valign=\"top\" align=\"right\">";
                myTrkStr += " (" + myManDist + " mi)";
                myTrkStr += "</td></tr>";
                myTrkStr += "<tr><td colspan=\"3\"><hr/></td></tr>";
              
		        
		        /*
		        myManStr = (i +1) +  ". " + myManeuverColl.get(i).getNarrative() + "(Distance: " + myManDist + " mi)";
		        myTrkStr = myTrkStr + myManStr + "<br/><hr/>";
		        */
		    }
	        if(trekNbr == myTrkRtColl.getSize() -1){
	        
	        
                myTrkStr += "<tr><td colspan=\"3\">";
                myTrkStr += "<div class=\"trip-stop\"><img src=\"" + iconBase + "/end.png\" alt=\"end\">" + myManeuverColl.get(myManeuverColl.getSize()-1).getStreets().get(myManeuverColl.get(myManeuverColl.getSize()-1).getStreets().getSize()-1) + "</div>"; 
                myTrkStr += "</td></tr>";
                /*
	            myTrkStr += "<div>";
	            myTrkStr += "<img src=\"http://localhost/DefaultSite/Images/Map Icons/end.png\" alt=\"start\">"; 
	            myTrkStr += "</div>";
	            */
	        }
	    }
	    }catch(e){
	     alert(e.message);
	    }
	    myTrkStr += "</table>";
	    document.getElementById("fl_route").innerHTML = myTrkStr;
  	    
	    document.getElementById("fl_route").innerHTML = myTrkStr;
  	    map.addRouteHighlight(myBoundingBox,"http://map.access.mapquest.com",mySessID,true);
    }


function GUnload(){
//do something later
}