var columnDefs = [
    // this row shows the row index, doesn't use any data from the row
   {headerName: "checkbox",field: "chck", cellStyle:{"text-align":"center"},checkboxSelection:true,
				headerCellTemplate: "<span style='padding-top:10px;padding-left:4px;'><input type='checkbox' id='picb' style='width:20px;'></span>" },
				 
    {headerName: "Athlete", field: "athlete", width: 150},
    {headerName: "Age", field: "age", width: 90},
    {headerName: "Country", field: "country", width: 120},
    {headerName: "Year", field: "year", width: 90},
    {headerName: "Date", field: "date", width: 110},
    {headerName: "Sport", field: "sport", width: 110},
    {headerName: "Gold", field: "gold", width: 100},
    {headerName: "Silver", field: "silver", width: 100},
    {headerName: "Bronze", field: "bronze", width: 100},
    {headerName: "Total", field: "total", width: 100}
];

var gridOptions = {
    enableColResize: true,
    virtualPaging: true, // this is important, if not set, normal paging will be done 
    rowDeselection: true,
    columnDefs: columnDefs,
	headerHeight:40,
	rowSelection: 'multiple'
};
	
function setRowData(allOfTheData) {
    var dataSource = {
        rowCount: null, // behave as infinite scroll
        pageSize: 100,
        overflowSize: 100,
        maxConcurrentRequests: 2,
        maxPagesInCache: 2,
		
        getRows: function (params) {
            console.log('asking for ' + params.startRow + ' to ' + params.endRow);
            // At this point in your code, you would call the server, using $http if in AngularJS.
            // To make the demo look real, wait for 500ms before returning
            setTimeout( function() {
                // take a slice of the total rows
                var rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
                // if on or after the last page, work out the last row.
                var lastRow = -1;
                if (allOfTheData.length <= params.endRow) {
                    lastRow = allOfTheData.length;
                }
                // call the success callback
                params.successCallback(rowsThisPage, lastRow);
            }, 500);
        }
    };

    gridOptions.api.setDatasource(dataSource);
}
function callback(){
rowindex++;
//row++;
gridOptions.api.addVirtualRowListener("virtualRowRemoved", rowindex,callback) ;
		if(document.getElementById("picb").checked == true){
		row++;
console.log(rowindex+"----"+row);
		console.log($('.ag-row [row="'+parseInt(row)+'"]'));
		$('div [row='+parseInt(row)+']').find('.ag-selection-checkbox').trigger('click');
		
		}
}
var rowindex=0;
var row=0;
var startcounter=0;
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {

    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
	
	
	/*gridOptions.api.addVirtualRowListener("virtualRowSelected", 2, function(params){console.log("  item select listenr");
	console.log(params);
	
	}) ;*/
	document.querySelector('#picb').addEventListener('click', function()
				{  
				if(document.getElementById("picb").checked == true)
					{ 
					rowindex=0;
						//$('.ag-body-viewport').scrollTop(0);
						gridOptions.api.ensureIndexVisible(1);
						window.setTimeout(function(){
						 $('.ag-row').each(function(){
									 startcounter++;
									//$(this).find('.ag-selection-checkbox').prop('checked', true);
									//$(this).find('.ag-selection-checkbox').attr('checked','checked');
									 $(this).find('.ag-selection-checkbox').trigger('click');
										row=$(this).attr("row");
									});
									console.log("row click set===>"+row);
									gridOptions.api.addVirtualRowListener("virtualRowRemoved", rowindex,callback) ;
									},1000);
					}    
				else
					{ 
					startcounter=0;
					rowindex=0;
					row=0;
						gridOptions.api.deselectAll();
					}    
			
				});

    // do http request to get our sample data - not using any framework to keep the example self contained.
    // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
    var httpRequest = new XMLHttpRequest();
    httpRequest.open('GET', 'olympicWinners.json');
    httpRequest.send();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var httpResponse = JSON.parse(httpRequest.responseText);
            setRowData(httpResponse);
        }
    };
	
 
	
});