@{
    Layout = null;
}
<div>
    <input id="rootDirInput" type="text" style="width: 400px" />
    <button id="saveDir">
        Add</button>
</div>
<div id="rootDirs">
    @{Html.RenderAction("RootList");}
</div>
@(Html.Telerik().ScriptRegistrar().DefaultGroup(c => c.Add("http://ajax.googleapis.com/ajax/libs/yui/3.3.0/build/yui/yui-min.js")
                                                                                          .Add("AutoComplete.js")
                                                                 ).OnDocumentReady("bindFolderAutoComplete('#rootDirInput')"))

@(Html.Telerik().ScriptRegistrar().OnDocumentReady("onRootReady()"))

<script type="text/javascript">


    function onRootReady() {

        $('#rootDirInput').watermark('Start typing to add new root folder...');

        $('#rootDirs .actionButton img').live('click',
            function (image) {
                var path = $(image.srcElement).attr('id');
                $.post('@Url.Action("DeleteRootDir", "AddSeries")', { Path: path }, function () {
                    refreshRoot();
                });
            });

        $('#saveDir').click(saveRootDir);

        function saveRootDir() {
            var path = $("#rootDirInput").val();
            $.post('@Url.Action("SaveRootDir", "AddSeries")', { Path: path }, function () {
                refreshRoot();
                $("#rootDirInput").val('');
            });

        }


        function refreshRoot() {
            $.get('@Url.Action("RootList", "AddSeries")', function (data) {
                $('#rootDirs').html(data);
            });
        }
    }
    
</script>