AJAX File Browser Toolbar Customization

<style type="text/css">
    .iconBackward,
    .iconForward,
    .iconBookmarkSave,
    .iconBookmarkRemove {
        background-repeat: no-repeat;
        width: 16px;
        height: 16px;
        text-align: center;
        margin-right:0px;
    }
    .iconBackward {background-image: url('/Backward.png');}            
    .iconForward {background-image: url('/Forward.png');}
    .iconBookmarkSave {background-image: url('/BookmarkSave.png');}
    .iconBookmarkRemove {background-image: url('/BookmarkRemove.png');}
</style> 
<script type="text/javascript">
var settings = {
    Id: 'AjaxFileBrowserContainer',     // ID of the parent control 
    Url: 'http://webdavserver.com',     // WebDAV server
    Style: 'height: 100%; width: 100%',
    FileIconsPath: '/icons/',           // file icons path
    MsOfficeTemplatesPath: 'http://webdavserver.com/MSOfficeTemplates/',
    SelectedFolder: '/Pictures',        // folder to be selected
    PluginsPath: '/plugins/',           // path to Java applet that opens documents directly from server
    Panels: {
        Folders: {
            Show: true
        },
        FilesView: {
            Show: true
        },
        Toolbar: {
            Show: true,
            Order: ['Backward', 'Forward', 'MyButton', 'MyImgButton', 'MyDisabledButton', 'FoldersButton', 'UpButton', 'BookmarksDropdown', 'Bookmark'],
            Items: [
                {
                    Id: 'FoldersButton',
                    Text: 'Show/Hide Folders',
                    Show: false
                },
                {
                    Id: 'UpButton',
                    Show: false
                },
                {
                    Id: 'Backward',
                    Type: 'Button',
                    IconClass: 'iconBackward',
                    Disabled: true,
                    OnClick: backward
                },
                {
                    Id: 'Forward',
                    Type: 'Button',
                    IconClass: 'iconForward',
                    Disabled: true,
                    OnClick: forward
                },
                {
                    Id: 'BookmarksDropdown',
                    InnerHTML: '<select id="bookmarks" onchange="gotoBookmark();" style="font-size: smaller; width: 150px; margin-left:15px" ><option value="">&lt; My custom bookmarks &gt;</option></select>'
                },
                {
                    Id: 'Bookmark',
                    Type: 'Button',
                    IconClass: 'iconBookmarkSave',
                    Text: 'Save Bookmark',
                    OnClick: bookmark
                }
            ]
        },
        AddressBar: {
            Show: false
        },
        UploadPanel: {
            Show: false
        },
        UploadProgressPanel: {
            Show: false
        }
    }
}; 
ajaxFileBrowser = new ITHit.WebDAV.Client.AjaxFileBrowser.Controller(settings);
</script>

For each button you can specify function that will be called when user clicks on a button, CSS class name that will be used to create an image, text on a button and tooltip. You can also specify if the button is enabled or disabled. To manage buttons at runtime you will use the AjaxFileBrowser.GetControl method, passing the Id of the button as a parameter. This call will return a Button object that you will use to further set and get attributes and call methods. In the example below the button with 'Bookmark' Id is disabled and its text and image is being set: