<?xml version="1.0" encoding="UTF-8"?>
<document>
    <group list="vertical">
        <module name="ModuleTextArea" width="300" auto_height="true" font_name="textarea2">
            <![CDATA[
               <h1>Module: BEFORE/AFTER VIEWER</h1>
            ]]>
        </module>
        <group list="horizontal">
            <module name="ModuleBeforeAfter" width="370" height="200" draw_border="true">
                    <item path="media/before_after/evil1.jpg"/>
                    <item path="media/before_after/evil2.jpg"/>
                    <item path="media/before_after/evil3.jpg"/>
            </module>
            <module name="ModuleTextArea" width="370" auto_height="true">
                <![CDATA[
                    Easy way to display the before and after states in your projects.<br />
                    The ideal tool for photo manipulators.<br />
                    <br />
                    It supports multiple images in case you have multiple states of the same project. <br />
                    <br />
                    The viewer can also be used with only one image, as simple image navigator, using the zoom and drag tools within.
                ]]>
            </module>
        </group>
        <group list="vertical">
            <module name="ModuleTextArea" font_name="textarea2" width="300" auto_height="true">
                <![CDATA[
                    <h2>USE EXAMPLES:</h2>
                ]]>
            </module>
            <group list="horizontal">
                <group list="vertical">
                    <module name="ModuleBeforeAfter" width="370" height="200">
                            <item path="media/before_after/cats1.jpg"/>
                            <item path="media/before_after/cats2.jpg"/>
                    </module>
                    <module name="ModuleTextArea" width="370" distance="0" auto_height="true">
                        <![CDATA[
                            Two images.
                        ]]>
                    </module>
                </group>
                <group list="vertical">
                    <module name="ModuleBeforeAfter" width="370" height="200" draw_border="true">
                            <item path="media/before_after/bug1.jpg"/>
                    </module>
                    <module name="ModuleTextArea" width="370" distance="0" auto_height="true">
                        <![CDATA[
                           Only one image. Viewer used only as simple navigator.
                        ]]>
                    </module>
                </group>
            </group>
        </group>
        <module name="ModuleImageList" width="760" height="139">
                <item path="media/template/xml_structure_ba_viewer.png"/>
        </module>
    </group>
</document>
