var myMap = null;
var pinHTML = "<div class='pinStyle'>{0}</div>";

function LoadMap() {
  //  myMap = new VEMap("mapDiv");
  //  myMap.LoadMap();
}

function UnloadMap() {
    if (myMap != null) {
        myMap.Dispose();
    }
}
var lats = new Array();
var longs = new Array();
var xml;
var xmlData;
var flag;



function StartGeocoding(address, lati, longi, data, flg) {

$(document).ready(function () {
    lats = lati;
    longs = longi;
    xmlData = data;
    flag = flg;
   
        myMap = new VEMap("mapDiv");
        myMap.LoadMap();
        myMap.Find(null,         // what
                  address,           // where
                  null,              // VEFindType (always VEFindType.Businesses)
                  null,              // VEShapeLayer (base by default)
                  null,              // start index for results (0 by default)
                  null,              // max number of results (default is 10)
                  null,              // show results? (default is true)
                  null,              // create pushpin for what results? (ignored since what is null)
                  null,              // use default disambiguation? (default is true)
                  null,              // set best map view? (default is true)
                  GeocodeCallback1);  // call back function

    });
}



function  GeocodeCallback1(shapeLayer, findResults, places, moreResults, errorMsg) {
    // Mozilla and Netscape browsers
    if (document.implementation.createDocument) {
        var parser = new DOMParser()
        xml = parser.parseFromString(xmlData, "text/xml")
        // MSIE
    } else if (window.ActiveXObject) {
        xml = new ActiveXObject("Microsoft.XMLDOM")
        xml.async = "false"
        xml.loadXML(xmlData)
    }
    var markerhtml = xml.documentElement.getElementsByTagName('marker');
    // var layerSpec = new VEShapeLayer();
    myMap.SetCenterAndZoom(new VELatLong(lats[0], longs[0]), 10);

    var itemHTML = '';
    for (var i = 0; i < lats.length; i++) {

        var marker = new VEShape(VEShapeType.Pushpin, new VELatLong(lats[i], longs[i]));
        var cnt = i + 1;
        var currentPinHTML = pinHTML.replace('{0}', '<img src="../images/marker/marker' + cnt + '.png"/>');
        marker.SetDescription(infoWindowContent[i].toString());
        marker.SetCustomIcon(currentPinHTML);
        myMap.AddShape(marker);

        var currentMarkerID = marker.GetID();
        var brand = markerhtml[i].getAttribute('Brand');
        var address = markerhtml[i].getAttribute('address');
        var distance = markerhtml[i].getAttribute('distance');
        var lat = markerhtml[i].getAttribute('lat');
        var lng = markerhtml[i].getAttribute('lng');
        var address2 = markerhtml[i].getAttribute('address2');
        var style = '#F5ECE2';
        if (cnt % 2) {
            style = '#F4F4F4';
        }

        if (flag == 0) {

            currentPinHTML = currentPinHTML.replace('<div ', '<div id=\'sideBarMarker_' + currentMarkerID + '\' ');
            itemHTML += '<span onmouseover="mouseOverSidebarItem(\'' + marker.GetID() + '\');" onmouseout="mouseOutSidebarItem(\'' + marker.GetID() + '\');">';
            itemHTML += '<table width="100%" style="background-color:' + style + '" onMouseover="this.style.backgroundColor=\'#FFFFEC\'" onmouseout="this.style.backgroundColor=\'' + style + '\'"><tr><td rowspan="4" valign="top">' + currentPinHTML + '</td><td><strong>' + brand + ' - ' + distance + ' Miles</strong></td></tr>';
            itemHTML += '<tr><td>' + address + '</td></tr>';
            itemHTML += '<tr><td>' + address2 + '</td></tr>';
            itemHTML += '<tr><td>' + '<a href="/DrivingDirection.aspx?address=' + address + " " + address2 + '">Get Directions<\/a></td></tr></table>';
            itemHTML += '</span>';
        }
        else {
            currentPinHTML = currentPinHTML.replace('<div ', '<div id=\'sideBarMarker_' + currentMarkerID + '\' ');
            itemHTML += '<span style="text-align: left" onmouseover="mouseOverSidebarItem(\'' + marker.GetID() + '\');" onmouseout="mouseOutSidebarItem(\'' + marker.GetID() + '\');">';
            itemHTML += '<table border="0" width="100%" style="background-color:' + style + '; text-align: left" onMouseover="this.style.backgroundColor=\'#FFFFEC\'" onmouseout="this.style.backgroundColor=\'' + style + '\'"><tr><td rowspan="4" width="10%" valign="top"><strong>' + currentPinHTML + '</td><td><strong>' + brand + ' - ' + distance + ' Miles</strong></td></tr>';
            itemHTML += '<tr><td align="left">' + address + ' ' + address2 + '</td>';
            itemHTML += '</table>';
            itemHTML += '</span>';
        }
    }
    document.getElementById('SideBar').innerHTML += itemHTML;
    //
    // Attach the event handlers to the mouse 
    myMap.AttachEvent("onmouseover", mouseOverHandler);
    myMap.AttachEvent("onmouseout", mouseOutHandler);


    var resHtml = "";
    $(document).pngFix(); 

    // if there are no results, display the error message and return
}


