function AddHTMLPoint(Map,Description,Image,Lat,Lon,ShowInfoDisplay,offsetx,offsety)
{       
      _Map = eval(Map);
      imgObj=document.createElement("div");
      if(ShowInfoDisplay == true)
      {
            imgObj.innerHTML = "<img src ='"+Image+"' onclick='ShowBubble("+Map+","+Lat+","+Lon+",\""+Description+"\")'/>";
      }
      else
      {
            imgObj.innerHTML = "<img src ='"+Image+"'/>";
      }
    if(offsetx = "undefined")
    {
        offsetx = 5;
    }
    if(offsety = "undefined")
    {
        offsety = -32;
    }
      var myHTMLOptions = new AGHTMLOverlayOptions(new AGPoint(offsetx,offsety));
      var myHTMLOverlay = new AGHTMLOverlay(imgObj, new AGCoord(parseFloat(Lat), parseFloat(Lon)), myHTMLOptions);
      _Map.addOverlay(myHTMLOverlay, "All");     
}
function ShowBubblePopup(Map,lat,lon,desc,width,height,offsetx,offsety)
{
    iWidth = width;
    if(width = null || width=="")
        {
            iWidth = 400;
        }
    if(height == null || height =="")
    {
        height = 200;
    }
     if(offsetx == null || offsetx == "")
    {
        offsetx = 5;
    }
    if(offsety == null || offsety == "")
    {
        offsety = -32;
    }
    _Map = eval(Map);
    desc = desc.replace("<div","<div class=\"Bubble\"");
    _coord = new AGCoord(parseFloat(lat),parseFloat(lon));
    _options = new AGInfoDisplayOptions();
    _options.width = parseInt(iWidth);
    _options.height = parseInt(height);
    _options.pixelOffset = new AGPoint(10, -24)
    _Map.openInfoDisplayHTML(_coord,desc,_options);
}
function CenterAndScaleMap(lat,lon)
{
     var oLatLng = new AGCoord(parseFloat(lat),parseFloat(lon));
     g_map.centreAndScale(oLatLng, 16);
     $("#box1").hide();
}
function DisplayToll()
{
  if(document.getElementById("bnToll").innerHTML == "Toll Gates")
    {
        document.getElementById("bnToll").innerHTML = "Toll Gates <img  border='0' src='images/Tick3.gif'/>";
        var oBoundingBox = g_map.getBoundingBox();
        var oSouthWestCoords = oBoundingBox.getSouthWest();
        var oNorthEastCoords = oBoundingBox.getNorthEast();
        var _url = "JSONTollByBB.aspx?latMin="+oSouthWestCoords.latitude();
        _url +="&latMax="+oNorthEastCoords.latitude();
        _url +="&lonMin="+oSouthWestCoords.longitude();
        _url +="&lonMax="+oNorthEastCoords.longitude();
         $.getJSON(_url,
        function(json)
            {
                RecieveToll(json);
            }
        );
        return false;
    }
    else
    {
        document.getElementById("bnToll").innerHTML = "Toll Gates";
        g_map.removeGroupOverlay("Toll");
    }
      
}
function GetTollListner()
{
    if(document.getElementById("bnToll").innerHTML != "Toll Gates")
    {
      var oBoundingBox = g_map.getBoundingBox();
        var oSouthWestCoords = oBoundingBox.getSouthWest();
        var oNorthEastCoords = oBoundingBox.getNorthEast();
        var _url = "JSONTollByBB.aspx?latMin="+oSouthWestCoords.latitude();
        _url +="&latMax="+oNorthEastCoords.latitude();
        _url +="&lonMin="+oSouthWestCoords.longitude();
        _url +="&lonMax="+oNorthEastCoords.longitude();
         $.getJSON(_url,
        function(json)
            {
                RecieveToll(json);
            }
        );
        return false;
    }
}
function RecieveToll(Result)
{

    g_map.removeGroupOverlay("Toll");
    
            for(_icnt = 0;_icnt < Result.Records.length;_icnt++)
            {
                  
                     imgObj=document.createElement("div");
                     var str = "<table><tr><td><img src=images/sanral.jpg /></td><td><img src=images/TollClasses.gif /></td></tr></table>";
                     str += "<Table style=font-family:arial;font-size:7pt;><tr style=background-color:#cccccc;><td style=width:70px;><strong>Toll Gate</strong></td><td style=width:70px;><strong>Class 1</strong></td><td style=width:70px;><strong>Class 2</strong></td><td style=width:70px;><strong>Class 3</strong></td><td style=width:70px;><strong>Class 4</strong></td></tr>";
                     str += "<tr><td>" + Result.Records[_icnt].F_TOLL_PLA + "</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_1).toFixed(2) +"</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_2).toFixed(2) +"</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_3).toFixed(2) +"</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_4).toFixed(2) +"</td></tr>";
                     str += "</table>"
                      imgObj.innerHTML = "<img style='cursor:pointer' src ='images/3D_TollRoad24.png' onclick='ShowBubblePopup(g_map,"+parseFloat(Result.Records[_icnt].LATITUDE)+","+parseFloat(Result.Records[_icnt].LONGITUDE)+",\""+str+"\",400,150,0,0)'/>";
                      //g_map.AddObject(imgObj,parseFloat(sTraffic[5]),parseFloat(sTraffic[6]),-5,-32);
                      var myHTMLOptions = new AGHTMLOverlayOptions(new AGPoint(-3, -24));
                      var myHTMLOverlay = new AGHTMLOverlay(imgObj, new AGCoord(parseFloat(Result.Records[_icnt].LATITUDE), parseFloat(Result.Records[_icnt].LONGITUDE)),myHTMLOptions);
                      g_map.addOverlay(myHTMLOverlay, "Toll");
                  }
                  
}
function RecieveTollLayer(Result)
{
   
           
            g_map.removeGroupOverlay("Toll1");
            for(_icnt = 0;_icnt < Result.Records.length;_icnt++)
            {
                  
                     imgObj=document.createElement("div");

                     var str = "<table><tr><td><img src=images/sanral.jpg /></td><td><img src=images/TollClasses.gif /></td></tr></table>";
                     str += "<Table style=font-family:arial;font-size:7pt;><tr style=background-color:#cccccc;><td style=width:90px;><strong>Toll Gate</strong></td><td style=width:70px;><strong>Class 1</strong></td><td style=width:70px;><strong>Class 2</strong></td><td style=width:70px;><strong>Class 3</strong></td><td style=width:70px;><strong>Class 4</strong></td></tr>";
                     str += "<tr><td>" + Result.Records[_icnt].F_TOLL_PLA + "</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_1).toFixed(2) + "</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_2).toFixed(2) + "</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_3).toFixed(2) + "</td><td style=text-align:right;padding-right:25px>R " + parseFloat(Result.Records[_icnt].CLASS_4).toFixed(2) + "</td></tr>";
                     str += "</table>";
                      imgObj.innerHTML = "<img style='cursor:pointer' src ='images/3D_TollRoad24.png' onclick='ShowBubblePopup(g_map,"+parseFloat(Result.Records[_icnt].LATITUDE)/1000000+","+parseFloat(Result.Records[_icnt].LONGITUDE)/1000000+",\""+str+"\",400,150,0,10)'/>";
                      //g_map.AddObject(imgObj,parseFloat(sTraffic[5]),parseFloat(sTraffic[6]),-5,-32);
                      var myHTMLOptions = new AGHTMLOverlayOptions(new AGPoint(-3,-24));
                      var myHTMLOverlay = new AGHTMLOverlay(imgObj, new AGCoord(parseFloat(Result.Records[_icnt].LATITUDE)/1000000, parseFloat(Result.Records[_icnt].LONGITUDE)/1000000),myHTMLOptions);
                      g_map.addOverlay(myHTMLOverlay, "Toll1");    
            }
        }
        function loadAudioTrex() {
            g_map.clearOverlays();

            $.getJSON("audiotrex/gardenroute/data_json.txt", function(data) {

                if (data.totalResultsCount == 0) {
                    alert("No results found");
                    return;
                }

                //Zoom to Audio Trex
                //var level = g_map.getBoundingBoxZoomLevel(data.bbox);
                g_map.centreAndScale(new AGCoord(-33.999102, 21.4029895), 8);

                for (var i = 0; i < data.audiotrex.length; i++) {
                    var icon = new AGIcon();
                    icon.image = "audiotrex/logo_20_58.png";
                    icon.iconAnchor = new AGPoint(-29, -10);
                    icon.iconSize = new AGSize(58, 20);
                    icon.infoDisplayAnchor = new AGPoint(0, 0);

                    var defaultMarkerOption = new AGMarkerOptions(icon);

                    var atMarker = new AGMarker(new AGCoord(data.audiotrex[i].lat, data.audiotrex[i].lon), defaultMarkerOption);

                    var opts = new AGInfoDisplayOptions(320, 80);
                    var _src = "audiotrex/gardenroute/" + data.audiotrex[i].fname;
                    var _html = "<object width=\"300\" height=\"42\"><param name=\"src\" value=" + _src + "><param name=\"autoplay\" value=\"true\"><param name=\"controller\" value=\"true\"><param name=\"bgcolor\" value=\"#FFFFFF\"><embed src=" + _src + " autostart=\"true\" loop=\"false\" width=\"300\" height=\"42\" controller=\"true\" bgcolor=\"#FFFFFF\"></embed></object>";
                    atMarker.bindInfoDisplayHTML("<b>" + data.audiotrex[i].fname + "</b><br/>" + _html, opts);

                    g_map.addOverlay(atMarker);

                }

            });
        }