
        function InitDatatable() {
            $('#datatable-1').on('xhr.dt', function (e, settings, json) {
                if (typeof (json.data) == 'object') {
                    for (var i in json.data) {
                        var id = json.data[i].id;
                        var num = json.data[i].num;
                        var genre_in_category = parseInt(json.data[i].genre_in_category, 10);
                        var movie_in_category = parseInt(json.data[i].movie_in_category, 10);
                        var censored = json.data[i].censored;
                        json.data[i].operations = "<div class='col-xs-3 col-sm-8'>\n\
                                                        <a href='#' class='dropdown-toggle' data-toggle='dropdown'>\n\
                                                            <i class='pull-right fa fa-cog'></i>\n\
                                                        </a>\n\
                                                        <ul class='dropdown-menu pull-right'>\n\
                                                            <li>\n\
                                                                <a href='{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/edit-video-categories' data-categoriesid='" + id + "' data-cat-censored='" + censored + "' id='edit_video_categories_" + id + "'>\n\
                                                                    <span>{{ 'Edit'|trans }}</span>\n\
                                                                </a>\n\
                                                            </li>\n\
                                                            <li>\n\
                                                                <a class='main_ajax' " + (genre_in_category || movie_in_category ? "disabled='disabled'" : "") + " href='{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/remove-video-categories' data-categoriesid='" + id + "' data-curr_pos='" + num + "'>\n\
                                                                    <span>{{ 'Delete'|trans }}</span>\n\
                                                                </a>\n\
                                                            </li>\n\
                                                        </ul>\n\
                                                    </div>";
                        var category_name = json.data[i].category_name;

                        json.data[i].censored = censored ? "{{ 'Yes'|trans }}": "{{ 'No'|trans }}";

                        json.data[i].category_name = "<a href='{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/edit-video-categories' data-categoriesid='" + id + "' id='edit_video_categories_" + id + "' >" + category_name + "</a>";
                    }
                }
            }).dataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/video-categories-list-json"
                },
                "language": {
                    "url": "{{ app.datatable_lang_file }}"
                },
                "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                    nRow.setAttribute('id', aData.RowOrder);  //Initialize row id for every row
                },
                {% if attribute(app, 'dropdownAttribute') is defined %}
                {{ main_macro.get_datatable_column(app['dropdownAttribute']) }}
                {% endif %}
                "lengthMenu": [-1],
                "bFilter": true,
                "bPaginate": false,
                "bInfo": true,
                "ordering": false,
                rowReorder: true, // don't use {selector: 'tr'} or you couldn't access action menu
                "aoColumnDefs": [
                    { orderable: true, className: 'row-reorder', targets: 0 },
                    { className: "action-menu", "targets": [ -1 ]},
                    { "sortable": false, "targets": [-1]},
                    { "searchable": false, "targets": [-2, -1, 2]}
                ]
            })
            // replaced with table.on('row-reorder', function ( e, diff, edit ) {...})
            /*.rowReordering({
                iIndexColumn: 0,
                sURL: "{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/video-categories-reorder"
            })*/
            .closest('#iptv_list').find('.dataTables_processing').hide('', function(){$('.dataTables_filter').addClass('invisible');});
        }

        function yelp() {
            $(document).ready(function () {
                $(document).on('change keyup', '#video_category_name', function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    var _this = $(this);
                    _this.next('div').removeClass('bg-danger').css('visibility', 'hidden').html('&nbsp;');
                    $('#modalbox button[type="submit"]').removeAttr("disabled");
                    $.ajax({
                        url: '{{app.request_context.baseUrl}}/{{app.controller_alias}}/check-video-categories-name',
                        type: 'POST',
                        data: {category_name: _this.val(), edit: _this.prev('input[name="id"]').val() != ''},
                        success: function (data) {
                            if (data.success) {
                                $('#modalbox button[type="submit"]').removeAttr("disabled");
                                _this.next('div').append('<i class="txt-success fa fa-check"></i> ' + data.chk_rezult).css('visibility', 'visible');
                            } else if (data.error) {
                                $('#modalbox button[type="submit"]').attr("disabled", "disabled");
                                console.log(data.error);
                            } else {
                                $('#modalbox button[type="submit"]').removeAttr("disabled");
                                console.log('{{ 'Some server error'|trans }}');
                            }
                        },
                        error: function (data) {
                            if (typeof (data.responseJSON) != 'undefined' && typeof (data.responseJSON.error) != 'undefined') {
                                $('#modalbox button[type="submit"]').attr("disabled", "disabled");
                                _this.next('div').append('<i class="txt-danger fa fa-ban"></i> ' + data.responseJSON.error).css('visibility', 'visible');
                            } else {
                                $('#modalbox button[type="submit"]').removeAttr("disabled");
                                console.log('{{ 'Some network error or access denied'|trans }}');
                            }
                        },
                        dataType: "json",
                        async: false
                    });
                    return false;
                });

                $(document).on('click', "a.main_ajax", function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    if ($(this).attr('disabled') && $(this).attr('href').search('remove-video-categories') != -1) {
                        JSErrorModalBox({msg: "{{ 'You can\'t delete category with movies or genres'|trans }}"});
                    } else {
                        ajaxPostSend($(this).attr('href'), $(this).data(), false);
                    }
                    $(this).closest('div.open').removeClass('open');
                    return false;
                });

                $(document).on('click', '#add_video_categories, a[id^="edit_video_categories_"]', function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    openModalBox($(this));
                    return false
                });

                $(document).on('click', "#modalbox button[type='reset'], #modalbox, #modalbox a.close-link, #modalbox a.close-link *", function (e) {
                    if (e.currentTarget != e.target) {
                        return;
                    }
                    e.stopPropagation();
                    e.preventDefault();
                    closeModalBox();
                    return false;
                });

                $(document).on('click submit', "#modalbox button[type='submit'], #modalbox form", function (e) {
                    if (e.currentTarget != e.target) {
                        return;
                    }
                    var sendData = {
                        id: $("#modalbox input[type='hidden']").val(),
                        category_name: $("#modalbox input[name='category_name']").val(),
                        num: $("#modalbox input[name='num']").val(),
                        censored: $("#modalbox input[name='censored']").prop('checked') ? 1: 0
                    };

                    e.stopPropagation();
                    e.preventDefault();
                    ajaxPostSend($("#modalbox form").attr('action'), sendData, false);
                    closeModalBox();
                    return false;
                });

                LoadDataTablesScripts(InitDatatable);

                var table = $('#datatable-1').DataTable( );
                table.on( 'row-reorder', function ( e, diff, edit ) {

                    if( diff.length < 2 ){
                        // shutdown table.redraw() for this situation
                        if( table.RowReorder )
                            table.RowReorder.c.update = false;
                        return false;
                    }

                    var bubbleUp = ( diff[0].oldPosition == edit.triggerRow[0]["0"] ) ? true : false;
                    var i = bubbleUp ? 1 : diff.length-2;
                    
                    var sendData = {
                        id: edit.triggerRow.data().RowOrder,
                        toPosition:    bubbleUp ? table.row( diff[1].node ).data().num : table.row( diff[diff.length-2].node ).data().num, 
                        fromPosition:  edit.triggerRow.data().num,
                        target_id: diff[i].node.id, 
                        direction: ( bubbleUp ? 'back' : 'forward' ),
                    };
                    
                    //console.log(sendData);
                    //table.RowReorder.c.update = true;
                    ajaxPostSend( '{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/video-categories-reorder', sendData );
                    
                } );
            });
        }

        document.addEventListener("DOMContentLoaded", yelp, false);

        var addVideoCategory = function(data){
            $("#modalbox").data('complete', 1);
            $('#modalbox').find('.devoops-modal-inner').html('<span>{{ 'Done'|trans }}! ' + (data.msg ? data.msg : '') +  '</span>');
            $('#datatable-1').DataTable().ajax.reload();
        };

        var addVideoCategoryError = function(data){
            $('#modalbox').find('.devoops-modal-inner').html('<span>{{ 'Error'|trans }}! ' + (data.error? data.error: '') +  '</span>');
            $("#modalbox").data('complete', 1);
        };

        var editVideoCategory = function(data){
            $("#modalbox").data('complete', 1);
            $('#modalbox').find('.devoops-modal-inner').html('<span>{{ 'Done'|trans }}! ' + (data.msg ? data.msg : '') +  '</span>');
            $('#datatable-1').DataTable().ajax.reload();
        };
        var editVideoCategoryError = function(data){
            $('#modalbox').find('.devoops-modal-inner').html('<span>{{ 'Error'|trans }}! ' + (data.error? data.error: '') +  '</span>');
            $("#modalbox").data('complete', 1);
        };
        
        var reorder = function(data){
            JSSuccessModalBox(data);
            $('#datatable-1').DataTable().ajax.reload();
        };
        var reorderError = function(data){
            JSErrorModalBox()(data);
            $('#datatable-1').DataTable().ajax.reload();
        };
        
        var removeVideoCategory = function (data) {
            $("#modalbox").data('complete', 1);
            $('#modalbox').find('.devoops-modal-inner').html('<span>{{ 'Done'|trans }}! ' + (data.msg ? data.msg : '') +  '</span>');
            $('#datatable-1').DataTable().ajax.reload();
        };
        var removeVideoCategoryError = function(data){
            $('#modalbox').find('.devoops-modal-inner').html('<span>{{ 'Error'|trans }}! ' + (data.error? data.error: '') +  '</span>');
            $("#modalbox").data('complete', 1);
        };
        
    function closeModalBox(){
        $("#modalbox").hide();
        $('#modalbox').find('.modal-header-name span').empty();
        $('#modalbox').find('.devoops-modal-inner').empty();
    }
    
    function openModalBox(obj){
        $('#modalbox').find('.modal-header-name span').text((obj.data('categoriesid')? '{{ 'Edit'|trans }}': '{{ 'Add'|trans }}') + ' {{ 'the category'|trans }}');
        if ($('#modalbox').find('.devoops-modal-inner').find('input').length == 0) {
            $('#modalbox').find('.devoops-modal-inner').html('\n\
                <div class="box-content">\n\
                    <form class="form-horizontal" role="form">\n\
                        <div class="form-group">\n\
                            <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Category'|trans }}</label>\n\
                            <div class="col-xs-10 col-sm-8">\n\
                                <span class="col-xs-8 col-sm-8">\n\
                                    <input type="hidden" name="id">\n\
                                    <input type="text" class="own_fields form-control " name="category_name" id="video_category_name">\n\
                                    <div class="bg-danger"></div>\n\
                                </span>\n\
                            </div>\n\
                            <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Number'|trans }}</label>\n\
                            <div class="col-xs-10 col-sm-8">\n\
                                <span class="col-xs-8 col-sm-8">\n\
                                    <input type="text" class="own_fields form-control " name="num" id="video_num">\n\
                                    <div class="bg-danger"></div>\n\
                                </span>\n\
                            </div>\n\
                            <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Age restriction'|trans }}</label>\n\
                            <div class="col-xs-10 col-sm-8">\n\
                                <span class="col-xs-8 col-sm-8">\n\
                                    <div class="checkbox">\n\
                                        <label>\n\
                                            <input type="checkbox" class="own_fields form-control " value="1" name="censored" id="video_censored">\n\
                                            <i class="fa fa-square-o small"></i>\n\
                                        </label>\n\
                                        <div class="bg-danger"></div>\n\
                                    </div>\n\
                                </span>\n\
                            </div>\n\
                        </div>\n\
                    </form>\n\
                </div>');
            $('#modalbox').find('.devoops-modal-bottom').html('<div class=pull-right no-padding">&nbsp;</div>\n\
                        <div class="pull-right no-padding">\n\
                            <button type="submit" class="btn btn-success pull-right">{{ 'Save'|trans }}</button>\n\
                            <button type="reset" class="btn btn-default pull-right" >{{ 'Cancel'|trans }}</button>\n\
                        </div>');
        }
        
        if (obj.data('categoriesid')) {
            $('#modalbox').find('.devoops-modal-inner').find('input[type="hidden"]').val(obj.data('categoriesid'));
            $('#modalbox').find('.devoops-modal-inner').find('input[name="category_name"]').val(obj.closest('tr').find('a:first').text());
            $('#modalbox').find('.devoops-modal-inner').find('input[name="num"]').val(obj.closest('tr').find('td:first').text());
        }
        $('#modalbox').find('.devoops-modal-inner').find('input[name="censored"]').prop('checked', obj.data('cat-censored') && ('' + obj.data('cat-censored')) == '1');
        $('#modalbox button[type="submit"]').removeAttr("disabled");
        $('#video_category_name').next('div').removeClass('bg-danger').css('visibility', 'hidden').html('&nbsp;');
        $('#video_num').next('div').removeClass('bg-danger').css('visibility', 'hidden').html('&nbsp;');
        $('#modalbox form').attr('action', obj.attr('href'));
        $("#modalbox").show();
        obj.closest('div.open').removeClass('open');
    }
