<script type="text/javascript">
    $(window).resize(function () {
        relayout();
    });

    $(document).ready(function () {
        $("#tabs-tasks").tabs({
            activate: function (event, ui) {
                relayoutTabPanel(ui.newPanel);
                var targetGridElement = $(ui.newPanel).find(".grid").get(0);
                var targetGrid = wijmo.Control.getControl(targetGridElement);

                if (targetGrid.itemsSource.itemCount == 0) {
                    refreshAll(Math.round(rangeSelector.min), Math.round(rangeSelector.max), targetGrid);
                } else {
                    targetGrid.invalidate();
                }
            }
        });
        relayout();
        refreshAll();
    });

    function refreshAll(start, end, targetGrid) {

        refreshData(start, end, '@Url.Action("GetTasks")', function (data) {

            var targetGridElement = getActiveGrid();
            var targetGrid = targetGridElement != null ? wijmo.Control.getControl(targetGridElement) : null;
            if (targetGrid == null)
                targetGrid = wijmo.Control.getControl("#gridAllTasks");
            var cv = new wijmo.collections.CollectionView(data[0].items)

            // Find the group panel and synchronize the grouped columns
            var gp = wijmo.Control.getControl($("#tabs-tasks div[aria-hidden='false'].ui-tabs-panel").find(".wj-grouppanel").get(0));
            var oldCollection = targetGrid.itemsSource;
            targetGrid.itemsSource = cv;
            if (oldCollection != null && oldCollection.groupDescriptions.length > 0) {
                // Already grouped, regroup.
                gp.refresh();
                $.each(oldCollection.groupDescriptions, function (i, v) {
                    dogrouping(targetGrid, gp, v);
                });                
            } else {
                // Apply grouping
                var gd = new wijmo.collections.PropertyGroupDescription('AssignedTo');
                dogrouping(targetGrid, gp, gd);
            }         
            gp.invalidate();
            relayout();
        }, {
                taskType: $("#tabs-tasks").tabs("option", "active")
            });
    }

    function getActiveGrid(parent) {
        var targetGridElement = parent ? parent.find("div.grid")[0] : $("#tabs-tasks div[aria-hidden='false'].ui-tabs-panel div.grid").get(0);
        return targetGridElement;
    }

    function getActiveTab() {
        return $("#tabs-tasks div[aria-hidden='false'].ui-tabs-panel");
    }

    /**
     * Custom cell formatter to paint the progress bar.
     */
    function completeFormatter(panel, r, c, cell) {
        if (panel.columns[c].binding === "Complete") {
            cell.style.textAlign = "";
            if (panel.cellType === wijmo.grid.CellType.Cell) {
                $(cell).empty();
                var value = panel.getCellData(r, c);
                var span = document.createElement("SPAN");
                span.innerHTML = (value * 100) + "%";
                span.setAttribute("class", "progress-value");
                cell.appendChild(buildProgressBar(cell, value));
                cell.appendChild(span);
            }
        }
    }

    /**
     * Draw the progress bar.
     */
    function buildProgressBar(cell, value) {
        var cellWidth = $(cell).width();
        var bar = document.createElement("DIV");
        bar.setAttribute("class", "progress-bar");
        $(bar).width(cellWidth * value);
        return bar;
    }

    /**
     * Manually grouping
     */
    function dogrouping(grid, group, cv, gd) {
        var c = $.grep(grid.columns, function (col, index) {
            return col.binding == cv.propertyName;
        });
        group._addGroup(c[0]);
    }
    
    function relayout() {
        var tabs = $("#tabs-tasks"),
            container = tabs.parent(),
            containerRect = container[0].getBoundingClientRect(),
            containerWidth = containerRect.width;

        tabs.outerWidth(containerWidth * 0.98);
        relayoutTabPanel();
    }

    function relayoutTabPanel(panel) {
        var tabs = $("#tabs-tasks"),
            container = tabs.parent(),
            containerRect = container[0].getBoundingClientRect(),
            containerWidth = containerRect.width,
            containerHeight = containerRect.height,
            MIN_HEIGHT = 250,
            panelHeight = containerHeight - 50,
            activePanel = panel || getActiveTab();

        activePanel.outerWidth(containerWidth * 0.98);
        activePanel.outerHeight(Math.max(panelHeight, MIN_HEIGHT));
        var activeGrid = getActiveGrid(activePanel);
        $(activeGrid).outerHeight(Math.max(panelHeight - 80, MIN_HEIGHT - 80));
        var targetViewer = wijmo.Control.getControl(activeGrid);
        targetViewer.invalidate();
    }
