var URLBase = null;
var scrolling = null;
var scrollDirection = null;

$().ready(function() {
  $("#States > ul").hide();
  $("area").bind("click", function() {
    var region = this.getAttribute("alt");
    if ( region ) {
      // if the area below the map can't be seen, auto-scroll the page
      var bottom = $(window).height() + $(window).scrollTop();
      var mapCoords = $("#us").offset();
      if ( mapCoords.top + $("#us").height() > (bottom - 20)) {
        $(window).scrollTop(200);
      }
      var content = $("#States li p:contains(" + region + ")").next().html();
      var old = $("#States ul.picked");
      if ( old.length > 0 ) {
        // if city list is showing, remove it
        $("#CityList").remove();
        $(".statePicked").remove();
        old.hide("slow", function() {
          var me = $(this);
          me.html(content);
          me.show("slow");  
        });
      } else {
        $("#States").prepend("<ul class=\"picked\"></ul>");
        $("#States .picked").bind("click", function(e) {
          $(this).hide("slow");
          var statePicked = $(e.target);
          URLBase = statePicked[0].href;  // this is global
          // get city list
          $.getJSON(statePicked[0].href, function(data, status) {
            var majorCityLine = "<li><a href=\"" +  URLBase + "&City=CityParam\">CityValue</a></li>";
            var allCityLine = "<li><a href=\"" +  URLBase + "&City=CityParam\">CityValue</a></li>";
            var results = "<div id=\"CityList\"><hr /><h6>Major Cities</h6><ul class=\"topCities\">";
            $.each(data.topCities, function(i, city) {
              results += majorCityLine.replace("CityParam", escape(city)).replace("CityValue", city);
            });
            results += "</ul><hr />";
            results += "<h6>All Cities</h6><ul class=\"allCities\">";
            //  <a class=\"Up_Arrow\"></a><a class=\"Down_Arrow\"></a>
            $.each(data.cities, function(i, city) {
              results += allCityLine.replace("CityParam", escape(city[0])).replace("CityValue", city[0]).replace("Communities", city[1]);
            });
            results += "</ul></div>";
            
            $("#States .statePicked img").remove();
            $("#States").append(results);
            $("#States #CityList").hide().show("slow").find(".allCities").jScrollPane(
              { scrollbarWidth: 10, 
                showArrows:true,
                arrowSize: 9,
                scrollbarOnLeft: true
              }
            );
          });

          $(this).hide("slow");
          $("#States").prepend(statePicked.clone().addClass("statePicked").append(" <img src=\"/images/load_32.gif\" class=\"busy\" />"));
          $("#States .statePicked").bind("click", function() {
            // redisplay the list
            $("#CityList").remove();
            $("#States ul.picked").show("slow");
            $(this).remove();
            return false;
          });
          return false;
        }).html(content).show("slow");
      }
    }
  });
});

function scrollList() {
  $(".allCities ul").animate({top: scrollDirection}, 100);
}