/*
locations[i][0]=latitude
locations[i][1]=longitude
locations[i][2]=name
locations[i][3]=address1
locations[i][4]=city
locations[i][5]=state
locations[i][6]=postal
locations[i][7]=icon url
locations[i][8]=icon width
locations[i][9]=icon height
locations[i][10]=icon xanchor
locations[i][11]=icon yanchor
locations[i][12]=icon shadow url
locations[i][13]=shadow width
locations[i][14]=shadow height
*/

var map;
var lat;  //Current selected dealer 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;
var serverPort = "80";
var serverPath = "mq";
var myGcExec;
var myRExec;
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;
var myBoundingBox = new MQA.RectLL(new MQA.LatLng(),new MQA.LatLng());

var ddFrom = "";

myOptions.setMaxShapePointsPerManeuver(2);


    var sc = new MQA.ShapeCollection();

//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){
    
    
    serverName = "geocode." + mqServer + ".mapquest.com";
    myGcExec = new MQExec(serverName, serverPath, serverPort, proxyServerName, ProxyServerPath, proxyServerPort);
    myRExec = new MQExec("route." + mqServer + ".mapquest.com", serverPath, serverPort, proxyServerName, ProxyServerPath, proxyServerPort);
    mySessID = myRExec.createSessionEx(new MQSession());

    //add searching center point icon (if desired)
    if (displayCenter) {
        var point = new MQA.Poi(new MQA.LatLng(searchLat * 57.2957795, searchLon * 57.2957795));
        var myIcon = new MQA.Icon(centerIcon, centerWidth, centerHeight);
        point.setValue('icon', myIcon);
        point.setValue('iconOffset', new MQA.Point(-centerXAlign, -centerYAlign));
        point.setValue('infoTitleHTML', "Search Point");
        sc.add(point);
    }
    
    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) {
            //prevent id duplication
            locBubble.parentNode.removeChild(locBubble);
            
            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();' onkeypress = 'doButtonClickOnEnter(event, document.getElementById(\"bubblebtn\"))' size='40'><br><input id =\"bubblebtn\" 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 iconNumber = i;
        //if (typeof displayB != "undefined" && displayB) iconNumber=1; //display a B or 2 instead of A or 1 for map.aspx
        //var myIcon = new MQA.Icon(iconBase + iconName + "mq-" + locations[i][7] + (numbered?iconNumber+1:alphabetArray[iconNumber]) + ".png",iconWidth,iconHeight);
        var myIcon = new MQA.Icon(locations[i][7], locations[i][8], locations[i][9]);
	    //alert(iconXAlign + " " + iconHeight);
	    point.setValue('icon',myIcon);
	    //point.setValue('iconOffset',new MQA.Point(iconXAlign!=0?-iconXAlign:0,iconYAlign!=0?-iconYAlign:0));
	    point.setValue('iconOffset', new MQA.Point(-locations[i][10], -locations[i][11]));
	    if (locations[i][13] > 0 && locations[i][14] > 0) {
	        point.setValue('shadow', new MQA.Icon(locations[i][12], locations[i][13], locations[i][14]));
	        point.setValue('shadowOffset', new MQA.Point(0, -locations[i][9]));
	    } else {
	        point.setValue('shadow', null);
	        point.setValue('shadowOffset', null);
	    }
        //map.setMapShadowState(true);
        sc.add(point);
        //map.addShape(point);
    }
    if(locations.length > 1){
        var mi = new MQA.MapInit();
        mi.setBestFitRect(sc.getBoundingRect());
        mi.setBestFitMargin(15);
        map = new MQA.TileMap(document.getElementById(canvasId),null,null,"map",mi);	
    }
    else{
        var mi = new MQA.MapInit();
        mi.setBestFitRect(sc.getBoundingRect());
        mi.setMinZoom(13);
        mi.setMaxZoom(13);
        map = new MQA.TileMap(document.getElementById(canvasId),null,null,"map",mi);	
        /*
        map = new MQA.TileMap(document.getElementById(canvasId));
        map.setCenter(new MQLatLng(locations[0][0],locations[0][1]), 13);
        */
    }
    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)));
    }
    map.addControl(new MQA.ZoomControl());
    map.addShapes(sc);
    map.setMapShadowState(true);
    
    if(locations.length == 1){
      lat = locations[0][0];
      lon = locations[0][1];
      if(ddLat != null){
          getDirections(ddLat + ", " + ddLon, true);
      }
    }
    
	// 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(locations.length > 1){
     //     map.bestFit();
     //   }
     //   else{
     //     map.setCenter(new MQLatLng(locations[0][0],locations[0][1]), 13);
     //   }
    
    
}

//This function clicks the input button if the input event was the enter key
function doButtonClickOnEnter(inputEvent, inputButton){
    if(inputEvent.keyCode==13){
        inputButton.click();
    }
}

    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){
        ddFrom = street + " " + city + ", " + state + " " + postalCode + " " + countryAbbr;
        clearInfo();
        var myAddr = new MQAddress();
        myAddr.setStreet(street);
        myAddr.setCity(city);
        myAddr.setState(state);
        myAddr.setPostalCode(postalCode);
        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){
    if(from == null){
        from = document.getElementById("directionInput").value;
    }
    ddFrom = from;
    clearInfo();
	var mySLA = new MQSingleLineAddress();
	if(!isInitialLoad){
	    mySLA.setAddress(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=\"" + ddIconStart + "\" 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(ddIconStart,ddIconWidth,ddIconHeight);
	                //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(-ddIconXAlign, -ddIconYAlign));
	                if (ddShadowX > 0 && ddShadowY > 0) {
	                    startPoint.setValue('shadow', new MQA.Icon(ddShadow, ddShadowX, ddShadowY));
	                    startPoint.setValue('shadowOffset', new MQA.Point(0, -ddIconHeight));
	                } else {
	                    startPoint.setValue('shadow', null);
	                    startPoint.setValue('shadowOffset', null);
	                }
	                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(ddIconEnd,ddIconWidth,ddIconHeight);
	                //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(-ddIconXAlign, -ddIconYAlign));
	                if (ddShadowX > 0 && ddShadowY > 0) {
	                    endPoint.setValue('shadow', new MQA.Icon(ddShadow, ddShadowX, ddShadowY));
	                    endPoint.setValue('shadowOffset', new MQA.Point(0, -ddIconHeight));
	                } else {
	                    endPoint.setValue('shadow', null);
	                    endPoint.setValue('shadowOffset', null);
	                }
	                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\">";
                var endStreet = myManeuverColl.get(myManeuverColl.getSize()-1).getStreets().get(myManeuverColl.get(myManeuverColl.getSize()-1).getStreets().getSize()-1);
                
                myTrkStr += "<div class=\"trip-stop\"><img src=\"" + ddIconEnd + "\" alt=\"end\">" + (endStreet == null?"Unknown Road":endStreet) + "</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." + mqServer + ".mapquest.com",mySessID,true);
  	}


function GUnload(){
//do something later
}