<%@ control language="VB" autoeventwireup="false" inherits="RCC_VPS_CC_VMDashBoardGraphs, MachSol.MachPanel.Web" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="EM" %>
<%@ Register Assembly="MachSol.MachPanel.Utility" Namespace="MachSol.MachPanel.Utility"
    TagPrefix="EM" %>
<%@ Register Src="~/Template/GVPager.ascx" TagName="Pager" TagPrefix="EM" %>

<%@ Register Assembly="MachSol.MachPanel.Utility" Namespace="MachSol.MachPanel.Utility" TagPrefix="CC" %>
<CC:UpdatePanelInlineScriptControl ID="UpdatePanelInlineScriptControl1" runat="server">
    <script type="text/javascript">
        function GetCpuMemoryHDDUsage(VPSId, TimeInterval, DateForHourly) {

            var params = '{"VPSID":"' + VPSId + '","TimeInterval":"' + TimeInterval + '","DateValue":"' + DateForHourly + '"}';

            $.ajax({
                type: "POST",
                url: "VPSAccountDetail.aspx/GetAsyncVMGraphStats",
                async: true,
                data: params,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d.indexOf('Error') < 0) {

                        var receivedArray = msg.d.split("|");
                        var legendXLabelText = receivedArray[0];
                        var headerLabelText = receivedArray[1];
                        var graphData = receivedArray[3];
                        //console.log(graphData);
                        //if (graphData == '') {
                        //   
                        //    element.style.display = "none";                  
                        //}
                        //else {

                        LoadMemoryUsageGraph(graphData);
                        LoadHDDUsageGraph(graphData);
                        if (!$($get('<%= DivCPUCharts.ClientID %>')).hasClass('hide')) {
                        // var element = document.getElementById("DivCPUCharts");
                        //if (window.getComputedStyle(document.getElementById("DivCPUCharts")).display != "none") {
                        LoadCpuUsageGraph(graphData);
                        //}
                    }
                    // SetLabelText(legendXLabelText + "|" + headerLabelText);
                    //}
                }
                else {
                    alert(msg.d);
                }
            },
            error: function (errorMessage) {
                alert(errorMessage);
            }
        });
        }
        function SetLabelText(response) {
            var receivedArray = response.split("|");
            var legendXLabelText = receivedArray[0];
            var headerLabelText = receivedArray[1];
            $("#Lbl_GraphXaxis2").text(legendXLabelText);
            $("#Lbl_GraphXaxis3").text(legendXLabelText);
            $("#Lbl_UsagePopupHeader").text(headerLabelText);
            $("#Lbl_GraphXaxis").text(legendXLabelText);


        }

        function LoadCpuUsageGraph(dataParam) {
            if (dataParam) {
                $("#graph_CPU").empty();
                var body_color = getCookie('body_color');
                var lblColor = 'black'
                if (body_color == 'night-mode') {
                    lblColor = 'white';
                }
                var line = Morris.Area({
                    element: 'graph_CPU',
                    data: $.parseJSON(dataParam),
                    xkey: 'x',
                    ykeys: ['y'],
                    ymin: 0,
                    ymax: 100,
                    labels: ['<%=Resources.Content.CPUUsage%>'],
                fillOpacity: 0.3,
                hideHover: 'auto',
                behaveLikeLine: true,
                resize: true,
                pointFillColors: ['#ffffff'],
                pointStrokeColors: ['blue', 'red'],
                lineColors: ['blue', 'red'],
                lineWidth: '1px',
                parseTime: false,
                backgroundColor: '#FFFFFF',
                labelColor: lblColor,

                hoverCallback: function (index, options, content, row) {
                    //console.log("index" + index + "- options" + options + " - content: " + content + " row: " + row);
                    //console.log(options);
                    //console.log(row);
                    return "<div class='morris-hover-row-label'>" + row.x + "</div><div class='morris-hover-point' style='color: b'>" +
                        "<%=Resources.Content.CPUUsage%>: " + row.y + "</div>";
                }
            });
                var parentDivWidth = $("#graph_CPU").parent("div").width();
                $("#graph_CPU").css("min-width", parentDivWidth);
                $("#graph_CPU > svg:nth-child(1)").css("min-width", parentDivWidth);
                line.redraw();
            }
        }

        function LoadMemoryUsageGraph(dataParam) {
            if (dataParam) {
                $("#graph_Memory").empty();
                var body_color = getCookie('body_color');
                var lblColor = 'black'
                if (body_color == 'night-mode') {
                    lblColor = 'white';
                }
                var line = Morris.Area({
                    element: 'graph_Memory',
                    data: $.parseJSON(dataParam),
                    xkey: 'x',
                    ykeys: ['z'],
                    labels: ['<%=Resources.Content.MemoryUsage%>'],
                fillOpacity: 0.3,
                hideHover: 'auto',
                behaveLikeLine: true,
                resize: true,
                pointFillColors: ['#ffffff'],
                pointStrokeColors: ['purple', 'red'],
                lineColors: ['purple', 'red'],
                lineWidth: '1px',
                parseTime: false,
                backgroundColor: '#FFFFFF',
                labelColor: lblColor,

                hoverCallback: function (index, options, content, row) {
                    //console.log("index" + index + "- options" + options + " - content: " + content + " row: " + row);
                    //console.log(options);
                    //console.log(row);
                    return "<div class='morris-hover-row-label'>" + row.x + "</div><div class='morris-hover-point' style='color: b'>" +
                        "<%=Resources.Content.MemoryUsage%>: " + row.z + "</div>";
                }
            });
                var parentDivWidth = $("#graph_Memory").parent("div").width();
                $("#graph_Memory").css("min-width", parentDivWidth);
                $("#graph_Memory > svg:nth-child(1)").css("min-width", parentDivWidth);
                line.redraw();
            }
        }

        function LoadHDDUsageGraph(dataParam) {
            if (dataParam) {
                $("#graph_HDD").empty();
                var body_color = getCookie('body_color');
                var lblColor = 'black'
                if (body_color == 'night-mode') {
                    lblColor = 'white';
                }
                var line = Morris.Area({
                    element: 'graph_HDD',
                    data: $.parseJSON(dataParam),
                    xkey: 'x',
                    ykeys: ['b'],
                    labels: ['<%=Resources.Content.DiskUsage%>'],
                fillOpacity: 0.3,
                hideHover: 'auto',
                behaveLikeLine: true,
                resize: true,
                pointFillColors: ['#ffffff'],
                pointStrokeColors: ['green', 'red'],
                lineColors: ['green', 'red'],
                lineWidth: '1px',
                parseTime: false,
                backgroundColor: '#FFFFFF',
                labelColor: lblColor,

                hoverCallback: function (index, options, content, row) {
                    //console.log("index" + index + "- options" + options + " - content: " + content + " row: " + row);
                    //console.log(options);
                    //console.log(row);
                    return "<div class='morris-hover-row-label'>" + row.x + "</div><div class='morris-hover-point' style='color: b'>" +
                        "<%=Resources.Content.DiskUsage%>: " + row.b + "</div>";
                }
            });
                var parentDivWidth = $("#graph_HDD").parent("div").width();
                $("#graph_HDD").css("min-width", parentDivWidth);
                $("#graph_HDD > svg:nth-child(1)").css("min-width", parentDivWidth);
                line.redraw();
            }
        }
    </script>
