var counter = 0;

$(document).ready(function(){
        $("li > span").click(function(){
                var span = $(this);
                var img = $("img#add").copy().attr('src', function() { return this.src.replace("add", "undo"); });

                img.click(function(){
                    var input = $(this).prev();

                    $(this).remove();
                    input.fadeOut("slow", 
                        function() { 
                            span.toggle(); 
                            });
                    
                    input.val(span.text());
                });

                span.toggle();
                $(this).next().fadeIn("slow", function() {$(this).after(img); });
        });

        $("img#add").click(function(){
            var input = $("input#new").copy();
            var img = $(this).copy().attr('src', function() { return this.src.replace("add", "minus"); });
            img.click(function() { $(this).parent().fadeOut("slow", function() { $(this).remove(); }) });

            input.attr('name', function() { return this.name + counter; })
                 .removeAttr('style')
                 .insertBefore($(this).parent())
                 .wrap("<li />");
            
            input.parent().append(img)
                          .hide().fadeIn("slow", function (){ input.focus(); });
            
            counter = counter + 1;
        });
})