<%@ page language="C#" autoeventwireup="true" inherits="App_Admin_Defaulttest, App_Web_defaulttest.aspx.cdcab7d2" enableEventValidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Displaying Progress Bar for Long-Running Processes </title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager runat="Server" EnablePageMethods="true" ScriptMode="Release"
        LoadScriptsBeforeUI="true" ID="MainSM">
        <scripts>
            <asp:ScriptReference Path="~/App_Include/JavaScript/Main.js" />
        </scripts>
    </asp:ToolkitScriptManager>

    <script type="text/javascript">
        Sys.Application.add_load(
            applicationLoadHandler
            );
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
            endRequestHandler
            );
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(
            beginRequestHandler
            );
        var mHandlers = {};
        mHandlers.Void = function(obj) {
            ; // nothing to process
        };
        mHandlers.GetStatuses = function() {
            // call server method
            // which gets an array
            // of currently executing processes
            mainScreen.ExecuteCommand(
                'GetProcessStatuses',
                'mHandlers.ProcessStatuses',
                null);
            setTimeout(
                "mHandlers.GetStatuses();",
                parseInt(
                    $get("<%=lblSlider.ClientID %>").innerHTML
                    )
                );
        };
        mHandlers.ProcessStatuses = function(obj) {

            var resultDiv = $get("resultDiv");
            if (obj) {
                resultDiv.innerHTML =
                    mHandlers.BuildProcessList(obj);
            } else {
                resultDiv.innerHTML = "&nbsp;";
            }
        };
        mHandlers.BuildProcessList = function(obj) {
            var i = 0;
            if (obj.length == 0)
                return "&nbsp;";
            var result = "<table " +
                         "cellspacing='0' " +
                         "cellpadding='3' " +
                         "width='99%'>";

            result += "<td " +
                            "align='left' " +
                            "style='width:1%; white-space:nowrap'>" +
                            "<b>Process Name</b>" +
                          "</td>";

            result += "<td " +
                            "align='left' " +
                            "style='width:89%;'>" +
                            "<b>Progress</b>" +
                          "</td>";

            result += "<td " +
                            "align='left' " +
                            "style='width:10%; white-space:nowrap'>" +
                            "<b>Completion</b>" +
                          "</td>";

            for (i = 0; i < obj.length; i++) {
                result += "<tr>";

                result += "<td " +
                            "align='left' " +
                            "style='width:1%; white-space:nowrap'>" +
                            obj[i].Name +
                          "</td>";

                result += "<td " +
                            "align='left' " +
                            "style='width:89%;'>" +
                                "<div " +
                                    "style='widht:100%; " +
                                    "background-color:white' " +
                                    ">" +
                                    "<div " +
                                        "style='width=" +
                                        obj[i].Status +
                                        "%; background-color:" +
                                            (obj[i].Status < 100 ?
                                                "red" : "green") +
                                            ";'>" +
                                        "&nbsp;</div>" +
                                "</div>" +
                          "</td>";

                result += "<td " +
                            "align='left' " +
                            "style='width:10%; white-space:nowrap'>" +
                            obj[i].Status + " %" +
                          "</td>";

                result += "</tr>";
            }
            result += "</table>";
            return result;
        };
    </script>

    <div>
        Click "Start new process" several times and update refresh speed to see status of
        server-side processes real-time
    </div>
    <br />
    <br />
    <div>
        Process Name:&nbsp;&nbsp;
        <input type="text" id="processName" value="File Download" />
        &nbsp;&nbsp;
        <input type="button" value="Start new process" onclick="            
                    mainScreen.ExecuteCommand(
                    'LaunchNewProcess', 
                    'mHandlers.Void', 
                    $get('processName').value);
                    " />
        &nbsp;&nbsp;
        <br />
        <br />
    </div>
    <div>
        <br />
        <div style="float: left; width: 100px;">
            Update speed:
        </div>
        <div style="float: left; width: 200px;">
            <asp:SliderExtender ID="seUpdateSpeed" runat="server" BehaviorID="tbSlider"
                TargetControlID="tbSlider" BoundControlID="lblSlider" Orientation="Horizontal"
                Minimum="500" Maximum="5000" Steps="10" EnableHandleAnimation="true" TooltipText="Slider: value {0}. Please slide to change value." />
            <asp:TextBox ID="tbSlider" runat="server" Style="right: 0px" Text="500" />
        </div>
        <div style="float: left">
            <asp:Label ID="lblSlider" runat="server" Text="500" />
            Milliseconds</div>
    </div>
    <br />
    <br />
    <br />
    <div style="border: dashed 1px black;" id="resultDiv">
        &nbsp;
    </div>
    </form>
</body>
</html>