</CC:UpdatePanelInlineScriptControl>


<!-- Mailbox Usage History -->
<%--<asp:Button ID="Button2" runat="server" CssClass="btn-dummy" />
<asp:Button ID="Button1" runat="server" CssClass="btn-dummy" />
<EM:ModalPopupExtender runat="server" ID="MPE_ServerCpuAndMemoryStatsHostory" BackgroundCssClass="modalBackground"
    DropShadow="false" CancelControlID="Btn_Close" PopupControlID="Pnl_ServerCpuAndMemoryStats" TargetControlID="Button1"
    OkControlID="Button2">
</EM:ModalPopupExtender>--%>
<div class="row">
    <div class="col-xs-12">
        <div class="card">

            <div class="body">
                <h4><%= Resources.Content.VMRUsage %></h4>
                <hr />
                <div class="row align-right">
                    <div class="col-xs-12 col-md-8">
                        <div id="DivDate" runat="server">

                            <%--                            <label>
                                <asp:Literal ID="Literal11" runat="server" Text="<%$ Resources:Content,strDate%>" EnableViewState="false" />:
                            </label>--%>
                            <div class="form-group display-date-input">
                                <div class="form-line">
                                    <asp:TextBox ID="TxBx_Date" runat="server" AutoPostBack="true"></asp:TextBox>
                                </div>
                            </div>
                            <i runat="server" id="A_FromDate" class="material-icons icon-calendar col-calendar"></i>
                            <EM:CalendarExtender ID="CE_FromDate" runat="server" TargetControlID="TxBx_Date"
                                Format="<%# System.Threading.Thread.CurrentThread.CurrentCulture.DateTimeFormat.ShortDatePattern %>"
                                PopupButtonID="A_FromDate" CssClass="date__calendar">
                            </EM:CalendarExtender>

                        </div>
                    </div>
                    <div class="col-xs-12 col-md-4 p-r-50">
                        <div class="products-step" id="DivIntervals" runat="server">
                            <span id="div_Hourly" runat="server" nowrap="true" class="label label-success">
                                <asp:LinkButton ID="Lb_Hourly" runat="server" Text='<%$ Resources:Content, strHourly %>' />
                            </span>
                            <span id="div_Daily" runat="server" nowrap="true" class="label label-default">
                                <asp:LinkButton ID="Lb_Daily" runat="server" Text='<%$ Resources:Content, strDaily %>' />
                            </span>
                            <span id="div_Monthly" runat="server" nowrap="true" class="label label-default">
                                <asp:LinkButton ID="Lb_Monthly" runat="server" Text='<%$ Resources:Content, strMonthly %>' />
                            </span>
                            <span id="div1" runat="server" nowrap="true" class="label label-default">
                                <asp:LinkButton ID="lb_Advanced1" runat="server" Text='' />
                            </span>
                        </div>
                        <%--<div class="radio-toolbar p-r-40" >
                            <asp:RadioButton ID="rdbHourly" runat="server" GroupName="Time" Text="<%$ Resources:Content,strHourly%>" AutoPostBack="true" Checked="true" />
                            <asp:RadioButton ID="rdbDaily" runat="server" GroupName="Time" Text="<%$ Resources:Content,strDaily%>" AutoPostBack="true" />
                            <asp:RadioButton ID="rdbMonthly" runat="server" GroupName="Time" Text="<%$ Resources:Content,strMonthly%>" AutoPostBack="true" />
                        </div>--%>
                    </div>
                </div>


                <div class="row" id="DivCharts" runat="server">
                    <div class="col-xs-12" id="DivCPUCharts" runat="server" visible="false">
                        <div class="card">
                            <div class="body">
                                <h4><%= Resources.Content.CPUUsageInPercentage %></h4>
                                <hr />
                                <div class="row">
                                    <%--<div class="col-xs-2" style="margin-top: 16%; width: 13%;">
                                        <label class="verticalLabel"><%= Resources.Content.CPUUsageInPercentage%></label>
                                    </div>--%>
                                    <div class="col-xs-12">
                                        <div id="graph_CPU"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <label style="margin-left: 43%;">
                                            <label id="Lbl_GraphXaxis"></label>
                                        </label>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12" id="DivMemCharts" runat="server">
                        <div class="card">
                            <div class="body">
                                <h4><%= Resources.Content.MemoryUsageInMB %></h4>
                                <hr />
                                <div class="row">
                                    <%-- <div class="col-xs-2" style="margin-top: 16%; width: 13%;">
                                        <label class="verticalLabel"><%= Resources.Content.MemoryUsageInMB%></label>
                                    </div>--%>
                                    <div class="col-xs-12">
                                        <div id="graph_Memory"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <label style="margin-left: 43%;">
                                            <label id="Lbl_GraphXaxis2"></label>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12" id="DivCDiskharts" runat="server">
                        <div class="card">
                            <div class="body">
                                <h4><%= Resources.Content.DiskUsageInGB %></h4>
                                <hr />
                                <div class="row">
                                    <%--<div class="col-xs-2" style="margin-top: 16%; width: 13%;">
                                        <label class="verticalLabel"><%= Resources.Content.DiskUsageInGB%></label>
                                    </div>--%>
                                    <div class="col-xs-12">
                                        <div id="graph_HDD"></div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-12">
                                        <label style="margin-left: 43%;">
                                            <label id="Lbl_GraphXaxis3"></label>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
