<!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>
    <style>
        th,
        td {
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        web2d = {
            peer: {}
        };

        web2d.peer =
        {
            svg: {}
        };

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

    <script type="text/javascript">
        function initialize() {
            web2d.Toolkit.init();
            var workspaceAttributes = { width: '700px', height: '100px', coordSize: '350 50', fillColor: '#ffffcc' };
            var strokeWidthWorkspace = new web2d.Workspace(workspaceAttributes);

            var rect = new web2d.Rect();
            rect.setSize(10, 10);
            rect.setStroke(0);
            rect.setPosition(250, 5);
            strokeWidthWorkspace.append(rect);

            for (var i = 0; i <= 10; i++) {
                var line = new web2d.Line();
                line.setFrom(5 + (i * 25), 5);
                line.setTo(5 + (i * 25), 45);
                line.setAttribute('strokeWidth', i + 1);
                strokeWidthWorkspace.append(line);
            }
            strokeWidthWorkspace.append(rect);

            strokeWidthWorkspace.addItAsChildTo($('#strokeWidthSample'));

            var strokeOpacityWorkspace = new web2d.Workspace(workspaceAttributes);
            for (var i = 0; i < 10; i++) {
                var line = new web2d.Line();
                line.setFrom(15 + (i * 25), 5);
                line.setTo(3 + (i * 25), 45);
                line.setAttribute('strokeWidth', 2);
                line.setAttribute('strokeOpacity', 1 / (i + 1));
                line.setAttribute('strokeColor', 'red');
                strokeOpacityWorkspace.append(line);
            }
            strokeOpacityWorkspace.addItAsChildTo($('#strokeOpacitySample'));

            var strokeStyleWorkspace = new web2d.Workspace(workspaceAttributes);
            var styles = ['solid', 'dot', 'dash', 'dashdot', 'longdash'];
            for (var i = 0; i < styles.length; i++) {
                var line = new web2d.Line();
                line.setFrom(25 + (i * 30), 5);
                line.setTo(13 + (i * 30), 45);
                line.setAttribute('strokeWidth', 2);
                line.setAttribute('strokeColor', 'red');
                line.setAttribute('strokeStyle', styles[i]);
                strokeStyleWorkspace.append(line);
            }
            strokeStyleWorkspace.addItAsChildTo($('#strokeStyleSample'));

            var strokeArrowWorkspace = new web2d.Workspace(workspaceAttributes);
            var styles = ['none ', 'block ', 'classic', 'diamond ', 'oval', 'open', 'chevron', 'doublechevron'];
            for (var i = 0; i < styles.length; i++) {
                var line = new web2d.Line();
                line.setFrom(25 + (i * 30), 5);
                line.setTo(13 + (i * 30), 45);
                line.setAttribute('strokeWidth', 2);
                line.setAttribute('strokeColor', 'red');
                line.setArrowStyle(styles[i]);
                strokeArrowWorkspace.append(line);
            }
            strokeArrowWorkspace.addItAsChildTo($('#strokeArrowSample'));
        }
    </script>
</head>

<body onload="initialize();">

    <h1>Lines Render Tests </h1>

    <table>
        <colgroup style="width:80%;">
            <col style="width:30%" />
            <col style="width:60%" />
        </colgroup>
        <tr>
            <td>
                Lines.
            </td>
            <td>
                <div id="strokeWidthSample" />
            </td>

        </tr>

        <tr>
            <td>
                Lines Opacity.
            </td>
            <td>
                <div id="strokeOpacitySample" />
            </td>

        </tr>

        <tr>
            <td>
                Line Styles.
            </td>
            <td>
                <div id="strokeStyleSample" />
            </td>

        </tr>

        <tr>
            <td>
                Line Arrows.
            </td>
            <td>
                <div id="strokeArrowSample" />
            </td>

        </tr>

    </table>
</body>

</html>