$(document).ready(function()     {

    $('select#province').change(function() {
		$(".ajax_loader").toggle();
		$('select#ampher,select[name=tambon]').attr("disabled","disabled");
        clearAmphersAndTambons();
        $.getJSON('ajax/get_address.php?province='+$(this).val(),function(data) {
            $.each(address_array, function(key, value) {
                $('select#ampher').append('<option value = "'+key+'">'+value.name+'</option>');
            });
			$('select#ampher,select[name=tambon]').attr("disabled","");
			$(".ajax_loader").toggle();
        });
    });

    $('select#ampher').change(function() {
        $('select[name=tambon]').empty();
        // add tambons from address_array
        ampher_id = $(this).val();
        $('select[name=tambon]').append('<option value = "0">--- ALL TAMBONS ---</option>');

        $.each(address_array[ampher_id].tambons, function(key, value) {
            $('select[name=tambon]').append('<option value = "'+key+'">'+value.name+'</option>');
        });
    });
    
    $('select#region').change(function() {
        clearAmphersAndTambons();
        $('select#province').empty();
        // add provinces from region array
        region_id = $(this).val();
        $('select#province').append('<option value = "0">--- ALL PROVINCES ---</option>');
        $.each(region_array[region_id].provinces, function(key, value) {
            $('select#province').append('<option value = "'+key+'">'+value.name+'</option>');
        });
    });
    
    function clearAmphersAndTambons() {
        $('select#ampher,select[name=tambon]').empty();
        // add tambons from address_array
        $('select#ampher').append('<option value = "0">--- ALL AMPHERS ---</option>');
		$('select[name=tambon]').append('<option value = "0">--- ALL TAMBONS ---</option>');
    }

});