function swapBanner() {
  $("#city_image").hideBanner();
}

function showBanner(id){
  clearInterval(rotate);
  current = id-1;
  if(current<0)
    current = banners.length;
  $("#city_image").showBanner();
}

jQuery.fn.showBanner = function() {
  $("#cities li.selected img").css("border", "1px solid #000");
  $("#cities li.selected").attr("class", "");
  current++;
  if(current>=banners.length)
    current=0;
  $(this).css("background", "url("+ banners[current] +")");
  $(".city_info h3").text(locations[current]);
  $(".city_info p").html(dates[current]);
  $("#cities li:eq("+current+") img").css("border", "1px solid #fff");
  $("#cities li:eq("+current+")").attr("class", "selected");
  
  $(this).animate({
    "opacity": "1"
  }, 500);
};

jQuery.fn.hideBanner = function() {
  $(this).animate({
    "opacity": "0"
  }, 500, function(){$(this).showBanner();});
};

jQuery.fn.prepareBanners = function() {
  return this.each(function(){
    $(this).wrap('<div style="background: #000;"></div>');
    $("#cities li:first img").css("border", "1px solid #fff");
    $("#cities li:first").attr("class", "selected");
    
    $('#cities li').hover(function(){
      $(this).find("img").css("border", "1px solid #007ea1");
    }, function(){
      $(this).find("img").css("border", "1px solid #000");
      $("#cities .selected img").css("border", "1px solid #fff");
    });
    
    $('#cities li img').click(function(){
      showBanner($(this).attr("id"));
    });
    
    rotate = setInterval("swapBanner()", 5000);
  });
};