function formatnumcomma(amount) {
    var delimiter = ","; // replace comma if desired
    var a = [amount];
    var d = "";
    if (amount.toString().indexOf(".") != -1) {
        a = amount.split('.', 2)
        d = a[1];
    }
    var i = parseInt(a[0]);
    if (isNaN(i)) { return ''; }
    var minus = '';
    if (i < 0) { minus = '-'; }
    i = Math.abs(i);
    var n = new String(i);
    var a = [];
    while (n.length > 3) {
        var nn = n.substr(n.length - 3);
        a.unshift(nn);
        n = n.substr(0, n.length - 3);
    }
    if (n.length > 0) { a.unshift(n); }
    n = a.join(delimiter);
    if (typeof d == "undefined" || d.length < 1) { amount = n; }
    else { amount = n + '.' + d; }
    amount = minus + amount;
    return amount;
}


function GetMetroContent(metroId) {
    //return "Metro content for metro ID=" + metroId;
    var metros = YAHOO.lang.JSON.parse(metroData);
    var result = "<div style=\"text-align:center\">No details available</div>";
    if (metros.length > 0) {
        $.each(metros, function(index) {
            var currentMetro = $(this)[0];
            if (currentMetro.MetroAreaKey == metroId) {
                var link = currentMetro.Url;
                if (link == "") {
                    var str = "";
                    link = manualLinkPrefix.replace("/" + shortcutPrePath + "/", "/") + "MetroArea.aspx?MetroID=" + currentMetro.MetroAreaKey;
                }
                else {
                    link = manualLinkPrefix + link;
                }
                result = "<div style=\"text-align:center;vertical-align:middle;\">";
                result += "<div style=\"font-weight:bold;font-size:14px;\">" + currentMetro.MetroName + "</div>";
                if (currentMetro.MinPrice != 0) {
                    var strPrice = "$" + formatnumcomma(currentMetro.MinPrice);
                    result += "<div style=\"font-size:11px;padding-top:5px;\">" + bubbleTextPriceFrom + "</div>";
                    result += "<div style=\"font-size:11px;\">" + strPrice + "</div>";
                }
                result += "<div style=\"font-size:10px;color:#EE2E24;\">" + bubbleTextViewCommunities + "</div>";
                //result += "<div style=\"font-size:10px;\"><a style=\"color:#EE2E24;\" href=\"" + link + "\">" + bubbleTextViewCommunities + " " + currentMetro.MetroName + "</a></div>";
                result += "</div>";
            }
        });
    }
    return result;
}

function ddl_OnChange() {
    var url = $("#" + ddl).val();
    var id = url.split(",")[0];
    var url = url.split(",")[1];

    if (id != -1) {

        var link = url;
        if (link == "") {
            var str = "";
            link = manualLinkPrefix.replace("/" + shortcutPrePath + "/", "/") + "MetroArea.aspx?MetroID=" + id;
        }
        else {
            link = manualLinkPrefix + link;
        }
        window.location = link;
    }


}
function InitPage() {

    $("#" + ddl).change(function() {
        ddl_OnChange();
    });
    $("img.mapDot").each(
                function() {

                    var self = this;

                    var metroId = $(this).attr("rel");
                    var metroContent = GetMetroContent(metroId);
                    var pos = $(this).position();
                    //alert("x = " + pos.left + " : y = " + pos.top);
                    var areaX = "R";
                    var areaY = "U";

                    if (pos.left > 200) areaX = "L";
                    if (pos.top < 133) areaY = "L";

                    var area = areaY + areaX;

                    var positions = new Array(
                        {
                            "UpperLeft": { corner: "bottomRight", target: "topRight", tooltip: "rightBottom" },
                            "UpperRight": { corner: "bottomLeft", target: "topRight", tooltip: "leftBottom" },
                            "LowerLeft": { corner: "topRight", target: "topRight", tooltip: "rightTop" },
                            "LowerRight": { corner: "topLeft", target: "topRight", tooltip: "leftTop" }
                        }
                    );
                    var position = eval(positions);

                    switch (area) {
                        case "UL":
                            position = position[0].UpperLeft;
                            break;
                        case "UR":
                            position = position[0].UpperRight;
                            break;
                        case "LL":
                            position = position[0].LowerLeft;
                            break;
                        case "LR":
                            position = position[0].LowerRight;
                            break;
                    }

                    $(self).qtip(
                      {
                          content: {
                              text: metroContent
                          },
                          hide: { when: { event: 'mouseout'} },
                          show: { solo: true,
                              when: { event: 'mouseover' }
                          },
                          style: {
                              width: 180,
                              padding: 0,
                              background: '#FFFFD4',
                              color: '#3E3E3E',
                              border: {
                                  width: 1,
                                  radius: 12,
                                  color: '#FFFFD4'
                              },
                              tip: {
                                  corner: position.corner,
                                  color: '#FFFFD4',
                                  size: { x: 12, y: 40 }
                              },
                              name: 'dark'
                          },
                          position: {
                              corner: {
                                  target: position.target,
                                  tooltip: position.tooltip
                              },
                              adjust: {
                                  x: -6, y: 6
                              }
                          }
                      });
                });
}