</script>
<div class="flex vertical" style="width:100%;height:100%;overflow:hidden;">
    <div>
        <h3>@DashboardDemo.Resource.TaskPage_Title</h3>
    </div>
    <div class="auto" style="overflow:auto">
        <div id="tabs-tasks">
            <ul>
                <li><a href="#tabs-1">@DashboardDemo.Resource.AllTasks_Header</a></li>
                <li><a href="#tabs-2">@DashboardDemo.Resource.InProgress_Header</a></li>
                <li><a href="#tabs-3">@DashboardDemo.Resource.Completed_Header</a></li>
                <li><a href="#tabs-4">@DashboardDemo.Resource.Deferred_Header</a></li>
                <li><a href="#tabs-5">@DashboardDemo.Resource.Urgent_Header</a></li>
            </ul>
            <div id="tabs-1">
                <c1-flex-grid id="gridAllTasks" auto-generate-columns="false"
                              is-read-only="true" class="grid"
                              show-groups="true" item-formatter="completeFormatter">
                    <c1-flex-grid-column binding="AssignedTo" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Subject" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="ItemName" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="DueDate" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Complete" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-group-panel max-groups="4" placeholder="Please add columns for grouping here"></c1-flex-grid-group-panel>
                </c1-flex-grid>
            </div>
            <div id="tabs-2">
                <c1-flex-grid id="gridInProgress" auto-generate-columns="false"
                              is-read-only="true" class="grid"
                              show-groups="true" item-formatter="completeFormatter">
                    <c1-flex-grid-column binding="AssignedTo" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Subject" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="ItemName" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="DueDate" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Complete" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-group-panel max-groups="4" placeholder="Please add columns for grouping here"></c1-flex-grid-group-panel>
                </c1-flex-grid>
            </div>
            <div id="tabs-3">
                <c1-flex-grid id="gridCompleted" auto-generate-columns="false"
                              is-read-only="true" class="grid"
                              show-groups="true" item-formatter="completeFormatter">
                    <c1-flex-grid-column binding="AssignedTo" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Subject" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="ItemName" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="DueDate" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Complete" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-group-panel max-groups="4" placeholder="Please add columns for grouping here"></c1-flex-grid-group-panel>
                </c1-flex-grid>
            </div>
            <div id="tabs-4">
                <c1-flex-grid id="gridDeferred" auto-generate-columns="false"
                              is-read-only="true" class="grid"
                              show-groups="true" item-formatter="completeFormatter">
                    <c1-flex-grid-column binding="AssignedTo" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Subject" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="ItemName" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="DueDate" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Complete" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-group-panel max-groups="4" placeholder="Please add columns for grouping here"></c1-flex-grid-group-panel>
                </c1-flex-grid>
            </div>
            <div id="tabs-5">
                <c1-flex-grid id="gridUrgent" height="600px" auto-generate-columns="false"
                              is-read-only="true" class="grid"
                              show-groups="true" item-formatter="completeFormatter">
                    <c1-flex-grid-column binding="AssignedTo" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Subject" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="ItemName" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="DueDate" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-column binding="Complete" width="*"></c1-flex-grid-column>
                    <c1-flex-grid-group-panel max-groups="4" placeholder="Please add columns for grouping here"></c1-flex-grid-group-panel>
                </c1-flex-grid>
            </div>
        </div>
    </div>
    <div class="rangeSelector-container">
        @Html.Partial("RangeSelector", ViewBag.RangeSelectorModel as RangeSelectorModel)
    </div>
</div>