<!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 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 border="1">
<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>