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

    $(document).ready(function () {
        initNSLayout();
        updateDashboard();
    });

    function initNSLayout() {
        var wsSplitLayout = c1.getService('wsSplitLayout'),
            nsSplitLayout = c1.getService('nsSplitLayout');

        nsSplitLayout.definition = wsSplitLayout.definition;
        nsSplitLayout.orientation = 1;
        var tiles = [];
        var checkSplitTile = function (item) {
            if (item instanceof c1.nav.split.SplitTile) {
                item.size = null;
                tiles.push(item);
            } else if (item instanceof c1.nav.split.SplitGroup) {
                if (item.children) {
                    item.children.forEach(function (child) {
                        checkSplitTile(child);
                    });
                }
            }
        }
        nsSplitLayout.items.forEach(function (item) {
            checkSplitTile(item);
        });
        nsSplitLayout.items.clear();
        tiles.forEach(function (tile) {
            nsSplitLayout.items.push(tile);
        })
    }
    function updateDashboard() {
        var dashboard = wijmo.Control.getControl('#dashboard');
        resetTileContentsSize();

        var wsSplitLayout = c1.getService('wsSplitLayout'),
            nsSplitLayout = c1.getService('nsSplitLayout'),
            layout = document.body.clientWidth < 1000 ? nsSplitLayout : wsSplitLayout;

        if (dashboard.layout === layout) {
            dashboard.refresh();
        } else {
            dashboard.layout = layout;
        }
    }

    function refreshAll(start, end) {
        refreshData(start, end, '@Url.Action("GetAnalysisData")', function (data) {
            var chartOpportunities = wijmo.Control.getControl("#chartOpportunities");
            chartOpportunities.itemsSource = minSale(data[1].items) > 0 ? data[1].items : null;

            var chartRegionSales = wijmo.Control.getControl("#chartRegionSale");
            chartRegionSales.itemsSource = data[0].items;
        });
    }

    function minSale(list) {
        var min = Number.MAX_VALUE;
        $.each(list, function (i, v) {
            if (min > v.Sales)
                min = v.Sales;
        });
        return min;
    }

    function resetTileContentsSize() {
        var eleIds = ['chartRegionSale', 'chartOpportunities'];
        for (var i = 0; i < eleIds.length; i++) {
            var domEle = document.getElementById(eleIds[i]);
            if (domEle) {
                domEle.removeAttribute('style');
            }
        }
    }

    function tileContentRefreshing(sender, e) {
        var eleCtl = sender.hostElement,
            tileEle = eleCtl.parentElement.parentElement,
            height = $(tileEle).height() - 15;
        if (sender instanceof wijmo.chart.FlexChartBase) {
            height -= 12;
        } else if (sender instanceof wijmo.grid.FlexGrid) {
            height -= 5;
        }
        $(eleCtl).outerHeight(height + 'px');
    }
</script>
<div class="flex vertical" style="width:100%;height:100%;overflow:hidden;">
    <div>
        <h3>
            @Resource.AnalysisPage_Title
        </h3>
    </div>
    <div class="auto" style="overflow:auto">
        <c1-pivot-engine id="indexEngine">
            <c1-items-source source-collection="@Model"></c1-items-source>
            <c1-view-field-collection c1-property="RowFields" items="Category,Product"></c1-view-field-collection>
            <c1-view-field-collection c1-property="ColumnFields" items="Region"></c1-view-field-collection>
            <c1-view-field-collection c1-property="ValueFields" items="Sale"></c1-view-field-collection>
        </c1-pivot-engine>

        <c1-split-layout id="wsSplitLayout" orientation="Horizontal">
            <c1-split-tile show-header="false" size="2*">
                <div class="caption">@Resource.ProductWise_Header</div>
                <c1-pivot-panel items-source-id="indexEngine"></c1-pivot-panel>
            </c1-split-tile>
            <c1-split-tile show-header="false" size="4*">
                <c1-pivot-grid items-source-id="indexEngine" auto-size-mode="None" class="full-fill">
                </c1-pivot-grid>
            </c1-split-tile>
            <c1-split-group size="4*" orientation="Vertical">
                <c1-split-tile show-header="false" size="*">
                    <c1-tree-map header="@Resource.CategoryRegion_Sale" id="chartRegionSale" class="full-fill"
                                 binding-name="Region, Category" binding="Sale" refreshing="tileContentRefreshing">
                        <c1-flex-chart-title-style c1-property="HeaderStyle" halign="left" font-size="18pt"></c1-flex-chart-title-style>
                        <c1-items-source source-collection="@ViewBag.RegionSales"></c1-items-source>
                        <c1-flex-chart-datalabel content="{name}"></c1-flex-chart-datalabel>
                        <c1-flex-chart-tooltip content="<b>{name}</b><br />{value:c0}"></c1-flex-chart-tooltip>
                    </c1-tree-map>
                </c1-split-tile>
                <c1-split-tile show-header="false" size="*">
                    <c1-flex-chart binding-x="LevelName" id="chartOpportunities" header="@DashboardDemo.Resource.Opportunities_Header" class="full-fill"
                                   legend-position="Bottom" chart-type="Funnel" binding="Sales" refreshing="tileContentRefreshing">
                        <c1-flex-chart-title-style c1-property="HeaderStyle" halign="left" font-size="18pt"></c1-flex-chart-title-style>
                        <c1-flex-chart-axis c1-property="AxisY" position="None"></c1-flex-chart-axis>
                        <c1-flex-chart-datalabel position="Center" content="{y:C0}"></c1-flex-chart-datalabel>
                        <c1-items-source source-collection="@ViewBag.OpportunityItemList"></c1-items-source>
                        <c1-flex-chart-series name="@Resource.Sale_Series">
                        </c1-flex-chart-series>
                        <c1-chart-options>
                            <c1-funnel-options type="@FunnelType.Default" neck-height="0.2F" />
                        </c1-chart-options>
                        <c1-flex-chart-tooltip content="<b>{name}</b><br />{x} {value:c0}"></c1-flex-chart-tooltip>
                    </c1-flex-chart>
                </c1-split-tile>
            </c1-split-group>
        </c1-split-layout>
        <c1-split-layout id="nsSplitLayout" orientation="Vertical"></c1-split-layout>
        <c1-dashboard-layout id="dashboard" style="height:100%"></c1-dashboard-layout>
    </div>
    <div class="rangeSelector-container">
        @Html.Partial("RangeSelector", ViewBag.RangeSelectorModel as RangeSelectorModel)
    </div>
</div>
