<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Group Render Tests</h1>
    <table>
        <tbody>
        <tr>
            <td>
                A group object can be used to collect shapes. In this example,
                There is a group that contains an elipse and two lines as children.
                Changing the group position also change the position of all contained
                elements.
            </td>
            <td>
                <div id="groupBasicContainer" />
            </td>

        </tr>

        <!-- ************************************************************************** -->
        <tr>
            <td>
                Following the bubbling event pattern, all the events over a shape are propageted to its
                parent. In this example, both elipse objects are child of a group element and click event listeners
                have been added to the elipse and the group.
            </td>
            <td>
                <div id="groupEventsContainer" />
            </td>

        </tr>
        <!-- ************************************************************************** -->
        <tr>
            <td>
                Groups can be nested as a regular shape. An important property of the groups is the ability
                to define their own coordSize, coorOrigin and size. In this example, both shapes have been
                created with the same properties. The red one has been added as a child element of a group with the
                following properties:<br />
                <br />
                Size(50,50);<br />
                Position(25,25);<br />
                CoordSize(100,100);<br />
                CoordOrigin(0,0)<br />

                The blue one has been added as a child of another group with the following properties::<br />
                <br />
                Size(50,50);<br />
                Position(25,25);<br />
                CoordSize(100,100);<br />
                CoordOrigin(0,0);<br />
                <br />
                Finally, the second group has been added as a child of the first declared group.
            </td>
            <td>
                <div id="groupNestedContainer" />
            </td>
        </tr>


        <!-- ************************************************************************** -->
        <tr>
            <td>
                Group coordsize defines how many units there are along the width of the containing block.
                In all the examples, the coordsize of the workspaces have been set to (100,100) and the circles have
                been
                positioned
                at (0,0),(0,100),(100,0),(100,100)(50,50).<br />
                <br />
                1) Group with CoordSize(100,100)<br />
                2) Group with CoordSize(100,200)<br />
                3) Group with CoordSize(200,100)<br />
            </td>
            <td>
                <div style="position:relative;width:100%;">
                    <div id="coordsizeExample100x100" style="float:left;margin:20px;">
                        (1)
                    </div>

                    <div id="coordsizeExample100x200" style="float:left;margin:20px;">
                        (2)
                    </div>

                    <div id="coordsizeExample200x100" style="float:left;margin:20px;">
                        (3)
                    </div>
                </div>
            </td>
        </tr>

        <!-- ************************************************************************** -->
        <tr>
            <td>
                Group coordorigin defines the coordinate at the top left corner of the containing block.
                In all the examples,the coordsize of the groups have been set to (100,100) and the circles have been
                positioned
                at (0,0),(0,100),(100,0),(100,100)(50,50). <br />
                <br />
                1) Group with CoordOrigin(0,0)<br />
                2) Group with CoordOrigin(0,50)<br />
                3) Group with CoordOrigin(50,0)<br />
            </td>
            <td>
                <div style="position:relative;width:100%;">
                    <div id="coordOriginExample0x0" style="float:left;margin:20px;">
                        (1)
                    </div>

                    <div id="coordOriginExample0x50" style="float:left;margin:20px;">
                        (2)
                    </div>

                    <div id="coordOriginExample50x0" style="float:left;margin:20px;">
                        (3)
                    </div>
                </div>
            </td>
        </tr>

        <script type="text/javascript">

        </script>

        <!-- ************************************************************************** -->
        <tr>
            <td>
                Visibility can be used to hide an element and disable all the element events.
                In the case of a group, this property is applied to all the children elements.
            </td>
            <td>
                <div id="visibilityExample" style="float:left;margin:20px;"></div>
            </td>
        </tr>

        <!-- ************************************************************************** -->
        <tr>
            <td>
                Scale.
            </td>
            <td>
                <div id="scaleStrokeExample" style="float:left;margin:20px;"></div>
            </td>
        </tr>
        </tbody>
    </table>
</body>

</html>