jQuery(document).ready(function($) {

    // Vars
    var post_type = pa_vars.pa_type;
    var selector_country = '';
    var selector_area = '';

    /**
     * Define selectors for all 3 post types, ID's of Select Country and Select Area select menu
     *
     * I have 3 different post types, with different ID's of select tag so I need to do this to append options to
     * corrett one
     */
    if( post_type == 'reserves' ) {
        selector_area = 'acf-field-reserve_area';
        selector_country = 'acf-field-reserve_country';
    }
    else if( post_type == 'hotspots' ) {
        selector_area = 'acf-field-hotspot_area';
        selector_country = 'acf-field-hotspot_country';
    }
    else if( post_type == 'ait-dir-item' ) {
        selector_area = 'acf-field-lodge_area';
        selector_city = 'acf-field-lodge_nearest_major_city';
        selector_country = 'acf-field-lodge_country';
    }

    else if( post_type == 'drongo' ) {
        selector_area = 'safari_area';
        selector_city = 'nearest_major_city';
        selector_country = 'select_country';
    }

    $( '#' + selector_area ).attr( 'disabled', 'disabled' );


    /**
     * Get country options
     * On change of 'select country' get country selected
     */
    $( '#' + selector_country ).change(function () {

        var selected_country = '';

        if( post_type == 'drongo' ) {
            ajaxurl = pa_vars.ajaxurl;
            $( '#' + selector_city ).attr( 'disabled', 'disabled' );
            $( '#' + selector_city ).html( $('<option></option>').val('0').html('Please select one of the following') );
        }

        $( '#' + selector_country + ' option:selected' ).each(function() {
            selected_country += $( this ).text() + '';
        });


        // Get data based on selected country
        data = {
            action: 'pa_add_areas',
            pa_nonce: pa_vars.pa_nonce,
            country: selected_country,
        };

        var selected_area = $( '#' + selector_area + ' option:selected').val();
        var selected_city = $( '#' + selector_city + ' option:selected').val();

        alert( selected_area );

        $.post( ajaxurl, data, function(response) {

            if(response){
                var areas = response['area'];
                var cities = response['city'];

                if( post_type == 'drongo' || post_type == 'ait-dir-item') {

                    $( '#' + selector_city ).html( $('<option></option>').val('0').html('Please select one of the following').attr('disabled','disabled') );

                    $.each(cities, function(val, text) {
                        $( '#' + selector_city ).append( $('<option></option>').val(text).html(text) )
                    });

                    $( '#' + selector_city + ' option[value="' + selected_city +'"]').attr('selected','selected');
                };

                //$( '#' + selector_area ).html( $('<option></option>').val('0').html('Please select one of the following').attr('disabled','disabled') );
                $.each(areas, function(val, text) {
                    $( '#' + selector_area ).append( $('<option></option>').val(text).html(text) )
                });


                $( '#' + selector_area ).removeAttr( 'disabled' );
                //$( '#' + selector_area + ' option[value="' + selected_area +'"]').attr('selected','selected');

                if ( post_type == 'drongo' ) {
                    $( '#' + selector_city ).removeAttr( 'disabled' );
                };
            };
        });

        return false;
    }).change();
});