var CustomerCaseTables = function () {

    var initCustomerTable = function() {

        var oTable = $('#customer_table').dataTable( {
            "aoColumnDefs": [
                {"bSortable": false, "aTargets": [ 5 ] }
            ],
            
            // nb itemps per page
            "iDisplayLength": 10,
			
			"bProcessing"	: true,            
			"bServerSide"	: true, // server side processing
			"sAjaxSource"	: "assets/php/customer_case.php", // ajax source
			"bJQueryUI"		: true,
			"aaSorting"		: [[ 0, "asc" ]] // set first column as a default sort by asc
        });
		
		jQuery('#customer_table .group-checkable').change(function () {
			var set = jQuery(this).attr("data-set");
			var checked = jQuery(this).is(":checked");
			jQuery(set).each(function () {
				if (checked) {
					$(this).attr("checked", true);
					$(this).parents('tr').addClass("active");				
					$(this).parents('span').addClass("checked");
				} else {
					$(this).attr("checked", false);
					$(this).parents('tr').removeClass("active");
					$(this).parents('span').removeClass("checked");
				}                    
			});
			jQuery.uniform.update(set);
		});

		jQuery('#customer_table').on('change', '.checkboxes', function(){
			 $(this).parents('span').addClass("active");
		});
		
        jQuery('#customer_table_wrapper .dataTables_filter input').addClass("form-control input-medium input-inline"); // modify table search input
        //jQuery('#customer_table_wrapper .dataTables_length select').addClass("form-control input-small"); // modify table per page dropdown
        //jQuery('#customer_table_wrapper .dataTables_length select').select2(); // initialize select2 dropdown	
		//Modified by Lamine			
    }

    var initCaseTable = function() {
        
		/*
        * Initialize DataTables, with no sorting on the 'details' column
        */
        function fnFormatDetails ( oTable, nTr )
        {
            var aData = oTable.fnGetData( nTr );
            var sOut = '<table>';
            sOut += '<tr><td>SN:</td><td>'+aData[2]+'</td></tr>';
            sOut += '<tr><td>Parameters:</td><td>'+aData[3]+'</td></tr>';
            sOut += '<tr><td>CSS grade:</td><td>'+aData[4]+'</td></tr>';
            sOut += '<tr><td>Others:</td><td>Could provide a link here</td></tr>';
            sOut += '</table>';
             
            return sOut;
        }

        /*
         * Insert a 'details' column to the table
         */
        var nCloneTh = document.createElement( 'th' );
        var nCloneTd = document.createElement( 'td' );
        nCloneTd.innerHTML = '<span class="row-details row-details-close"></span>';
         
        $('#case_table thead tr').each( function () {
            this.insertBefore( nCloneTh, this.childNodes[0] );
        } );
         
        $('#case_table tbody tr').each( function () {
            this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
        } );
		
		
		var oTable = $('#case_table').dataTable( {           
            "aoColumnDefs": [
                { "bSortable": false, "aTargets": [ 0,9 ] }
            ],
            "aaSorting": [[7, 'desc']],
             "aLengthMenu": [
                [5, 15, 20, -1],
                [5, 15, 20, "All"] // change per page values here
            ],
            // set the initial value
            "iDisplayLength": 10,
        });
		
		jQuery('#case_table .group-checkable').change(function () {
			var set = jQuery(this).attr("data-set");
			var checked = jQuery(this).is(":checked");
			jQuery(set).each(function () {
				if (checked) {
					$(this).attr("checked", true);
					$(this).parents('tr').addClass("active");								
					$(this).parents('span').addClass("checked");
				} else {
					$(this).attr("checked", false);
					$(this).parents('tr').removeClass("active");			
					$(this).parents('span').removeClass("checked");
				}                    
			});
			jQuery.uniform.update(set);
		});

		jQuery('#case_table').on('change', 'tbody tr .checkboxes', function(){
			 $(this).parents('tr').toggleClass("active");
		});
		
        jQuery('#case_table_wrapper .dataTables_filter input').addClass("form-control input-medium input-inline"); // modify table search input
        //jQuery('#case_table_wrapper .dataTables_length select').addClass("form-control input-small"); // modify table per page dropdown
        //jQuery('#case_table_wrapper .dataTables_length select').select2(); // initialize select2 dropdown
		//Modified by Lamine

        /* Add event listener for opening and closing details
         * Note that the indicator for showing which row is open is not controlled by DataTables,
         * rather it is done here
         */
        $('#case_table').on('click', ' tbody td .row-details', function () {
            var nTr = $(this).parents('tr')[0];
            if ( oTable.fnIsOpen(nTr) )
            {
                /* This row is already open - close it */
                $(this).addClass("row-details-close").removeClass("row-details-open");
                oTable.fnClose( nTr );
            }
            else
            {
                /* Open this row */                
                $(this).addClass("row-details-open").removeClass("row-details-close");
                oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
            }
        });
    }

    return {

        //main function to initiate the module
        init: function () {
            
            if (!jQuery().dataTable) {
                return;
            }

            initCustomerTable();
            initCaseTable();
        }

    };

}();