function mouseOverSidebarItem(markerId) {
    //Update pushpin
    currentShape = myMap.GetShapeByID(markerId);
    currentIcon = currentShape.GetCustomIcon();
    currentShape.SetCustomIcon(currentIcon.replace('pinStyle', 'pinHoverStyle'));
    myMap.ShowInfoBox(currentShape);

    //Update side bar icon
    var sideBarIconId = 'sideBarMarker_' + currentShape.GetID();
    document.getElementById(sideBarIconId).className = 'pinHoverStyle';
}

function mouseOverHandler(e) {
    if (e.elementID && notOver) {
        mouseOverSidebarItem(e.elementID)
        notOver = false;
    }
}

function mouseOutHandler(e) {
    if (e.elementID && !notOver) {
        mouseOutSidebarItem(e.elementID)
        notOver = true;
    }
}
function mouseOutSidebarItem(markerId) {
    //Update pushpin
    currentShape = myMap.GetShapeByID(markerId);
    currentIcon = currentShape.GetCustomIcon();
    currentShape.SetCustomIcon(currentIcon.replace('pinHoverStyle', 'pinStyle'));
    myMap.HideInfoBox(currentShape);

    //Update side bar icon
    var sideBarIconId = 'sideBarMarker_' + currentShape.GetID();
    document.getElementById(sideBarIconId).className = 'pinStyle';
}

function MatchCode(code) {
    if (code == VEMatchCode.None) {
        return "No match";
    }

    var codeDesc = "";
    var cVal;

    cVal = code & VEMatchCode.Good;
    if (cVal > 0) {
        codeDesc += "Good ";
    }

    cVal = code & VEMatchCode.Ambiguous;
    if (cVal > 0) {
        codeDesc += "Ambiguous ";
    }

    cVal = code & VEMatchCode.UpHierarchy;
    if (cVal > 0) {
        codeDesc += "UpHierarchy ";
    }

    cVal = code & VEMatchCode.Modified;
    if (cVal > 0) {
        codeDesc += "Modified ";
    }

    return (codeDesc + "Match");
}

function onGeocodeClick() {
    myMap.Clear();
    address = "Irving TX";
    StartGeocoding(address);
}


function initializeDD(print) {
       var qrStr = window.location.search;
        var spQrStr = qrStr.substring(1);
        var arrQrStr = new Array();
        var arr = spQrStr.split("&");

        for (var i = 0; i < arr.length; i++) {
            // splits each of field-value pair
            var index = arr[i].indexOf("=");
            var key = arr[i].substring(0, index);
            var val = arr[i].substring(index + 1);
            arrQrStr[key] = val;
        }
        var address2 = arrQrStr["address"];
        var address1;
        address2 = unescape(address2.replace(/\+/g, " "));

        map = new VEMap('myMap');
        map.LoadMap();
        if (print == 0) {
            document.getElementById("addr2").value = address2;
        }
        else {
            address1 = arrQrStr["address1"];
            address1 = unescape(address1.replace(/\+/g, " "));

            document.getElementById("addr2").value = address2;
            document.getElementById("addr1").value = address1;
            if ((address1.length > 0) && (address2.length > 0)) {
                GetMap();
            }
        }
}


var map = null;
function GetMap() {
   var options = new VERouteOptions();
   options.RouteCallback = onGotRoute;
    var addrString = "from: " + document.getElementById("addr1").value + " to: " + document.getElementById("addr2").value;
    map.GetDirections([document.getElementById("addr1").value, document.getElementById("addr1").value, document.getElementById("addr2").value], options);
}



function onGotRoute(route) {           // Unroll route           
    var legs = route.RouteLegs;
    var turns = "<table cellpadding='2' class='brownclass' width='100%'><tr><td colspan='2'><strong>Total distance: " + route.Distance.toFixed(1) + " mi\n </strong></td></tr>";
    var numTurns = 0; var leg = null;
    // Get intermediate legs           
    for (var i = 0; i < legs.length; i++) {
        // Get this leg so we don't have to derefernce multiple times              
        leg = legs[i];  // Leg is a VERouteLeg object                                
        // Unroll each intermediate leg              
        var turn = null;
        // The itinerary leg                                 
        for (var j = 0; j < leg.Itinerary.Items.length; j++) {
            turn = leg.Itinerary.Items[j];
            // turn is a VERouteItineraryItem object                 
            numTurns++;
            turns += "<tr><td>" + numTurns + "</td><td>" + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)\n </td></tr>";

        }
        
      
    }
    turns += "</table>";
  
    var divtag = document.getElementById('directions1');
    divtag.innerHTML = turns;
   

}

function refreshMap() {
    map = new VEMap('myMap');
    map.LoadMap();
    document.getElementById("addr1").value = '';
    document.getElementById("addr2").value = '';
    var divtag = document.getElementById('directions1');
    divtag.innerHTML = '';
}