$(document).ready(function(){
  
  var container = $("#popupContactsWrapper");
    
  $(".city").click(function() {
        
        var itemOffset = $(this).offset(),
				containerOffset = container.offset(),
        popup = $("#popup-" + $(this).attr("id"));
               
        $(".popup").hide(300);                       
        $(".city").css("borderBottomWidth", "1px");                                       
        if (popup.css("display") == "block") {
            popup.hide(300);
        }        
        else {
            var left = itemOffset.left - containerOffset.left + 75 + ($(this).get(0).offsetWidth / 2) - 20,
                top =  itemOffset.top - containerOffset.top + 70;
            popup.css({
									"top" : top + "px",
									"left" : left + "px"									
						});         
            popup.show(300);
            $(this).css("borderBottomWidth", "0");
        }
        
        $(document).one("mousedown", function()
         {
            popup.hide(300);
            $(".city").css("borderBottomWidth", "1px");
         });
         
         popup.mousedown(function(evt)
         {
              evt.stopPropagation();
         });          
    }        
  );        
});