{style}
    #admin-content-statistics-header #content-statistics-form {
        float:left;
    }

    #admin-content-statistics-header #content-statistics-form select {
        width:200px;
    }

    #admin-content-statistics-header #content-statistics-menu {
        float:right;
    }

    #admin-content-statistics-container .ow_ajaxloader_preloader {
        min-height:300px;
    }
{/style}

{script}
    var defaultPeriod = "{$defaultPeriod}";
    var defaultContentGroup = "{$defaultContentGroup}";

    $("#content-statistics-menu a").on("click", function(){
        defaultPeriod = $(this).attr("id");
        defaultPeriod = defaultPeriod.replace("content_menu_statistics_", "");

        reloadChart();
    });

    $("#content-statistics-form select").on("change", function(){
        defaultContentGroup = $(this).val();
        reloadChart();
    });

    /**
     * Reload chart
     *
     * @return void
     */
    function reloadChart()
    {
        if (!defaultContentGroup || !defaultPeriod)
        {
            return;
        }

        OW.loadComponent("ADMIN_CMP_ContentStatistic", [{
            "defaultContentGroup" : defaultContentGroup,
            "defaultPeriod" : defaultPeriod
        }], "#admin-content-statistics-container");
    }
{/script}

<div id="admin-content-statistics-header">
    {form name="content_statistics_form"}
    <div id="content-statistics-form">
        {input name="group"}
    </div>
    {/form}
    <div id="content-statistics-menu">
        {$menu}
    </div>
    <div class="clearfix"></div>
</div>

<div id="admin-content-statistics-container">
    {$statistics}
</div>
