var _docViewer;

/**
 * Main function.
 */
function __main() {
    ...

    // create the document viewer settings
    var docViewerSettings = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerSettingsJS("documentViewerContainer");

    // initialize side panel of document viewer
    __initSidePanel(docViewerSettings);

    // create the document viewer
    _docViewer = new Vintasoft.Imaging.DocumentViewer.WebDocumentViewerJS(docViewerSettings);

    ...
}

/**
 Initializes side panel of document viewer.
 @param {object} docViewerSettings Settings of document viewer.
*/
function __initSidePanel(docViewerSettings) {
    // get items of document viewer
    var docViewerItems = docViewerSettings.get_Items();

    var sidePanel = docViewerItems.getItemByRegisteredId("sidePanel");
    if (sidePanel != null) {
        var sidePanelItems = sidePanel.get_PanelsCollection();

        // register the "Simple image processing" panel in web UI elements factory
        Vintasoft.Imaging.DocumentViewer.WebUiElementsFactoryJS.registerElement("simpleImageProcessingPanel", __createSimpleImageProcessingPanel);

        // add the "Simple image processing" panel to the side panel
        sidePanelItems.addItem("simpleImageProcessingPanel");
    }
}

/**
 * Creates UI panel with simple image processing functionality.
 */
function __createSimpleImageProcessingPanel () {
    // create the button that allows to invert image in image viewer
    var invertImageButton = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
        cssClass: "invertImage",
        title: "Invert image",
        localizationId: "invertImageButton",
        css: { "margin-left": "5px" },
        onClick: __invertImageButton_clicked
    });

    // create the button that allows to open/close the simple image processing panel
    var simpleImageProcessingPanelOpenButton = new Vintasoft.Imaging.DocumentViewer.UIElements.WebUiButtonJS({
        cssClass: "simpleImageProcessing",
        title: "Simple image processing",
        localizationId: "simpleImageProcessingPanelButton"
    });

    // create an UI panel, which provides simple image processing functionality
    var panel = new Vintasoft.Imaging.DocumentViewer.Panels.WebUiPanelJS(
        [
            invertImageButton
        ],
        { cssClass: "vsdv-sidePanel-content" }, simpleImageProcessingPanelOpenButton);

    return panel;
}

/**
 * "Invert image" button is clicked.
 */
function __invertImageButton_clicked(event, uiElement) {
    // get document viewer
    _docViewer = uiElement.get_RootControl();
    // get image viewer
    var imageViewer = _docViewer.get_ImageViewer();
    // get focused image in image viewer
    var focusedImage = imageViewer.get_FocusedImage();
    // if focused image exists
    if (focusedImage != null) {
        // create an image processing command
        var invertCommand = new Vintasoft.Imaging.ImageProcessing.WebInvertCommandJS();
        // apply command to the focused image
        invertCommand.execute(focusedImage, __invertCommand_success, __invertCommand_error);
    }
}

/**
 * Image is inverted successfully.
 */
function __invertCommand_success(answer) {
    // get information about processed image
    var fileUrl = answer.imageInfo.fileInfo.id;
    var pageIndex = answer.imageInfo.pageIndex;
    // create new image source and image
    var imageSource = new Vintasoft.Shared.WebImageSourceJS(fileUrl);
    var image = new Vintasoft.Shared.WebImageJS(imageSource, pageIndex);

    // get image viewer
    var imageViewer = _docViewer.get_ImageViewer();
    // get index of focused image in image viewer
    var focusedIndex = imageViewer.get_FocusedIndex();
    // set the processed image as the focused image in image viewer
    imageViewer.get_Images().set(focusedIndex, image);
}

/**
 * Invert command is failed.
 */
function __invertCommand_error(answer) {
    // if answer contains error message
    if (answer.errorMessage)
        // show the error message
        alert(answer.errorMessage);
}