$(document).ready(function() {

var subjects = $('' + 
    '<div id="subjects">' + 
    '   <ul>' +
    '       <li>Careers</li>' +
    '       <li>Marketing and Business Development</li>' +
    '       <li>Product Vendors</li>' +
    '       <li>Public Relations</li>' +
    '       <li>Other</li>' +
    '   </ul>' +
    '</div>'),
    csubject = $('#contact_subject'),
    subject = csubject.val();

csubject.remove();
$('#row_subject').append(subjects);
subjects.hide();

$('#row_subject > div.field')
    .append('<div id="contact_subject">' + subject + '</div><input type="hidden" id="contact_subject_input" name="contact[subject]" value="' + subject + '" />');

$('#row_subject')
    .click(function(evt) {
        $('#subjects').show();
        evt.stopPropagation();
    });

$('#subjects li')
    .click(function(evt) {
        var text = $(this).text();
        $('#contact_subject').text(text);
        $('#contact_subject_input').val(text);
        $('#subjects').hide();
        evt.stopPropagation();
    });

$(document).click(function() {
    $('#subjects').hide();
});

$('#contact .row').click(function() {
    if ($(this).attr('id') !== 'row_subject')
    {
        $('input, textarea', this).focus();
    }
});

});