

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

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

    var ajaxQueue = [];

    $(document).ready(function () {
        $("#tabs-products").tabs({
            activate: function (event, ui) {
                var targetGridElement = $(ui.newPanel).find(".product-grid").get(0);

                if (typeof (targetGridElement.__bound) == "undefined") {
                    // The products is not pulled yet, get it from server.
                    getProducts();
                    targetGridElement.__bound = 1;
                }
            }
        });
        
        setTimeout(function () {
            getProducts();
        }, 100);
        relayout();
    });

    /**
     * Send ajax request to get the collectionView of the products.
     */
    function getProducts(recursive) {

        if (!recursive) {
            ajaxQueue.push({
                target: $("#tabs-" + ($("#tabs-products").tabs("option", "active") + 1) + " .product-grid").get(0),
                type: $("#tabs-products").tabs("option", "active")
            });
            if (ajaxQueue.length > 1) return;
        }

        var rq = ajaxQueue.pop();
        $.ajax('@Url.Action("GetProducts")', {
            success: function (data) {
                buildGrid(rq.target, data);
                if (ajaxQueue.length > 0) {
                    getProducts(true);
                }
                relayout();
            },
            data: {
                productType: rq.type
            },
            dataType: "json",
            type:"POST"
        });
    }

    /**
     * Create product grid
     */
    function buildGrid(target, data) {

        var host = window.location.protocol + "//" + window.location.hostname;
        if (window.location.port != 0)
            host += ":" + window.location.port;
        var basePath = $("#tabs-products").data("basePath") + "";
        if (basePath.length > 0)
            host += "/" + $("#tabs-products").data("basePath");
        var items = data.items;
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var ie = document.createElement("DIV");
            $(ie).attr("class", "product-item");

            var productImage = document.createElement("IMG");
            $(productImage).attr("src", host + item.ImagePath);
            $(ie).append(productImage);

            var productTitle = document.createElement("SPAN");
            $(productTitle).html(item.Label);
            $(ie).append(productTitle);

            target.appendChild(ie);
        }
    }

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

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

        var MIN_HEIGHT = 250;
        var panelHeight = containerHeight - 150;
        $("#tabs-products").outerWidth(containerWidth * 0.98);
        var activePanel = getActiveTab();
        activePanel.outerWidth($("#tabs-products").outerWidth());
        activePanel.outerHeight(Math.max(MIN_HEIGHT, panelHeight));

        var grid = activePanel.find(".product-grid");
        grid.outerHeight(Math.max(MIN_HEIGHT, panelHeight * 0.98));
        grid.outerWidth($("#tabs-products").outerWidth() - 25);
    }
</script>

<div id="tabs-products" data-base-path="@ViewBag.BasePath">
    <ul>
        <li><a href="#tabs-1">@Resources.DashboardDemo.All_Header</a></li>
        <li><a href="#tabs-2">@Resources.DashboardDemo.Sports_Header</a></li>
        <li><a href="#tabs-3">@Resources.DashboardDemo.City_Header</a></li>
        <li><a href="#tabs-4">@Resources.DashboardDemo.MultiUtility_Header</a></li>
        <li><a href="#tabs-5">@Resources.DashboardDemo.NewEntry_Header</a></li>
    </ul>
    <div id="tabs-1">
        <div class="product-grid">

        </div>
    </div>
    <div id="tabs-2">
        <div class="product-grid">

        </div>
    </div>
    <div id="tabs-3">
        <div class="product-grid">

        </div>
    </div>

    <div id="tabs-4">
        <div class="product-grid">

        </div>
    </div>
    <div id="tabs-5">
        <div class="product-grid">

        </div>
    </div>

</div>

