var CountryUI = {
    ctlCountry: '',
    ctlState: '',
    ctlCity: '',
    serviceUrl: '',
    
    onCountryChange: function()
    {
        if(CountryUI.ctlState != '')
        {
            $U.clearOptions(CountryUI.ctlState);
            $U.addOption(CountryUI.ctlState, 'Loading...', '');
            $U.disabled(CountryUI.ctlState, true);
            
            $.post(CountryUI.serviceUrl + '/states', 
                {'country' : $('#' + CountryUI.ctlCountry).val()},
                function(response)
                {
                    $U.clearOptions(CountryUI.ctlState);
                    $U.addOption(CountryUI.ctlState, '- Select -', '');
                    $U.disabled(CountryUI.ctlState, false);
                    
                    if(response != null && response.length > 0)
                    {
                        for(var i = 0; i < response.length; i++)
                        {
                            $U.addOption(CountryUI.ctlState, response[i].Name, response[i].Name);
                        }
                    }
                    else
                    {
                        $('#'+CountryUI.ctlState).attr('type','text');
                    }
                },'json');
        }
    },
    
    onStateChange: function()
    {
        if(CountryUI.ctlCity != '')
        {
            
        }
    },
    
    init: function(serviceUrl, ctlCountry, ctlState, ctlCity)
    {
        CountryUI.serviceUrl = serviceUrl;
        CountryUI.ctlCountry = ctlCountry;
        CountryUI.ctlState = ctlState;
        CountryUI.ctlCity = ctlCity;
        
        $('#' + CountryUI.ctlCountry).bind('change', CountryUI.onCountryChange);
        $('#' + CountryUI.ctlState).bind('change', CountryUI.onStateChange);
        
    }
}