<!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 overflowWorkspace = new web2d.Workspace({ fillColor: 'green' });
            overflowWorkspace.setSize("100px", "100px");

            var line = new web2d.PolyLine();
            line.setTo(165, 165);
            line.setFrom(95, 95);
            line.setStyle("Straight");
            line.setStroke('10');
            overflowWorkspace.append(line);


            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setFrom(95, 95);
            //    line.setTo(165, -1653.0000000000000000000001);
            //    line.setFrom(95, 952);
            //    line.setTo(165, 1651);
            //
            //
            //    var line = new web2d.PolyLine();
            //    line.setFrom(95, 90);
            //    line.setTo(160, 20);
            //    overflowWorkspace.append(line);
            //
            //    var line = new web2d.PolyLine();
            //    line.setStyle("Straight");
            //    line.setFrom(90, -90);
            //    line.setTo(20, 20);
            //    overflowWorkspace.append(line);
            //
            //    var line = new web2d.PolyLine();
            //    line.setFrom(95, 95);
            //    line.setTo(165, 165);
            //    line.setStroke(1, 'solid', 'red');
            //    overflowWorkspace.append(line);
            //
            //    // Reference ...
            //    var refLine = new web2d.Line();
            //    refLine.setFrom(95, 0);
            //    refLine.setTo(95, 200);
            //    refLine.setStroke(1, 'solid', 'red');
            //    overflowWorkspace.append(refLine);
            //
            //    var refLine = new web2d.Line();
            //    refLine.setFrom(165, 0);
            //    refLine.setTo(165, 200);
            //    refLine.setStroke(1, 'solid', 'red');
            //    overflowWorkspace.append(refLine);
            //

            overflowWorkspace.addItAsChildTo($('#overflowExample'));


            var overflowWorkspace = new web2d.Workspace();
            overflowWorkspace.setSize("100px", "100px");
            var line1 = new web2d.PolyLine();
            line1.setFrom(95, 95);
            line1.setTo(165, 165);
            line1.setStyle("Curved");
            overflowWorkspace.append(line1);

            var line1 = new web2d.PolyLine();
            line1.setFrom(95, 95);
            line1.setTo(165, 135);
            line1.setStyle("Curved");
            overflowWorkspace.append(line1);

            var line1 = new web2d.PolyLine();
            line1.setFrom(95, 90);
            line1.setTo(160, 20);
            line1.setStyle("Straight");
            overflowWorkspace.append(line1);

            var line1 = new web2d.PolyLine();
            line1.setFrom(95, 90);
            line1.setTo(160, 50);
            line1.setStyle("Straight");
            overflowWorkspace.append(line1);

            var line1 = new web2d.PolyLine();
            line1.setFrom(90, 90);
            line1.setTo(20, 20);
            overflowWorkspace.append(line1);

            var line1 = new web2d.PolyLine();
            line1.setFrom(90, 90);
            line1.setTo(20, 50);
            overflowWorkspace.append(line1);

            var line1 = new web2d.PolyLine();
            line1.setFrom(90, 95);
            line1.setTo(20, 165);
            overflowWorkspace.append(line1);

            var line1 = new web2d.PolyLine();
            line1.setFrom(90, 95);
            line1.setTo(20, 135);
            overflowWorkspace.append(line1);

            overflowWorkspace.addItAsChildTo($('#multipleLineExample'));
        }
    </script>
</head>

<body onload="initialize();">

    <h1>PolyLines Render Tests </h1>

    <table>
        <colgroup style="width:80%;">
            <col style="width:30%" />
            <col style="width:60%" />
        </colgroup>
        <tr>
            <td>
                Different types of PolyLines that can be used.
            </td>
            <td>
                <div id="overflowExample" />
            </td>

        </tr>
        <tr>
            <td>
                This is how multiple childs will look in each style line
            </td>
            <td>
                <div id="multipleLineExample" />
            </td>

        </tr>
    </table>
</body>

</html>