@model GridModel<ActivityLogTypeModel>
@using Telerik.Web.Mvc;
@using Telerik.Web.Mvc.UI;

@using (Html.BeginForm("SaveTypes", "ActivityLog"))
{
    <div class="section-header">
        <div class="title">
            <img src="@Url.Content("~/Administration/Content/images/ico-configuration.png")" alt="" />
            @T("Admin.Configuration.ActivityLog.ActivityLogType")
        </div>
        <div class="options">
            <button type="submit" name="save" value="save" class="t-button">@T("Admin.Common.Save")</button>
        </div>
    </div>
    <p>
    </p>
    <table class="adminContent">
        <tr>
            <td>
                @(Html.Telerik().Grid<ActivityLogTypeModel>()
                .Name("activityLogType-grid")
                .BindTo(Model.Data)
                        .Columns(columns =>
                        {
                            columns.Bound(x => x.Name)
                                .Centered()
                                .Width("50%");
                            columns.Bound(x => x.Enabled)
                                .Centered()
                                .Template(x => Html.CheckBox("checkBox_" + x.Id.ToString(), x.Enabled, new { id = x.Id, @class = "checkboxGroups" }))
                                .Title(T("Admin.Configuration.ActivityLog.ActivityLogType.Fields.Enabled").Text + "&nbsp<input id='mastercheckbox' type='checkbox'/>")
                                .Width("50%")
                                .HtmlAttributes(new { style = "text-align:center" })
                                .HeaderHtmlAttributes(new { style = "text-align:center" });
                        })
                .Footer(false)
)
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        var selectedIds = [];

        $(document).ready(function () {

            $('#mastercheckbox').click(function () {
                $('.checkboxGroups').attr('checked', $(this).is(':checked') ? 'checked' : '').change();
            });

            //wire up checkboxes. 
            $('#activityLogType-grid input[type=checkbox][id!=mastercheckbox]').live('change', function (e) {
                var $check = $(this);
                if ($check.attr("checked") == true) {
                    var checked = jQuery.inArray($check.val(), selectedIds);
                    if (checked == -1) {
                        //add id to selectedIds.  
                        selectedIds.push($check.val());
                    }
                }
                else {
                    var checked = jQuery.inArray($check.val(), selectedIds);
                    if (checked > -1) {
                        //remove id from selectedIds.  
                        selectedIds = $.grep(selectedIds, function (item, index) {
                            return item != $check.val();
                        });
                    }
                }
                updateMasterCheckbox();
            });
        });

        function updateMasterCheckbox() {
            var numChkBoxes = $('#activityLogType-grid input[type=checkbox][id!=mastercheckbox]').length;
            var numChkBoxesChecked = $('#activityLogType-grid input[type=checkbox][checked][id!=mastercheckbox]').length;
            if (numChkBoxes == numChkBoxesChecked && numChkBoxes > 0) {
                $('#mastercheckbox').attr('checked', 'checked');
            }
            else {
                $('#mastercheckbox').attr('checked', '');
            }

        }
   </script>    
}