﻿var AddressSearch = {
    jsonAddress: null,
    FastPageID: 1,
    AddressPageID: 1,
    jsonFast: null,
    SearchAddress: function (SearchText) {
        _fastResults = false;
        _HideDid = false;
        if (divLeftHidden == true)
            HideShowDivLeft();
        $("#Tags").hide();
        $("#imgLoadAni").show();
        AddressSearch.ClearSearch();
        url = "ashx/pgsearch.ashx?SearchString=" + SearchText;
        $.getJSON(url, function (json) {
            $("#didYouMean").hide();
            $("#didYouMean").hide();
            AddressSearch.jsonAddress = json;
            var AddressHTML = "";
            $("ul.paging2").html("");
            $(".simplePagerNav").html("");
            if (!json.Records) {
                //json = "{\"Rest\":\"" + SearchText + "\"}";
                coord = g_map.getCentre();
                AddressSearch.SearchBusinessData(SearchText, coord.latitude(), coord.longitude());
            }
            else {
                var _i = 0
                for (var _counter = 0; _counter < json.Records.length; _counter++) {
                    AddressHTML += "<li  onmouseover='AddressSearch.ShowAddressOver(" + _i + ");' onmouseout='AddressSearch.ShowAddressBack(" + _i + ");'><a onclick='AddressSearch.ZoomToLocation(" + _counter + ");AddressSearch.SearchBusinessData(\"" + json.Rest + "\"," + json.Records[_counter].Latitude + "," + json.Records[_counter].Longitude + ");'> <img src='images/" + _i + "_green.png' />" + json.Records[_counter].AddressDetails + "</a><br><a style='margin-left:30px;' onclick='DefaultLocation.SaveDefaultLocationLatLng(" + json.Records[_counter].Latitude + "," + json.Records[_counter].Longitude + ");'>Set as default</a>&nbsp;|&nbsp;<a style='cursor:pointer' onclick='directions.AddDirection(" + json.Records[_counter].Latitude + "," + json.Records[_counter].Longitude + ",\"" + json.Records[_counter].AddressDetails + "\");'>Get Directions</a></li>"
                    _i++
                    if (_i == 5)
                        _i = 0;
                    if (json.Records.length > 1) {
                        $("#DidExpander").show();
                        $("#didYouMean").show();
                    }
                }
                $("ul.paging2").html(AddressHTML);

                AddressSearch.ZoomToLocation(0);

                if (json.Rest != "") {
                    ShowResults = true;
                    ShowAddressResults();
                    try {
                        AddressSearch.SearchBusinessData(json.Rest, json.Records[0].Latitude, json.Records[0].Longitude);
                    }
                    catch (err) {
                        Coord = g_map.getCentre();
                        AddressSearch.SearchBusinessData(SearchText, Coord.latitude(), Coord.longitude());
                    }
                }
                else {
                    if (!json.Records) {
                        $("#didYouMean").hide();
                    }
                    if (json.Rest == "" && !json.Records) {
                        $("ul.paging3").html("No results found");
			if($("#txtSearch").val() == "What, Where eg.Plumber, Bruma or Address eg. 24 South Boulevard Bruma" || $("#txtSearch").val() == ""){
				$("ul.paging3").html("Please enter a search phrase");
			}
                        $("#didYouMean").hide();
                        $(".simplePagerNav").html("");
                    }
                    else {
                        if (json.Records.length == 1) {
                            _HideDid = true;
                            $("#didYouMean").hide();
                        }
                        ShowResults = false;
                        ShowAddressResults();
                        AddressSearch.DrawAddressPoints(1);

                        $("ul.paging2").quickPager({ pagerLocation: "before", pageSize: "5", clickFunction: function (id) {
                            AddressSearch.DrawAddressPoints(id);

                        }

                        });
                    }
                }

            }
            $("#imgLoadAni").hide();

            AddMargin = $("#addressResults").height() - 172 - $("ul.paging2").height() + 200;
            //$("#BannerAdverts").css("margin-top", AddMargin + "px");
            $("#_message").html("Search Results");
        });
    },
    searchBusPop: function () {

        coord = g_map.getCentre();
        AddressSearch.SearchBusinessData($("#txtSearch").val(), coord.latitude(), coord.longitude());

    },
    searchBus: function () {
        if (!directions.ShowDirections) {
            if (AddressSearch.jsonAddress.Rest != "" && AddressSearch.jsonAddress.Records) {
                coord = g_map.getCentre();
                AddressSearch.SearchBusinessData(AddressSearch.jsonAddress.Rest, coord.latitude(), coord.longitude());
            }
            else if (!AddressSearch.jsonAddress.Records) {
                coord = g_map.getCentre();
                AddressSearch.SearchBusinessData($("#txtSearch").val(), coord.latitude(), coord.longitude());
            }
        }
    },
    SearchBusinessData: function (SearchString, lat, lon) {
        if (SearchString != "") {
            var p_scale = g_map.getZoomLevel();
            if (p_scale < 13) {
                url = "ashx/FastSearchAll.ashx?SearchString=" + SearchString + "&lat=" + lat + "&lon=" + lon + "&rnd=" + Math.random();
            }
            else {
                url = "ashx/FastSearch.ashx?SearchString=" + SearchString + "&lat=" + lat + "&lon=" + lon + "&rnd=" + Math.random();
            }
            $.getJSON(url, function (json) {
                var _cnt = 0;
                if (json == null || json.merchants.length == 0) {
                    $("ul.paging3").html("No results found");
		    if($("#txtSearch").val() == "What, Where eg.Plumber, Bruma or Address eg. 24 South Boulevard Bruma" || $("#txtSearch").val() == ""){
				$("ul.paging3").html("Please enter a search phrase");
			}
                    $(".simplePagerNav").html("");
                }
                for (x in json.merchants) {
                    _cnt++;
                }
                if (_cnt == 0 && !AddressSearch.jsonAddress.Records) {
                    $("ul.paging3").html("No results found");
		    if($("#txtSearch").val() == "What, Where eg.Plumber, Bruma or Address eg. 24 South Boulevard Bruma" || $("#txtSearch").val() == ""){
				$("ul.paging3").html("Please enter a search phrase");
			}
                    $(".simplePagerNav").html("");
                }
                else {
                    AddressSearch.jsonFast = json;
                    var FastHTML = "";
                    _fastResults = true;
                    $("ul.paging3").html("");
                    $(".simplePagerNav").html("");
                    var _i = 0;
                    for (x in json.merchants) {

                        if (json.merchants[x].merchantLat < 0) {
                            FastHTML += "<li><div style='width:270px;'>";

                            FastHTML += "<table onclick='zoomtoLocationFast(" + json.merchants[x].merchantLat + "," + json.merchants[x].merchantLng + ");AddressSearch.BuildBubbleContentFast(\"" + x + "\"," + json.merchants[x].merchantLat + "," + json.merchants[x].merchantLng + ");' onmouseover='AddressSearch.ShowFastOver(" + _i + ");' onmouseout='AddressSearch.ShowFastBack(" + _i + ");' class='fastResult' >";
                            if (json.merchants[x].merchantLogo != "undefined" && json.merchants[x].merchantLogo != "") {
                                FastHTML += "<tr><td><img src='images/" + _i + "g.png' style='float:left;'/><img src='http://www.yellowpages.co.za/timgs/" + json.merchants[x].merchantLogo + "' style=''/></td></tr>";
                            }
                            else {
                                FastHTML += "<tr><td><img src='images/" + _i + "g.png' /></td</tr>";
                            }
                            FastHTML += "<tr><td><a style='font-size:9pt'>" + json.merchants[x].merchantName + "</a></td></tr>";
                            FastHTML += "<tr><td>" + json.merchants[x].merchantAddress + "</td></tr>";
                            FastHTML += "<tr><td>" + json.merchants[x].merchantCategories + "</td></tr>";
                            FastHTML += "<tr><td><a style='cursor:pointer' onclick='directions.AddDirection(" + json.merchants[x].merchantLat + "," + json.merchants[x].merchantLng + ",\"" + json.merchants[x].merchantName + "\");'>Get Directions</a></td></tr>";
                            FastHTML += "</table>";
                            FastHTML += "</div></li>";
                            _i++;
                            if (_i == 5) {
                                _i = 0;
                            }
                        }
                    }
                }
                $("ul.paging3").html(FastHTML);
                if (FastHTML == "") {
                    $("ul.paging3").html("No results found");
		    if($("#txtSearch").val() == "What, Where eg.Plumber, Bruma or Address eg. 24 South Boulevard Bruma" || $("#txtSearch").val() == ""){
				$("ul.paging3").html("Please enter a search phrase");
			}
                    $(".simplePagerNav").html("");
                }
                $("ul.paging3").quickPager({ pagerLocation: "before", pageSize: "5", clickFunction: function (id) {
                    AddressSearch.DrawFastPoints(id);

                }
                });

                $("ul.paging2").quickPager({ pagerLocation: "before", pageSize: "5", clickFunction: function (id) {

                }
                });
                $("#FastResults").show();
                if (_cnt == 0 && !AddressSearch.jsonAddress.Records) {
                    $("ul.paging3").html("No results found");
		    if($("#txtSearch").val() == "What, Where eg.Plumber, Bruma or Address eg. 24 South Boulevard Bruma" || $("#txtSearch").val() == ""){
				$("ul.paging3").html("Please enter a search phrase");
			}
                    $(".simplePagerNav").html("");
                }
                else {
                    AddressSearch.DrawFastPoints(1);
                }
                AddMargin = $("#FastResults").height() - 172 - $("ul.paging3").height() + 250;

            });
        }
    },
    ZoomToLocation: function (id) {

        json = AddressSearch.jsonAddress
        if (json.Records != "") {
            var newCoord = new AGCoord(parseFloat(json.Records[id].Latitude), parseFloat(json.Records[id].Longitude));
            if (json.Rest != "" && id > 0) {
                AddressSearch.SearchBusinessData(json.Rest, json.Records[id].Latitude, json.Records[id].Longitude);
            }
            g_map.centreAndScale(newCoord, 15);
        }
        else {

        }
    },
    DrawFastPoints: function (id) {
        RemoveBubble();
        AddressSearch.FastPageID = id;
        var max = (id * 5) - 1;
        var min = max - 4;
        var _i = 0;
        var _ii = 0
        g_map.removeGroupOverlay("Flags");
        for (x in AddressSearch.jsonFast.merchants) {

            if (_i >= min && _i <= max) {

                _image = "images/" + _ii + "g.png";
                var _iconAnchor = new AGPoint(-15, -39);
                var myHTMLObj = new Image();
                myHTMLObj.setAttribute("id", "Fast" + _ii);
                myHTMLObj.style.zIndex = 1;
                myHTMLObj.setAttribute("src", _image);
                myHTMLObj.setAttribute("title", x);

                var objectSize = new AGSize(30, 39);
                var opts = new AGHTMLOverlayOptions(_iconAnchor, objectSize, false);

                var newCoord = new AGCoord(parseFloat(AddressSearch.jsonFast.merchants[x].merchantLat), parseFloat(AddressSearch.jsonFast.merchants[x].merchantLng))
                var htmlOverlay = new AGHTMLOverlay(myHTMLObj, newCoord, opts);
                g_map.addOverlay(htmlOverlay, "Flags");

                // register mouse event
                AGEvent.addListener(htmlOverlay, "onclick", AddressSearch.HTMLFastOverlayclick);
                AGEvent.addListener(htmlOverlay, "onmouseover", AddressSearch.HTMLFastOverlayMouseOver);
                AGEvent.addListener(htmlOverlay, "onmouseout", AddressSearch.HTMLFastOverlayMouseOut);
                _ii++;
            }
            _i++;
        }


    },
    DrawAddressPoints: function (id) {
        RemoveBubble();
        AddressSearch.AddressPageID = id;
        var max = (id * 5) - 1;
        var min = max - 4;
        var _i = 0;
        var _ii = 0
        g_map.removeGroupOverlay("AddressFlags");
        for (x in AddressSearch.jsonAddress.Records) {

            if (_i >= min && _i <= max) {
                _image = "images/" + _ii + "_green.png";
                var _iconAnchor = new AGPoint(-15, -39);
                var myHTMLObj = new Image();
                myHTMLObj.setAttribute("id", "Fast" + _ii);
                myHTMLObj.style.zIndex = 1;
                myHTMLObj.setAttribute("src", _image);
                myHTMLObj.setAttribute("title", x);
                var objectSize = new AGSize(30, 39);
                var opts = new AGHTMLOverlayOptions(_iconAnchor, objectSize);

                var newCoord = new AGCoord(parseFloat(AddressSearch.jsonAddress.Records[x].Latitude), parseFloat(AddressSearch.jsonAddress.Records[x].Longitude))
                var htmlOverlay = new AGHTMLOverlay(myHTMLObj, newCoord, opts);
                g_map.addOverlay(htmlOverlay, "AddressFlags");

                // register mouse event
                AGEvent.addListener(htmlOverlay, "onclick", AddressSearch.HTMLAddressOverlayclick);
                AGEvent.addListener(htmlOverlay, "onmouseover", AddressSearch.HTMLAddressOverlayMouseOver);
                AGEvent.addListener(htmlOverlay, "onmouseout", AddressSearch.HTMLAddressOverlayMouseOut);

                _ii++;
            }
            _i++;

        }


    },
    DrawAddressPointsAuto: function (lat, lon, desc) {

        g_map.removeGroupOverlay("AddressFlags");

        _image = "images/0_green.png";
        var _iconAnchor = new AGPoint(-15, -39);
        var myHTMLObj = new Image();
        myHTMLObj.setAttribute("id", "Fast0");
        myHTMLObj.style.zIndex = 1;
        myHTMLObj.setAttribute("src", _image);
        myHTMLObj.setAttribute("title", desc);
        var objectSize = new AGSize(30, 39);
        var opts = new AGHTMLOverlayOptions(_iconAnchor, objectSize);

        var newCoord = new AGCoord(parseFloat(lat), parseFloat(lon))
        var htmlOverlay = new AGHTMLOverlay(myHTMLObj, newCoord, opts);
        g_map.addOverlay(htmlOverlay, "AddressFlags");

        // register mouse event
        AGEvent.addListener(htmlOverlay, "onclick", AddressSearch.HTMLAutoOverlayClick);
        AGEvent.addListener(htmlOverlay, "onmouseover", AddressSearch.HTMLAddressOverlayMouseOver);
        AGEvent.addListener(htmlOverlay, "onmouseout", AddressSearch.HTMLAddressOverlayMouseOut);

    },
    ClearSearch: function () {
        $("ul.paging3").html();
        $("#FastResults").hide();
        $("ul.paging2").html();
        $("#DidExpander").hide();
    },
    ShowFastOver: function (id) {
        try {
            document.getElementById("Fast" + id).src = "images/" + id + "_red.png";
            $("#Fast" + id).css("z-index", '1000');
        }
        catch (err)
        { }
    },
    ShowFastBack: function (id) {
        try {
            document.getElementById("Fast" + id).src = "images/" + id + "g.png";
            $("#Fast" + id).css("z-index", '2');
        }
        catch (err)
        { }
    },
    ShowAddressOver: function (id) {
        try {
            document.getElementById("Fast" + id).src = "images/" + id + "_blue.png";
            $("#Fast" + id).css("z-index", '1000');
        }
        catch (err)
        { }
    },
    ShowAddressBack: function (id) {
        try {
            document.getElementById("Fast" + id).src = "images/" + id + "_green.png";
            $("#Fast" + id).css("z-index", '2');
        }
        catch (err)
        { }
    },
    HTMLFastOverlayMouseOver: function (oLatLong, caller) {
        var obj = caller.getObject();
        var objId = obj.id;
        id = obj.id.replace("Fast", "");

        obj.setAttribute("src", "images/" + id + "_red.png");

    },
    HTMLFastOverlayMouseOut: function (oLatLong, caller) {
        var obj = caller.getObject();
        id = obj.id.replace("Fast", "");

        var objId = obj.id;
        obj.setAttribute("src", "images/" + id + "g.png");
    },
    HTMLFastOverlayclick: function (oLatLong, caller) {
        var obj = caller.getObject();
        //        id = obj.id.replace("pin", "");
        //        _id = id.substring(1);
        //        var objId = obj.id;
        //        ShowBubblePopup(_id);
        AddressSearch.BuildBubbleContentFast(obj.title, oLatLong.latitude(), oLatLong.longitude());

    },
    HTMLAddressOverlayclick: function (oLatLong, caller) {

        var obj = caller.getObject();
        //        id = obj.id.replace("pin", "");
        //        _id = id.substring(1);
        //        var objId = obj.id;
        //        ShowBubblePopup(_id);

        AddressSearch.BuildBubbleContentAddress(obj.title, oLatLong.latitude(), oLatLong.longitude());

    },
    HTMLAutoOverlayClick: function (oLatLong, caller) {
        var obj = caller.getObject();
        AddressSearch.BuildBubbleContentAuto(obj.title, oLatLong.latitude(), oLatLong.longitude());
    },
    HTMLAddressOverlayMouseOver: function (oLatLong, caller) {
        var obj = caller.getObject();
        var objId = obj.id;
        id = obj.id.replace("Fast", "");

        obj.setAttribute("src", "images/" + id + "_blue.png");

    },
    HTMLAddressOverlayMouseOut: function (oLatLong, caller) {
        var obj = caller.getObject();
        id = obj.id.replace("Fast", "");

        var objId = obj.id;
        obj.setAttribute("src", "images/" + id + "_green.png");
    },
    BuildBubbleContentAddress: function (id, lat, lon) {
        AddHTML = "<div style='width:200px;font-size:8pt;border:0'>";
        AddHTML += "<table>";
        AddHTML += "<tr><td><a style='font-size:11pt'>" + AddressSearch.jsonAddress.Records[id].AddressDetails + "</a></td></tr>";
        AddHTML += "<tr><td><a style='cursor:pointer' onclick='directions.AddDirection(" + AddressSearch.jsonAddress.Records[id].Latitude + "," + AddressSearch.jsonAddress.Records[id].Longitude + ",\"" + AddressSearch.jsonAddress.Records[id].AddressDetails + "\");'>Directions</a></td></tr>";
        AddHTML += "</table>";
        AddHTML += "</div>";
        AddressSearch.DrawBubble(1, 170, 280, 0, 0, lat, lon, g_map, AddHTML);
    },
    BuildBubbleContentAuto: function (desc, lat, lon) {
        AddHTML = "<div style='width:200px;font-size:8pt;border:0'>";
        AddHTML += "<table>";
        AddHTML += "<tr><td><a style='font-size:11pt'>" + desc + "</a></td></tr>";
        AddHTML += "<tr><td><a style='cursor:pointer' onclick='directions.AddDirection(" + lat + "," + lon + ",\"" + desc + "\");'>Directions</a></td></tr>";
        AddHTML += "</table>";
        AddHTML += "</div>";
        AddressSearch.DrawBubble(1, 170, 280, 0, 0, lat, lon, g_map, AddHTML);
    },
    BuildBubbleContentFast: function (id, lat, lng) {
        FastHTML = "<div style='width:270px;font-size:8pt;border:0'>";
        FastHTML += "<table>";
        if (AddressSearch.jsonFast.merchants[id].merchantLogo != "undefined" && AddressSearch.jsonFast.merchants[id].merchantLogo != "") {
            FastHTML += "<tr><td><img src='http://www.yellowpages.co.za/timgs/" + AddressSearch.jsonFast.merchants[id].merchantLogo + "' style=''/></td></tr>";
        }

        FastHTML += "<tr><td><a style='font-size:11pt'>" + AddressSearch.jsonFast.merchants[id].merchantName + "</a></td></tr>";
        if (AddressSearch.jsonFast.merchants[id].merchantAddress != "" && AddressSearch.jsonFast.merchants[id].merchantAddress != "undefined") {
            FastHTML += "<tr><td>" + AddressSearch.jsonFast.merchants[id].merchantAddress + "</td></tr>";
        }
        if (AddressSearch.jsonFast.merchants[id].merchantCategories != "" && AddressSearch.jsonFast.merchants[id].merchantCategories != "undefined") {
            FastHTML += "<tr><td>" + AddressSearch.jsonFast.merchants[id].merchantCategories + "</td></tr>";
        }
        if (AddressSearch.jsonFast.merchants[id].merchantPhone != "" && AddressSearch.jsonFast.merchants[id].merchantPhone != "undefined") {
            FastHTML += "<tr><td>" + AddressSearch.jsonFast.merchants[id].merchantPhone + "</td></tr>";
        }
        if (AddressSearch.jsonFast.merchants[id].merchantMobile != "" && AddressSearch.jsonFast.merchants[id].merchantMobile != "undefined") {
            FastHTML += "<tr><td>" + AddressSearch.jsonFast.merchants[id].merchantMobile + "</td></tr>";
        }


        FastHTML += "<tr><td><a style='cursor:pointer' onclick='directions.AddDirection(" + lat + "," + lng + ",\"" + AddressSearch.jsonFast.merchants[id].merchantName + "\");'>Directions</a></td></tr>";
        FastHTML += "</table>";
        FastHTML += "</div>";
        if (AddressSearch.jsonFast.merchants[id].merchantLogo != "undefined" && AddressSearch.jsonFast.merchants[id].merchantLogo != "") {
            AddressSearch.DrawBubble(1, 340, 385, 0, 23,parseFloat(AddressSearch.jsonFast.merchants[id].merchantLat), parseFloat(AddressSearch.jsonFast.merchants[id].merchantLng), g_map, FastHTML);
        }
        else {
            AddressSearch.DrawBubble(1, 300, 385, 0, 23, parseFloat(AddressSearch.jsonFast.merchants[id].merchantLat), parseFloat(AddressSearch.jsonFast.merchants[id].merchantLng), g_map, FastHTML);
        }
    },
    DrawBubble: function (style, height, width, offsetx, offsety, lat, lon, map, content) {
        openPoint = g_map.getPointFromVisibleArea(new AGCoord(lat, lon));
        var moveAmountx = 0;
        var moveAmounty = 0;
        openPointX = _pageWidth - openPoint.x - width;
        if (openPointX < width) {
            moveAmountx = width - openPointX + 10;

        }
        openPointy = openPoint.y - (height + 58);

        if (openPointy < height + 58) {
            moveAmounty = openPointy - 30;

        }
        if (moveAmounty > 0)
            moveAmounty = 0;
        var oPoint = new AGPoint(moveAmountx * -1, moveAmounty * -1);

        g_map.panBy(oPoint);
        g_map.removeGroupOverlay("BubbleOverLay");
        var _image = "";
        var _color = "";
        var _bordercolor
        var _mozopac = "";
        var _opac = "";

        if (style == 1) //white
        {
            _image = "BubbleSpriteWhite5.png";
            _color = "#FFF";
            _bordercolor = "#A2A2A2";
            _mozopac = "1";
            _opac = "100";
            _closeImage = "cancel.png";

        }
        if (style == 2) {
            _image = "BubbleSpriteBlueTrans.png";
            _color = "#3447FF";
            _bordercolor = "#959595";
            _mozopac = "0.7";
            _opac = "70";
            _closeImage = "cancel.png";
        }
        var topWidth = width - 72;
        var contentWidth = width - 75;
        var contentHeight = height - 70;
        var bottomwidth = width - 150;
        var shaddowWidth = width - 200;
        var shaddowheight = height - 160;
        Bubble = "<div style='width:" + width + "px; height: 30px;position:relative;z-index:10;'>";
        Bubble += "<div style='float:left;background-image:url(\"images/" + _image + "\");background-repeat:no-repeat; width: 35px; height: 38px;margin-top:-1px;position:relative;z-index:10;'></div>";
        Bubble += "<div style='opacity:" + _mozopac + ";filter:alpha(opacity=" + _opac + ");background-color:" + _color + ";border-top:1px solid " + _bordercolor + ";float:left; width:" + topWidth + "px; height: 36px;position:relative;z-index:10;'></div>";
        Bubble += "<div style='width: 35px; height: 37px; float: left; background-image: url(\"images/" + _image + "\"); background-repeat: no-repeat; background-position:-122px -1px; top: 0px; z-index: 10; opacity: 1;position:relative;z-index:10;'><img id='imgRemButton' src='images/" + _closeImage + "' style='float:left;margin-left:2px;margin-top:15px;position:relative;z-index:10;' onclick='AddressSearch.RemoveBubble()' /></div>";
        Bubble += "<div style='height:" + contentHeight + "px;opacity:" + _mozopac + ";filter:alpha(opacity=" + _opac + ");background-color:" + _color + ";border-left:1px solid " + _bordercolor + ";float:left;width:35px;margin-left:1px;position:relative;z-index:10;'></div>";
        Bubble += "<div style='height:" + contentHeight + "px;opacity:" + _mozopac + ";filter:alpha(opacity=" + _opac + ");background-color:" + _color + ";float:left;width:" + contentWidth + "px;overflow:auto;position:relative;z-index:10;' id='Info'>";
        Bubble += content;
        Bubble += "</div>";
        Bubble += "<div style='height:" + contentHeight + "px;opacity:" + _mozopac + ";filter:alpha(opacity=" + _opac + ");background-color:" + _color + ";border-right:1px solid " + _bordercolor + ";float:left;width:35px;position:relative;z-index:10;'></div>";
        Bubble += "<div style='float:left;opacity:" + _mozopac + ";filter:alpha(opacity=" + _opac + ");background-color:" + _color + ";border-left:1px solid " + _bordercolor + "; width: 35px; height: 35px;margin-left:1px;position:relative;z-index:10;'></div>";
        Bubble += "<div style='opacity:" + _mozopac + ";filter:alpha(opacity=" + _opac + ");background-color:" + _color + ";float:left;width:" + contentWidth + "px; height: 37px;position:relative;z-index:10;'></div>";
        Bubble += " <div style='width: 36px; height: 37px; float: left; background-image: url(\"images/" + _image + "\"); background-repeat: no-repeat; background-position:-121px -119px;position:relative;z-index:10;'></div>";
        Bubble += "<div style='float:left;background-image:url(\"images/" + _image + "\");background-repeat:no-repeat; width: 112px; height: 55px;margin-top:-3px;background-position:-0px -161px;position:relative;z-index:10;'></div>";
        Bubble += "<div style='float:left;width:" + bottomwidth + "px;border-top:1px solid " + _bordercolor + ";margin-top:-1px;position:relative;z-index:10;'></div>";
        Bubble += "<img src='Images/shadow.png' style='width:" + (width * 1.5) + "px; height:" + (height * 0.7) + ";float:left;margin-top:-" + (height * 0.7) + "px;z-index:1;position:relative; top: 0px; left: 0px;margin-left:10px;'/></div>";
        Bubble += "</div>";
        _x = -18 + offsetx;
        _y = height + 68 + offsety;
        var _iconAnchor = new AGPoint(_x, -1 * (_y));
        var _size = new AGSize(width, height);
        //            var _size = new AGSize(width, 25);
        var myHTMLObj = document.createElement('div');
        myHTMLObj.style.zIndex = 99999999;
        myHTMLObj.innerHTML = Bubble;
        var _options = new AGCustomOverlayOptions(_iconAnchor, _size);
        var myHTMLOverlay = new AGCustomOverlay(myHTMLObj, new AGCoord(lat, lon), _options);
        map.addOverlay(myHTMLOverlay, "BubbleOverLay");


    },

    RemoveBubble: function () {
        g_map.removeGroupOverlay("BubbleOverLay");
    }
};
