
    var conf = {
        lang : '{{ app.js_validator_language }}',
        showHelpOnFocus : true,
        validateHiddenInputs: true,
        modules: 'jsconf',

        onkeyup: false,
        errorClass: "error",

        onError: function () {
            return false;
        }

    };

    function TestTable1() {
        $('#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 no_context_menu' 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 class='no_context_menu' 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 no_context_menu' " + (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 class='no_context_menu' href='{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/edit-video-categories' data-categoriesid='" + id + "' data-cat-censored='" + censored + "' 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 }}"
            },
            {% 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 () {

            //$.validate(conf);

            $(document).on('change', '#video_category_name', function (e) {
                e.stopPropagation();
                e.preventDefault();
                var _this = $(this);

                _this.next('div.name-check').html('').hide();
                //$('#modalbox button[type="submit"]').removeAttr("disabled");

                if (_this.val().replace(/\s/ig, '').length) {
                    var sendData = {
                        category_name: _this.val(),
                        id: _this.prev('input[name="id"]').val()
                    };
                    ajaxPostSend('{{app.request_context.baseUrl}}/{{app.controller_alias}}/check-video-categories-name', sendData);
                }
                return false;
            });

            $(document).on('change', '#video_num', function (e) {
                e.stopPropagation();
                e.preventDefault();
                var _this = $(this);

                _this.next('div.name-check').html('').hide();
                //$('#modalbox button[type="submit"]').removeAttr("disabled");

                _this.validate( {}, conf.lang );

                if ( !_this.hasClass(conf.errorClass) ) {
                    var sendData = {
                        category_num: _this.val(),
                        id: $('#modalbox').find('input[name="id"]').val()
                    };
                    ajaxPostSend('{{app.request_context.baseUrl}}/{{app.controller_alias}}/check-video-categories-number', sendData);
                }
                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;
                }

                if ( $("#modalbox form").isValid({}, conf, true) ) {
                    var sendData = {
                        id: $("#modalbox input[name='id']").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(TestTable1);

            var table = $('#datatable-1').DataTable( );
            table.on( 'row-reorder', function ( e, diff, edit ) {
                /**
                diff - Array of TR dom elements between start position and droped position
                edit.triggerRow - points to the dragable row (triggerRow)
                */
                //var result = 'Reorder started on row: '+edit.triggerRow.data()+'<br>';
                //console.log( edit.triggerRow.data().number );
                //console.log( diff[i] );

                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 );

                //notty('<span>Done!</span>', 'success');

            } );
        });
    }

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

    var addVideoCategory = function(data){
        JSSuccessModalBox(data);
        $('#datatable-1').DataTable().ajax.reload();
    };

    var addVideoCategoryError = function(data){
        JSErrorModalBox(data);
    };

    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 category'|trans }}' : '{{ 'Add category'|trans }}' );
        if ($('#modalbox').find('.devoops-modal-inner').find('input').length == 0) {
            $('#modalbox').find('.devoops-modal-inner').html('\n\
                <form class="form-horizontal" role="form">\n\
                    <div class="box-content">\n\
                        <div class="form-group">\n\
                            <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Category'|trans }}<span class="icon-required">*</span></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"  data-validation="required"  id="video_category_name">\n\
                                    <div class="name-check"></div>\n\
                                </span>\n\
                            </div>\n\
                        </div>\n\
                        <div class="form-group">\n\
                            <label class="col-sm-3 control-label col-sm-offset-1">{{ 'Order'|trans }}<span class="icon-required">*</span></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"  data-validation="required number"  id="video_num">\n\
                                    <div class="name-check"></div>\n\
                                </span>\n\
                            </div>\n\
                        </div>\n\
                        <div class="form-group form-group-checkbox">\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-inline">\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>\n\
                                    <div class="bg-danger"></div>\n\
                                </span>\n\
                            </div>\n\
                        </div>\n\
                    </div>\n\
                </form>');
            $('#modalbox').find('.devoops-modal-bottom').html('\
                <div class="col-xs-12">\n\
                    <button type="submit" class="btn btn-success col-sm-2 pull-right">{{ 'Save'|trans }}</button>\n\
                    <button type="reset"  class="btn btn-default col-sm-2 pull-right" >{{ 'Cancel'|trans }}</button>\n\
                </div>');
            $.validate(conf);
        }
        
        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");
        $('#modalbox form').attr('action', obj.attr('href'));
        $("#modalbox").show();
        obj.closest('div.open').removeClass('open');
    }
