<script>

    $(window).resize(function () {
        relayout(window.__containerWidth, window.__containerHeight);
    });

    $(document).ready(function () {

        var options = {
            spacing_open: 2,
            spacing_close: 2,            
            onresize_end: function () {
                invalidateComponents();
                return true;
            }
        };
        relayout();

        if (window.rangeSelector != null) {
            window.rangeSelector.rangeChanged.addHandler(function (s, e) {
                // perform related updates // e.g. modify displayed range of another chart
                refreshAll(Math.round(rangeSelector.min), Math.round(rangeSelector.max));
            });
        }
    });

    var inited;
    var layoutOptions;
    var layoutOptions1;
    function relayout(containerWidth, containerHeight) {
        var flowLayout = $(".flow-layout");
        if (flowLayout.css("display") == "none") {
            if (flowLayout.children().length != 0)
                moveContent(true);
        if (containerWidth == null)
            containerWidth = getContainerWidth();
        if (containerHeight == null)
            containerHeight = getContainerHeight();

        if (layoutOptions == null) {
            layoutOptions = {
                    fxName_open: "slide",
                    fxSpeed_open: "slow",
                    fxName_close: "slide",
                    fxSpeed_close: "slow",
                spacing_open: 2,
                spacing_close: 2,
                onresize_end: function () {
                    if (layoutOptions1 == null) {
                        layoutOptions1 = {
                                fxName_open: "slide",
                                fxSpeed_open: "slow",
                                fxName_close: "slide",
                                fxSpeed_close: "slow",
                            spacing_open: 2,
                            spacing_close: 2,
                            onresize_end: function () {
                                if (inited)
                                    invalidateComponents();
                            }
                        }
                    }
                    if (!inited) {
                        var least = $("#layout-east");
                        var dashboardEast = least.layout(layoutOptions1);
                        dashboardEast.sizePane("south", least.outerHeight() * 0.5);
                    }
                    invalidateComponents();
                    inited = true;
                    return true;
                }
            };
        }

        $('#dashboard').width(containerWidth * 0.99);
        $('#dashboard').height(containerHeight * 0.75);
        var dashboard = $('#dashboard').layout(layoutOptions);
        dashboard.sizePane("east", $('#dashboard').width() * 0.4);
        } else {
            if (flowLayout.children().length == 0)
                moveContent();
            flowLayout.outerWidth(getContainerWidth() * 0.95);
            invalidateComponents();
        }
    }

    function invalidateComponents() {
        var flowLayout = $(".flow-layout");
        if (flowLayout.css("display") == "none") {
            $("#chartOpportunities").height($("#chartOpportunities").parent().height() - 10);
            $("#chartRegionSale").height($("#chartRegionSale").parent().height() - 10);
        }

        $("#pivotGrid").width($("#pivotGrid").parent().width() * 0.98);
        var pivotGrid = wijmo.Control.getControl("#pivotGrid");
        pivotGrid.invalidate();

        var chartOpportunities = wijmo.Control.getControl("#chartOpportunities");
        chartOpportunities.refresh();

        var chartRegionSales = wijmo.Control.getControl("#chartRegionSale");
        chartRegionSales.refresh();
    }
    
    function refreshAll(start, end) {

        var items = window.rangeSelector._chart.itemsSource.items;
        if (start == null)
            start = items[0].Date;
        if (end == null)
            end = items[items.length - 1].Date;


        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 refreshData(start, end, action, callback) {

        var startDate = new Date(start);
        var endDate = new Date(end);
        $.ajax(action, {
            success: function (data) {
                callback(data);
            },
            data: {
                startDate: (startDate.getMonth() + 1) + "/" + startDate.getDate() + "/" + startDate.getFullYear(),
                endDate: (endDate.getMonth() + 1) + "/" + endDate.getDate() + "/" + endDate.getFullYear()
            },
            dataType: "json"
        });
    }

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

    function moveContent(reverse) {
        if (!reverse) {
            var flow = $(".flow-layout");
            var cb = $("#dashboard > .ui-layout-west,#dashboard > .ui-layout-center, #layout-east > .ui-layout-center, #layout-east > .ui-layout-south").children("DIV");
            for (var i = 0; i < cb.length; i++) {
                flow.append(cb[i]);
            }
        } else {
            var cb = $(".flow-layout").children();
            $("#layout-east > .ui-layout-south").append(cb[4]);
            $("#layout-east > .ui-layout-center").append(cb[3]);
            $("#dashboard > .ui-layout-center").append(cb[2]);
            $("#dashboard > .ui-layout-west").append(cb[1]);
            $("#dashboard > .ui-layout-west").append(cb[0]);
        }
    }
</script>

<h3>
    @DashboardDemo.Resource.AnalysisPage_Title
</h3>

<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>


<div class="flow-layout">

</div>

<div id="dashboard">
    <div class="ui-layout-west">
        <div class="caption">@Resource.ProductWise_Header</div>

        <c1-pivot-panel items-source-id="indexEngine"></c1-pivot-panel>
    </div>
    <div class="ui-layout-center" id="center1">
        <c1-pivot-grid items-source-id="indexEngine" id="pivotGrid"></c1-pivot-grid>
    </div>
    <div class="ui-layout-east" id="layout-east">
        <div class="ui-layout-center">
            <c1-tree-map header="@DashboardDemo.Resource.CategoryRegion_Sale" id="chartRegionSale"
                         binding-name="Region, Category" binding="Sale">
                <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>


        </div>
        <div class="ui-layout-south">
            <c1-flex-chart binding-x="LevelName" id="chartOpportunities" header="@DashboardDemo.Resource.Opportunities_Header"
                           legend-position="Bottom" chart-type="Funnel" binding="Sales">
                <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="@DashboardDemo.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>

        </div>
    </div>
</div>
<div>
    @Html.Partial("RangeSelector", ViewBag.DateSaleList as List<SaleItem>)
</div>
