var picker_control = null;

$(document).ready(function () {
    $('#show-countries-button').button({
        icons: { primary: 'ui-icon-newwin' },
        text: false
    }).click(function () {
        picker_control = $($(this).attr('href'));
        var dialog = $('#country-picker');
        if (dialog.length == 0) {
            dialog = $('<div id="country-picker" style="z-index: 11; display:hidden; position: absolute; border: 1px solid black; background: white; width: 1050px; height: 600px"></div>').appendTo('body');
            // load remote content
            dialog.load('CountryList.aspx', {},
                function (responseText, textStatus, XMLHttpRequest) {
                    $(".picker-list").menu();
                    $('#go-down').button({
                        icons: { primary: 'ui-icon-circle-arrow-s' },
                        text: false
                    }).click(function () {
                        $('.show-top').hide();
                        $('.show-bottom').show();
                    });
                    $('#close').button({
                        icons: { primary: 'ui-icon-circle-close' },
                        text: false
                    }).click(function () {
                        $('#country-picker').hide();
                        $('#disabledBackgroundContainer').hide();
                    });

                    $('#go-up').button({
                        icons: { primary: 'ui-icon-circle-arrow-n' },
                        text: false
                    }).click(function () {
                        $('.show-bottom').hide();
                        $('.show-top').show();
                    });
                    $('.show-bottom').hide();

                    $('.picker-list a').click(function () {
                        var ddiv = $(this).next('div');
                        if (ddiv.length == 0) {
                            ddiv = $("<div style='display:none; position: absolute; border: 1px solid black; background: white; max-height: 400px; overflow-y: auto'></div>")
                                .appendTo($(this).parent());

                            ddiv.load('CityList.aspx?code=' + $(this).attr('href').substring(1), {},
                            function (responseText, textStatus, XMLHttpRequest) {
                                ddiv.find('.picker-list').menu();
                                ddiv.find('a').click(function () {
                                    if (picker_control == null)
                                        return false;
                                    picker_control.val($(this).attr('href'));
                                    $(this).parents('#pnl').parent().toggle();
                                    $('#country-picker').hide();
                                    $('#disabledBackgroundContainer').hide();
                                    return false;
                                });
                            });
                        }
                        ddiv.toggle();
                        return false;
                    });
                });
        }
        var p = $('html').offset()
        dialog.css({
            top: '50%',
            left: '50%',
            'margin-top': -(p.top + (dialog.height() / 2)),
            'margin-left': -(dialog.width() / 2)
        });
        $('#disabledBackgroundContainer').show();
        dialog.show();
        //prevent the browser to follow the link
        return false;
    });
});