jquery ui dialog问题

想做一个城市对话框
代码如下：    $(function(){
      var nCity = [];
    nCity.push(['直辖市',['北京','上海','天津','重庆']]);
    nCity.push(['河北',['石家庄','廊坊','保定','唐山','秦皇岛']]);
    nCity.push(['山西',['太原','运城','大同','临汾']]);
    ......
    
    
    
    function Dialog()
    {
      this.showCity = function() 
      {
        if($('#cityDialog').is('div')) {
          $("#cityDialog").dialog('open');
        }
        else {
          $('#wrap').after('<div id="cityDialog" ></div>');
          var html = new Array();
          html.push('<div class="dCityList">');
          for(var i=0;i<nCity.length;i++){
            html.push('<h5>',nCity[i][0],'</h5>');
                html.push('<ul>');
            for(var j=0;j<nCity[i][1].length;j++){
                html.push('<li>',nCity[i][1][j],'</li>');
            }
            html.push('</ul>');
            }
          html.push('</div>');
          
          $("#cityDialog").html(html.join(''));
          $(".dCityList li").hover(function(){$(this).addClass('ui-state-highlight')},function(){$(this).removeClass('ui-state-highlight');});
          $(".dCityList li").click(function(){dialog.setVal('#cityInput',$(this).html());$("#cityDialog").dialog('close');});
          $("#cityDialog").dialog({
            resizable: false,
            modal: true,
            width: 630,
            title:'选择城市',
            overlay: {
              backgroundColor: '#000',
              opacity: 0.5
            }
          });
        }
      }
      
      this.setVal = function(elem,val) {
        $(elem).val(val);
        $(elem).removeClass("select");
      };
    }
    
    var dialog = new Dialog();
      
      });
<div id='wrap'>
<input type="text" id="cityInput" onfocus="dialog.showCity;">
</div>
焦点一到对话框，就提示dialog is not defined