<!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>

    <script type="text/javascript">
        web2d = {
            peer: {}
        };

        web2d.peer =
        {
            svg: {}
        };

        web2d.peer.utils = {};
    </script>

    <script type="text/javascript" src="utils.js"></script>
    <script type="text/javascript">
        function initialize() {
            web2d.Toolkit.init();

            var rectExampleTest = function () {
                var workspace = new web2d.Workspace();
                workspace.setSize("100px", "100px");
                workspace.setCoordSize(100, 100);
                workspace.setCoordOrigin(0, 0);

                var rect = new web2d.Rect();
                rect.setPosition(20, 20);

                workspace.append(rect);
                workspace.addItAsChildTo($('#rectExample'));
            }
            rectExampleTest();

            var roundrectExampleTest = function () {
                function builder(container, x, width, height) {
                    for (var i = 1; i <= 10; i++) {
                        var rect = new web2d.Rect(i / 10);
                        rect.setPosition(x, ((i - 1) * (50 + 5)));
                        rect.setSize(width, height);
                        container.append(rect);
                    }
                }

                // 50 x 50
                var workspace = new web2d.Workspace();
                workspace.setSize("500px", "550px");
                workspace.setCoordOrigin(0, -4);
                workspace.setCoordSize(500, 550);
                workspace.addItAsChildTo($('#roundRect'));

                builder(workspace, 10, 50, 50);

                // 100 x 50
                builder(workspace, 70, 100, 50);

                // 200 x 50
                builder(workspace, 180, 200, 50);

            }
            roundrectExampleTest();
        }
    </script>
</head>

<body onload="initialize();">


<h1>Rect Render Tests </h1>

<table border="1">
    <colgroup style="width:80%;">
        <col style="width:10%"/>
        <col style="width:90%"/>
    </colgroup>
    <tr>
        <td>
            Straight Lines.
        </td>
        <td>
            <div id="rectExample"></div>
        </td>

    </tr>

    <!-- ********************************************************** -->
    <tr>
        <td>
            Straight Lines.
        </td>
        <td>
            <div id="roundRect" style="float:left;margin:10px"></div>
        </td>

    </tr>


</table>
</body>
</html>