

<h3>@Resources.DashboardDemo.ReportsPage_Title</h3>

<script>
    $(window).resize(function () {
        relayout(window.__containerWidth, window.__containerHeight);
    });
    $(document).ready(function () {
        setTimeout(function () {
            $("#tabs-report").tabs({
                activate: function (event, ui) {
                    var targetViewerElement = $(ui.newPanel).find(".wj-viewer").get(0);
                    var targetViewer = wijmo.Control.getControl(targetViewerElement);

                    var id = ui.newPanel.get(0).getAttribute("id");
                    if (id == "tabs-1") {
                        targetViewer.filePath = '/Content/Reports/RegionWiseSalesData.flxr';
                        targetViewer.reportName = 'RegionalSales Report';
                    } else if (id == "tabs-2") {
                        targetViewer.filePath = '/Content/Reports/CurrentOpportunitiesData.flxr';
                        targetViewer.reportName = 'OpportunityItem Report';
                    } else {
                        targetViewer.filePath = '/Content/Reports/ProfitAndSales.flxr';
                        targetViewer.reportName = 'ProfitAndSale Report';
                    }
                    targetViewer.refresh();
                }
            });


            relayout();
        }, 0);

        relayout();
    });

    function relayout(containerWidth, containerHeight) {
        if (containerWidth == null)
            containerWidth = getContainerWidth();
        if (containerHeight == null)
            containerHeight = getContainerHeight();

        containerWidth = containerWidth * 0.98;
        $("#tabs-report").outerWidth(containerWidth);
        $(".ui-tabs-panel").outerWidth(containerWidth);

        $("#tabs-report .wj-viewer").outerWidth(containerWidth - 10);
        var targetViewer = wijmo.Control.getControl($("#tabs-report .wj-viewer").get(0));
        targetViewer.refresh();
    }
</script>

<div id="tabs-report">
    <ul>
        <li><a href="#tabs-1">@Resources.DashboardDemo.RegionSales_Header</a></li>
        <li><a href="#tabs-2">@Resources.DashboardDemo.Opportunities_Header</a></li>
        <li><a href="#tabs-3">@Resources.DashboardDemo.ProfitAndSales_Header</a></li>
    </ul>
    <div id="tabs-1">
        @Html.C1().ReportViewer().FilePath("/Content/Reports/RegionWiseSalesData.flxr").ReportName("RegionalSales Report")
    </div>
    <div id="tabs-2">
        @Html.C1().ReportViewer()
    </div>
    <div id="tabs-3">
        @Html.C1().ReportViewer()
    </div>

</div>