<!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 strokeStyleTest = function () {
        function builder(parent, scale, strokeWidth) {
            var rectSize = scale * 80;
            var yPosition = 10 * scale;

            var xPosition = 10 * scale;
            var rect = new web2d.Rect();
            rect.setSize(rectSize, rectSize);
            rect.setPosition(xPosition, yPosition);
            rect.setFill('yellow');
            rect.setStroke(1, 'solid', 'black');
            parent.append(rect);

            xPosition = xPosition + 90 * scale;
            rect = new web2d.Rect();
            rect.setSize(rectSize, rectSize);
            rect.setPosition(xPosition, yPosition);
            rect.setFill('yellow');
            rect.setStroke(strokeWidth, 'dot', 'black');
            parent.append(rect);

            xPosition = xPosition + 90 * scale;
            rect = new web2d.Rect();
            rect.setSize(rectSize, rectSize);
            rect.setPosition(xPosition, yPosition);
            rect.setFill('yellow');
            rect.setStroke(strokeWidth, 'dash', 'black');
            parent.append(rect);

            xPosition = xPosition + 90 * scale;
            rect = new web2d.Rect();
            rect.setSize(rectSize, rectSize);
            rect.setPosition(xPosition, yPosition);
            rect.setFill('yellow');
            rect.setStroke(strokeWidth, 'longdash', 'black');
            parent.append(rect);

            xPosition = xPosition + 90 * scale;
            rect = new web2d.Rect();
            rect.setSize(rectSize, rectSize);
            rect.setPosition(xPosition, yPosition);
            rect.setFill('yellow');
            rect.setStroke(strokeWidth, 'dashdot', 'black');
            parent.append(rect);
        }

        // Workspace with default scale ...
        var workspace = new web2d.Workspace();
        workspace.setSize("500px", "100px");
        workspace.setCoordSize(500, 100);
        workspace.setCoordOrigin(0, 0);
        builder(workspace, 1, 1);
        workspace.addItAsChildTo($('#strokeStyle'));

        // Workspace with modified scale ...
        workspace = new web2d.Workspace();
        workspace.setSize("500px", "100px");
        workspace.setCoordSize(5000, 1000);
        workspace.setCoordOrigin(0, 0);
        builder(workspace, 10, 1);
        workspace.addItAsChildTo($('#strokeStyleGroup'));

        // Workspace with default scale ...
        workspace = new web2d.Workspace();
        workspace.setSize("500px", "100px");
        workspace.setCoordSize(500, 100);
        workspace.setCoordOrigin(0, 0);
        builder(workspace, 1, 5);
        workspace.addItAsChildTo($('#strokeStyleWidth'));


    };
    strokeStyleTest();

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

        var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
            strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 1});
        workspace.append(rect);

        var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(20, 20);
        rect.setAttribute("strokeOpacity", 1);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(120, 20);
        rect.setAttribute("strokeOpacity", 0.5);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(220, 20);
        rect.setAttribute("strokeOpacity", 0.3);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(320, 20);
        rect.setAttribute("strokeOpacity", 0);
        workspace.append(rect);

        workspace.addItAsChildTo($('#strokeOpacity'));
    };
    strokeOpacityTest();


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

        var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
            strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4});
        workspace.append(rect);

        var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(20, 20);
        rect.setAttribute("fillOpacity", 1);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(120, 20);
        rect.setAttribute("fillOpacity", 0.5);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(220, 20);
        rect.setAttribute("fillOpacity", 0.3);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(320, 20);
        rect.setAttribute("fillOpacity", 0);
        workspace.append(rect);

        workspace.addItAsChildTo($('#fillOpacity'));
    };
    fillOpacityTest();


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

        var rect = new web2d.Rect(0, {x: 5, y: 5, width: 390, height: 90, fillColor: 'green',
            strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 4});
        workspace.append(rect);

        var rectAttributes = {width: 60, height: 60, fillColor: 'yellow', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(20, 20);
        rect.setOpacity(0.8);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(120, 20);
        rect.setOpacity(0.5);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(220, 20);
        rect.setOpacity(0.3);
        workspace.append(rect);

        rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(320, 20);
        rect.setOpacity(0);
        workspace.append(rect);

        workspace.addItAsChildTo($('#opacity'));
    };
    opacityTest();


    var visibilityTest = function () {
        var workspace = new web2d.Workspace({fillColor: 'yellow', strokeWidth: '2px'});
        workspace.setSize("500px", "100px");
        workspace.setCoordSize(500, 100);
        workspace.setCoordOrigin(0, 0);

        var rectAttributes = {width: 60, height: 60, fillColor: 'green', strokeColor: 'black', strokeStyle: 'solid', strokeWidth: 10};
        var rect = new web2d.Rect(0, rectAttributes);
        rect.setPosition(120, 20);
        workspace.append(rect);
        rect.addEvent("mouseover", function () {
            alert("Mouse Over");
        });

        var isVisible = true;
        var executer = function () {
            isVisible = !isVisible;
            rect.setVisibility(isVisible);
        };
        //executer.periodical(100);

        workspace.addItAsChildTo($('#visibility'));
    };
    visibilityTest();
}
</script>
</head>

<body onload="initialize();">

<h1>Element properties Tests </h1>

<table border="1">
    <colgroup style="width:80%;">
        <col style="width:10%"/>
        <col style="width:90%"/>
    </colgroup>
    <tr>
        <td>
            Stroke Styles.
        </td>
        <td>
            <div>
                <div id="strokeStyle"></div>
                <div id="strokeStyleGroup"></div>
                <div id="strokeStyleWidth"></div>
            </div>
        </td>
    </tr>

    <tr>
        <td>
            Stroke Width.
        </td>
        <td>
            <div id="strokeWidth"></div>
        </td>

    </tr>
    <!-- ************************************************** -->
    <tr>
        <td>
            Stroke Opacity.
        </td>
        <td>
            <div id="strokeOpacity"></div>
        </td>

    </tr>
    <!-- ************************************************** -->
    <tr>
        <td>
            Fill Opacity.
        </td>
        <td>
            <div id="fillOpacity"></div>
        </td>

    </tr>
    <!-- ************************************************** -->
    <tr>
        <td>
            Opacity.
        </td>
        <td>
            <div id="opacity"></div>
        </td>

    </tr>
    <tr>
        <td>
            Visibility.
        </td>
        <td>
            <div id="visibility"></div>
        </td>

    </tr>

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