function loadChoices(fromId, toId) {
    var fromVal = $(fromId).val();
    $(toId).load('/sub_dept_select/' + fromVal + '/', {},
            function() {
                // show if anything was loaded 
                if($(toId).children().length > 1) { 
                    $(toId+'whole').show();
                }
            });
}

function loadChoicesRadio(toId) {
    var fromVal = $("input[name=dept1]:checked").val();
    $(toId).load('/sub_dept_select/' + fromVal + '/');
    $(toId+'whole').show();
}

function setDepartment(dept) {
    var deptname;

    // set the proper box
    var inputs = $('input[name=dept1]');
    for(var i=0; i < inputs.length; ++i) {
        if(inputs[i].value == dept) {
            inputs[i].checked = 'checked';
            deptname = inputs[i].parentNode.childNodes[1];
        }
    }

    // show departments div and populate 2nd box
    $('#departments').show();
    loadChoicesRadio('#dept2');

    $('.dept1opt').hide();
    $('#dept1static').html(deptname.data + '&nbsp(<a id="showdept1opts">change</a>)').show();
    $('#showdept1opts').click(function() {
        $('#dept1static').hide();
        $('.dept1opt').show();
    });
}

$(function() {
    $('input[name=dept1]').change(function() { $('#departments').show(); loadChoicesRadio('#dept2') } );
    $('#dept2').change(function() { loadChoices('#dept2', '#dept3') } );
    $('#dept3').change(function() { loadChoices('#dept3', '#dept4') } );
    $('#departments, #dept2whole, #dept3whole, #dept4whole').hide();
});