/*!
 * Pagination and sorting using CF and Jquery
 * 
 * Builds a table and paging links that display query data returned from CF.
 * Allows for sorting by clicking on table headers.
 * Includes highlighting of current page link and showing of up to 20 page numbers on page at any one time.
 * CF returns only the records needed for each page (ie 10 at a time) rather than the whole record set.
 * Has previous and next links at either end of page links. 
 *
 *12/02/10 COMMENTED OUT THE CATEGORY FILTER - NEED TO ADD ANOTHER PARAMETER TO BUILDTABLE IF I WANT TO REINSTATE IT
 *
 */
 
function buildTable(pageNumber,orderBy,filter,filter3)
{
	
	$.getJSON('/objects/caseStudies/jsonCaseStuds2.cfc?method=pageInfo&pageNumber=' + pageNumber + '&orderBy=' + orderBy + '&filter=' + filter + '&filter3=' + filter3, function(data)
	{
		//GOTCHA!! THE JSON VARIABLES RETURNED FROM A CFC ALL SEEM TO BE IN UPPER CASE. 
		//AS JS IS CASE SENSITIVE REMEMBER TO REF THEM IN UPPERCASE IN THE JS CODE OR CODE WILL FAIL; 
		//alert(data.FROM);
		var from = data.FROM;
		var numberOfRecordsOnPage = data.NUMBEROFRECORDSONPAGE;
		var numberOfPages = data.NUMBEROFPAGES;
		var recordCount = data.RECORDCOUNT;
		var to = data.TO;
		var nextPageNumber = pageNumber + 1;
		var prevPageNumber = pageNumber - 1;
		
		//Display query set info
		var html = '<div><P><b>' + recordCount + ' ' + 'Genuine UK Franchisee Case Studies</b></p></div>';
	    //update filter text
		//var catSel = $('#category option:selected').val();
		//update filter text
		var regionSel = $('#regionn option:selected').val();
		//alert(regionSel);
		var franTypeSel = $('#franchiseTypeDescription option:selected').val();
		
		//var yearSel = $('#year option:selected').val();
		//alert(regionSel);
		
		
		
		//start string for building record output
		var html2 = '<div id="t1" class="pagination" align="left">'; 
		
		
		//A CF QUERY PASSES BACK AN OBJ WITH 2 PROPERTIES. COLUMNS AND DATA. COLUMNS IS AN ARRAY. DATA IS AN ARRAY OF ARRAYS.
		//so each array in DATA represents a row in database 
		 $.each(data.RECORDSTOGOBACK.DATA, function(intIndex, objValue) 
		  {
			html2 += '<h4>' + objValue[0] + '</h4><h5>' +  objValue[5] + ' - '+ objValue[4] +'</h5><h6>' +  objValue[6] +  '</h6><p><img src="/images/franchisees/' + objValue[2] +'" width="80" align="left" border="0">'+ objValue[1] +'</p><p><a href="franchisee_template2.cfm?StoryID=' +  objValue[8] +'">Read More...</a><hr />';
		  }
	);
		html2 += '</div>';
        
		//empty div of data before appending new html or else it adds more tables 
		$('#displayDiv').empty().append(html);
		$('#queryData').empty().append(html2); 
		
	
		//show if they have more than 10 records i.e. one page
		 if(recordCount > 10){ 
		//start build paging links
		var currentPage = 0;
	    //this is where all created page links are added
		var $pager = $('<div class="pager" align="center"></div>');
		for (var page = 1; page < numberOfPages + 1; page++) {
		    	
		 //expression ensures no more than 20 page links are shown at one time   
		 if((pageNumber > (page - 10)) && (pageNumber < (page + 10)))
		 {
		    //for each page link build a span tag and bind a click handler to each one that will call build table each time it is clicked
		      $('<span class="page-number"></span>').html('<span id="' + page + '">' + page + ' </span>').bind('click', {newPage: page}, function(event) {
		          currentPage = event.data['newPage'];
		          buildTable(currentPage,orderBy,regionSel,franTypeSel);//builds table each time a page link is clicked
		        }).appendTo($pager);// append each span tag/link to pager div
		     
		   }
		 }
		    
		    
		  //highlight current pageNumber  
		  $pager.find('#' + pageNumber).addClass('selectedLink');
		   
		 }
		 
		  //the links that will take user one place forward and on place back
		  var $previousLink = $('<a href="" id="prev">   Previous   </a>');
		  var $nextLink = $('<a href="" id="next" class="nextlinkClass">   Next   </a>');
		  //previous and next links with handler that prevents the default event of hyperlink, and calls buildTable() on each click;
		  
		//show if they have more than 10 records i.e. one page
		 if(recordCount > 10){ 
		  $nextLink.appendTo($pager).click(function(event){event.preventDefault();buildTable(nextPageNumber,'companyName',regionSel,franTypeSel);});
		 }
		 //show if not on first page
		 if(pageNumber > 1){
		  $previousLink.prependTo($pager).click(function(event){event.preventDefault();buildTable(prevPageNumber,'companyName',regionSel,franTypeSel);});
         }
           //refers to table with id of t1 just built
   		   var $table = $('#t1');
       
   		//show if they have more than 10 records i.e. one page
  		 if(recordCount > 10){ 
   		   //place paging links before and after table
		   $pager.clone(true).insertBefore($table);
           $pager.insertAfter($table);
  		 }
		  
	 });

	
};	


$(document).ready(function()
{
	
	 $("#loading").ajaxStart(function(){
		   $(this).show();
		 });

	 $("#loading").ajaxStop(function(){
	   $(this).hide();
	 });
	
	
	//on select event to fire json call with value of selected option, other default to 1 and name
	$('#regionn').change(function(){buildTable(1,'companyName',$("#regionn option:selected").val(),$("#franchiseTypeDescription option:selected").val());});	
	
	//on select event to fire json call with value of selected option, other default to 1 and name
	//$('#category').change(function(){buildTable(1,'companyName',$("#regionn option:selected").val(),$("#category option:selected").val(),$("#franchiseTypeDescription option:selected").val());});	
	
	//on select event to fire json call with value of selected option, other default to 1 and name
	$('#franchiseTypeDescription').change(function(){buildTable(1,'companyName',$("#regionn option:selected").val(),$("#franchiseTypeDescription option:selected").val());});
	
//builds table on page load	
buildTable(1,'StoryID',0,0);
});