@{
    Layout = null;
}

<script src="@Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<link href="/Content/style.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script src="@Url.Content("~/Scripts/kinetic-v5.1.0.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/workflowdesigner.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/workflowdesigner.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/ace.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/json5.js")" type="text/javascript"></script>


<form action="" id="uploadform" method="post" enctype="multipart/form-data" onsubmit="tmp()">
    <table>
        <tr>
            <td></td>
            <td>
                <a href='javascript:DownloadScheme()'>Download scheme workflow</a>
            </td>
        </tr>
        <tr>
            <td>
                <input type="file" name="uploadFile" id="uploadFile" style="width:350px">
            </td>
            <td>
                <a href='javascript:UploadScheme()'>Upload  scheme workflow</a>
            </td>
        </tr>
    </table>
</form>
<table>
    <tr>
        <td>Size:</td>
        <td><input id="graphwidth" value="1200" /> x <input id="graphheight" value="600" /></td>
        <td><button onclick="wfdesignerRedraw()">Resize</button></td>
        <td>
            |
        </td>
        <td><button onclick="OnNew()">New</button></td>
        <td><button onclick="OnSave()">Save</button></td>

    </tr>
</table>
<br />
<div id="wfdesigner"></div>

<script>
    var schemecode = 'SimpleWF';
    var wfdesigner = undefined;
    function wfdesignerRedraw() {
        var data;

        if (wfdesigner != undefined) {
            data = wfdesigner.data;
            wfdesigner.destroy();
        }

        wfdesigner = new WorkflowDesigner({
            name: 'simpledesigner',
            apiurl: '/Designer/API',
            renderTo: 'wfdesigner',
            imagefolder: '/images/',
            graphwidth: $('#graphwidth').val(),
            graphheight: $('#graphheight').val()
        });

        if (data == undefined) {
            var isreadonly = false;
            var p = { schemecode: schemecode, readonly: isreadonly };
            if (wfdesigner.exists(p))
                wfdesigner.load(p);
            else
                wfdesigner.create();
        }
        else {
            wfdesigner.data = data;
            wfdesigner.render();
        }
    }

    wfdesignerRedraw();

    function DownloadScheme() {
        wfdesigner.downloadscheme({ schemecode: schemecode });
    }
    function UploadScheme() {
        var file = $('#uploadFile');
        if (file == undefined || file.val().length == 0) {
            alert('You did not select a file to upload!');
            return false;
        }

        wfdesigner.uploadscheme($('#uploadform')[0], function () {
            alert('The file is uploaded!');
        });
    }

    function OnSave() {
        wfdesigner.schemecode = schemecode;

        var err = wfdesigner.validate();
        if (err != undefined && err.length > 0) {
            alert(err);
        }
        else {
            wfdesigner.save(function () {
                alert('The scheme is saved!');
            });
        }
    }
    function OnNew() {
        wfdesigner.create();
    }
</script>