Untitled

jQuery(function($) {

    /* Make the form sortable */
    $("form.sortable ul").sortable();

    /* On submit, set the value of the position inputs to the value of their current physical position in the list */
    $('form.sortable').submit(function() {

        $("form.sortable ul li input.position").each(function(index) {
            $(this).val(index);
         });

        return true;
    });


    /* Bind the + behavior */
    $(".add a").click(function() {
        var num = $("form.sortable ul").children().length + 1;
        var newInput = getNewInputHtml(num);

        $("form.sortable ul").append(newInput);

        /* Bind the X behavior to the new input element*/
        bindIconCloseEvent();
        return false;
    });

    /* Bind the X behavior to the original elements*/
    bindIconCloseEvent();

});

function bindIconCloseEvent(){
    $(".ui-icon-close").click(function() {
        $(this).parent().children('input.destroy').val(1);
        $(this).parent().hide("slow");
        return false;
    });
}

function getNewInputHtml(num){
    var newInput = '' +
            '<li class="clearfix">' +
            '<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' +
            '<input class="name" name="workflow[workflow_states_attributes][' + num + '][name]" size="30" type="text" value="" />' +
            '<input class="position"name="workflow[workflow_states_attributes][' + num + '][position]" type="hidden" value="" />' +
            '<input class="destroy" name="workflow[workflow_states_attributes][' + num + '][_destroy]" type="hidden" value="false">' +
            '<span class="ui-icon ui-icon-close"></span>' +
            '</li>';

    return newInput;
}