function ShowCities(doc, stName)
{
    var rowLength = 5;
    var maxNumCities = 10;
    var states = doc.getElementsByTagName("state");
    for (i = 0; i < states.length; i++)
    {
        if (states[i].getAttribute("name") == stName)
        {          
			var content = '<table id="infoContent"><tr><td><div class ="closeInfoBox" onclick="HideInfo();" onmouseover="style.cursor=' +"'pointer';" +'">[X]</div></td></tr><tr><td style="padding: 5px 0px 0px 0px;">';   
            content+='<div><a class="state" href="' + states[i].getAttribute("url") + '">Buy tickets for events in ' + stName + '</a><div style="float:left;padding-left:20px;max-width:50%;">';

           var cityLength = states[i].childNodes.length;
           var cityCounter = 0;
           var totalCities = 0;

            for (j = 0; j < cityLength; j++)
            {
                if (states[i].childNodes[j].nodeName == "city")
                {
                    content += '<a class="city" href="' + states[i].childNodes[j].getAttribute("url") + '"><span class="anchor">' + states[i].childNodes[j].getAttribute("name") + '</span></a>';
                    cityCounter += 1;
                    totalCities += 1;
                    if(cityCounter >= rowLength && totalCities < maxNumCities)
                    {
                        content += '</div><div style="float:right;padding-right:20px;max-width:50%;">';
                        cityCounter = 0;
                    }
                }

            }
	content+= '</div><div style="clear:both"></div><div  class="moreCities"><a href="' + states[i].getAttribute("url") + '">More Cities...</a></div>';
                content+= '<div  class="moreEvents" ><a href="' + states[i].getAttribute("url") + '">See all events in '+ stName +'</a></div>';
                content+='</td></tr></table>';

            $('#info')
            .css({ 'position': 'absolute', 'display': 'block' })
            .offset({ left: (tempX-3), top: (tempY-3) })
            .html(content)
            //.show();
            return false;
        }
    }
}

function HideInfo()
{
    $('#info').hide();
}

function KeepShowing()
{
    $('#info').show();
}

function getMouseXY(e)
{
    if (IE)
    {
        // grab the x-y pos.s if browser is IE
        tempX = event.clientX + document.documentElement.scrollLeft;
        tempY = event.clientY + document.documentElement.scrollTop;
    }
    else
    {
        // grab the x-y pos.s if browser is NS
        tempX = e.pageX;
        tempY = e.pageY;
    }
    // catch possible negative values in NS4
    if (tempX < 0) { tempX = 0; }
    if (tempY < 0) { tempY = 0; }
    return true;
}

/**
* @author Dan Blaisdell
*/
(function($) {
    $.fn.extend({
        _offset: $.fn.offset,

        offset: function(newOffset) {
            return newOffset ? this.setXY(newOffset) : this._offset();
        },

        setXY: function(newOffset) {
            return this.each(function() {
                var el = this;

                var hide = false;

                if ($(el).css('display') == 'none') {
                    hide = true;
                    $(el).show();
                }

                var style_pos = $(el).css('position');

                // default to relative
                if (style_pos == 'static') {
                    $(el).css('position', 'relative');
                    style_pos = 'relative';
                }

                var offset = $(el).offset();

                if (offset) {
                    var delta = {
                        left: parseInt($(el).css('left'), 10),
                        top: parseInt($(el).css('top'), 10)
                    };

                    // in case of 'auto'
                    if (isNaN(delta.left))
                        delta.left = (style_pos == 'relative') ? 0 : el.offsetLeft;
                    if (isNaN(delta.top))
                        delta.top = (style_pos == 'relative') ? 0 : el.offsetTop;

                    if (newOffset.left || newOffset.left === 0)
                        $(el).css('left', newOffset.left - offset.left + delta.left + 'px');

                    if (newOffset.top || newOffset.top === 0)
                        $(el).css('top', newOffset.top - offset.top + delta.top + 'px');
                }
                if (hide) $(el).hide();
            });
        }
    });
})(jQuery);