    var select2Opt = {minimumResultsForSearch: -1, dropdownAutoWidth: false, width: '100%'};

    var conf = {
        form: '#form_',
        lang : '{{ app.js_validator_language }}',
        showHelpOnFocus : true,
        validateHiddenInputs: true,
        ignore: ['.ignore'],
        modules: 'jsconf',
        onSuccess: function () {
            var sendData = {};
            $('.own_field', this.form).each(function () {
                sendData[$(this).attr('name')] = $(this).is(':checkbox') ? ($(this).is(':checked') ? 1 : 0) : $(this).val();
            });
            JScloseModalBox();
            ajaxPostSend($(this.form).attr('action'), sendData, false, false, true);
            return false;
        },
        onError: function () {
            return false;
        }
    };

    function TestTable1() {
        $('#datatable-1').on('xhr.dt', function (e, settings, json) {
            if (typeof (json.data) == 'object') {
                var id, title, status;
                for (var i in json.data) {
                    id = json.data[i].id;
                    title = json.data[i].title;
                    status = json.data[i].status;

                    if (isNaN(json.data[i].must_watch)) {
                        json.data[i].must_watch = "{{ 'All'|trans }}";
                    }

                    json.data[i]['title'] = '<a class="main_ajax no_context_menu" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/video-advertise-list-json" data-id="'+ id +'">'+title+'</a>';

                    json.data[i].must_watch = json.data[i].must_watch == 'all' ? "{{'All'|trans}}" : json.data[i].must_watch;
                    //json.data[i]['status'] = status ? "<span class='' data-filter='status'>{{ 'Published'|trans }}</span>" : "<span class='' data-filter='status'>{{ 'Not published'|trans }}</span>";
                    json.data[i].status = '\
                       <div class="mswitch">\
                            <input type="checkbox" \
                                   id="ads_status_'+ json.data[i].id +'"\
                                   name="form[status]" readonly="readonly" class="form-control" \
                                   ' + ( json.data[i].status ? 'checked="checked"' : '' ) +'\
                                   data-adsid="' + json.data[i].id + '"\
                                   data-adsstatus="' + (1-json.data[i].status) +'">\
                            <label class="label-success" \
                                   title="' + ( json.data[i].status ? "{{'Switched on'|trans}}" : "{{'Switched off'|trans}}" ) + '" \
                                   for="ads_status_'+ json.data[i].id +'"></label>\
                        </div>\
                        ';

                    json.data[i].operations = '<div class="col-xs-3 col-sm-8 ddd">\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 class="main_ajax no_context_menu" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/video-advertise-list-json" data-id="'+ id +'">\n\
                                                                    <span>{{ 'Edit'|trans }}</span>\n\
                                                                </a>\n\
                                                            </li>\n\
                                                            <li>\n\
                                                                <a class="main_ajax no_context_menu" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/toggle-video-ads-status" data-adsstatus="'+(status ? 0: 1)+'" data-adsid="'+id+'">\n\
                                                                    <span>'+(status ? "{{ 'Unpublish'|trans }}": "{{ 'Publish'|trans }}")+'</span>\n\
                                                                </a>\n\
                                                            </li>\n\
                                                            <li>\n\
                                                                <a class="main_ajax no_context_menu" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/remove-video-ads" data-adsid="'+id+'">\n\
                                                                    <span>{{ 'Delete'|trans }}</span>\n\
                                                                </a>\n\
                                                            </li>\n\
                                                        </ul>\n\
                                                    </div>';

                }
            }
        }).dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/video-advertise-list-json"
            },
            "language": {
                "url": "{{ app.datatable_lang_file }}"
            },
            "paging":   true,
            "ordering": true,
            "scrollCollapse": true,
            "bFilter": true,
            "bPaginate": true,
            "lengthChange": true,
            "info":     true,
            
            {% if attribute(app, 'dropdownAttribute') is defined %}
            {{ main_macro.get_datatable_column(app['dropdownAttribute']) }}
            {% endif %}

            fixedHeader: {
                header: true,
                headerOffset: $('header.navbar').height()
            },

            "aoColumnDefs": [ 
                { className: "action-menu", "targets": [ -1 ] },
                { "targets": [ -1 ], "orderable": false},
                { "targets": [ -1, -2, -3, -4, -5], "searchable": false}
            ]
        }).prev('.dataTables_processing').hide('');
    }

    function yelp() {
        $(document).ready(function () {
            
            LoadDataTablesScripts(TestTable1);

            $.validate(conf);

            $(document).on('click', "a.main_ajax", function (e) {
                e.stopPropagation();
                e.preventDefault();
                var _this = $(this);

                ajaxPostSend($(this).attr('href'), $(this).data(), false, false);
                _this.closest('div.open').removeClass('open');
                return false;
            });

            $(document).on('change', ".mswitch input", function(e){
                ajaxPostSend('{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/toggle-video-ads-status', $(this).data() );
            });


            $(document).on('click', '#add_video_ads', function (e) {
                e.stopPropagation();
                e.preventDefault();
                openModalBox();
                return false
            });

            $(document).on('click', '#form_save', function(e){
                e.stopPropagation();
                e.preventDefault();

                if ($(conf.form).isValid({}, conf, true)) {
                    conf.onSuccess();
                } else {
                    conf.onError();
                }
                return false;
            });


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

function openModalBox(obj){

    if (obj && obj.data && obj.data.length) {
        $('#modalbox').find('.modal-header-name span').text( "{{'Edit'|trans}}" + " {{'advertising'|trans}}" );
        $('#modalbox').find('.devoops-modal-inner').html( $("#modal_video_ads_inner").tmpl(obj.data) );
        $("select", conf.form).each(function(){
            var objKey = $(this).attr('id').replace('form_', '');
            if (obj.data[0][objKey]) {
                $(this).val(obj.data[0][objKey]).trigger('change');
            }
        });

    } else {
        $('#modalbox').find('.modal-header-name span').text( "{{'Add'|trans }}" + " {{'advertising'|trans}}" );
        $('#modalbox').find('.devoops-modal-inner').html( $("#modal_video_ads_inner").tmpl() );
    }

    $('#modalbox').find('.devoops-modal-bottom').html('\n\
                <div class="col-xs-12">\n\
                    <input type="submit" id="form_save"  class="btn btn-success col-sm-2 pull-right" value="{{ 'Save'|trans }}" />\n\
                    <button type="reset" id="form_reset" class="btn btn-default col-sm-2 pull-right" >{{ 'Cancel'|trans }}</button>\n\
                </div>');


    $('#form_denied_categories').select2(select2Opt);

    $('.form-group .i-hint').tooltip({
        animation: true,
        placement: "left"
    });

    var select = $( "#form_must_watch" );
    var handle = $( "#slider-handle" );

    var slider = $( "#slider" ).slider({
      value: select[ 0 ].options.length - 1 - select[ 0 ].selectedIndex,
      min: 0,
      max: select[ 0 ].options.length - 1,

      create: function() {
        handle.text( select[ 0 ].options[ select[ 0 ].selectedIndex ].innerText );
      },
      slide: function( event, ui ) {
        var max = $( "#slider" ).slider( "option", "max" );
        //$( "#amount" ).val( ui.value );
        handle.text( select[ 0 ].options[ max - ui.value ].innerText );
        select[ 0 ].selectedIndex = max - ui.value;
      }
    });
    
    select.on( "change", function() {
        slider.slider( "value", select[ 0 ].options.length - 1 - this.selectedIndex );
        handle.text( select[ 0 ].options[ select[ 0 ].selectedIndex ].innerText );
    }).hide();
    
    
    $("#modalbox").addClass("modal-vc-ads").show();
}