<script type="text/javascript">

    loadScript(plugin_path + "jqgrid/js/jquery.jqGrid.js", function(){
        loadScript(plugin_path + "jqgrid/js/i18n/grid.locale-en.js", function(){
            loadScript(plugin_path + "bootstrap.datepicker/js/bootstrap-datepicker.min.js", function(){

                // ----------------------------------------------------------------------------------------------------
                jQuery("#slider_grid").jqGrid({

                    url: "<?php echo base_url()?>slider/items_json/<?php echo @$slider_id?>",
                    datatype : "json",
                    height : '250',
                    colNames : ['Action','Title','Type', 'X', 'Y', 'HOffset', 'VOffset', 'Width','Height','Speed','Start','Text_th'],
                    colModel : [
                        { name : 'act', index:'act', sortable:false },
                        { name : 'title', index : 'title', editable : true},
                        { name : 'type', index : 'type', editable : true},
                        { name : 'x', index : 'x', align : "right", editable : true },
                        { name : 'y', index : 'y', align : "right", editable : true },
                        { name : 'hoffset', index : 'hoffset', align : "right", editable : true },
                        { name : 'voffset', index : 'voffset', align : "right", editable : true },
                        { name : 'width', index : 'width', editable : true},
                        { name : 'height', index : 'height', editable : true},
                        { name : 'speed', index : 'speed', editable : true},
                        { name : 'start', index : 'start', editable : true},
                        { name : 'text_th', index : 'text_th', editable : true}],


                    rowNum : 10,
                    rowList : [10, 20, 30],
                    pager : '#pager_slider_grid',
                    sortname : 'id',
                    toolbarfilter: true,
                    viewrecords : false,
                    sortorder : "asc",
                    gridComplete: function(){
                        var ids = jQuery("#slider_grid").jqGrid('getDataIDs');
                        for(var i=0;i < ids.length;i++){
                            var cl = ids[i];
                            be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('"+cl+"');\"><i class='fa fa-pencil'></i></button>";
                            se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('"+cl+"');\"><i class='fa fa-save'></i></button>";
                            ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('"+cl+"');\"><i class='fa fa-times'></i></button>";
                            jQuery("#slider_grid").jqGrid('setRowData',ids[i],{act:be+se+ca});
                        }
                    },
                    autowidth : true,
                    editurl : "<?php echo base_url()?>products/specs_add/<?php echo @$slider_id?>",
//                    caption : "",
                    multiselect : false

                });
                // ----------------------------------------------------------------------------------------------------

                jQuery("#slider_grid").jqGrid('navGrid', "#pager_slider_grid", {
                    edit : true,
                    add : true,
                    del : true  ,
                    refreshstate: "current"
                });

                // On Resize
//                jQuery(window).resize(function() {
//
//                    if(window.afterResize) {
//                        clearTimeout(window.afterResize);
//                    }
//
//                    window.afterResize = setTimeout(function() {
//
//                        /**
//                         After Resize Code
//                         .................
//                         **/
//
//                        jQuery("#jqgrid").jqGrid('setGridWidth', jQuery("#middle").width() - 32);
//
//                    }, 500);
//
//                });

                // ----------------------------------------------------------------------------------------------------

                /**
                 @STYLING
                 **/
                jQuery(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
                jQuery(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
                jQuery(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
                jQuery(".ui-jqgrid-pager").removeClass("ui-state-default");
                jQuery(".ui-jqgrid").removeClass("ui-widget-content");

                jQuery(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
                jQuery(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
                jQuery(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
                jQuery(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
                jQuery(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
                jQuery(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
                jQuery(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
                jQuery(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
                jQuery(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

                jQuery( ".ui-icon.ui-icon-seek-prev" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

                jQuery( ".ui-icon.ui-icon-seek-first" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

                jQuery( ".ui-icon.ui-icon-seek-next" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

                jQuery( ".ui-icon.ui-icon-seek-end" ).wrap( "<div class='btn btn-sm btn-default'></div>" );
                jQuery(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");

            });
        });
    });

    function preBGImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#BG_image').attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }
    function preLBGImage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#LBG_image').attr('src', e.target.result);
            };

            reader.readAsDataURL(input.files[0]);
        }
    }


</script>