var url = 'test.php';
var divid = 'div_sort_pagination';

// add a jQuery method: when click sorting link,
// 1. dispaly a 'wait.gif' while processing;
// 2. put results in <div id="div_sort_pagination">
jQuery.fn.sortBy= function(sort_column) {
  $(this).find('img').attr('src', '../images/wait.gif').show();
  $.get(url, {sort:sort_column}, function(data){
    $("#"+divid).html(data);
  });
  return false;
}

//constract 2 dynamic buttons ('up' and 'down') to sort by 'async' and 'sync'.
$('th:gt(0)').each(function() {
  var t1 = $(this);
  var t2 = t1.text();
  var t3 = t2 + ' desc';
  var t = '<br /><a href="javascript:void(0);" ' +
    'onClick="$(this).sortBy(''+t2+'')"> ' +
    '<img src="../images/up.jpg" border="0" width="13" height="11" alt="up"> ' +
    '</a> n' +
    '<a href="javascript:void(0);" ' +
    'onClick="$(this).sortBy(''+t3+'')"> ' +
    '<img src="../images/down.jpg" border="0" width="13" height="11" alt="down">' +
    '</a>n';
  $(t).appendTo(t1);
});

// when mouse move over some columns,
// use 'qtip' to display details.
$("td span.active").each(function() {
  var content = $(this).html();
  $(this).qtip({
	content: content,
	show: 'mouseover',
	hide: 'mouseout',
	position: { corner: { target: 'topRight', tooltip: 'bottomLeft' } },
	style: {
	  tip: 'leftMiddle',
	  width: 120,
	  padding: 4,
	  background: '#A2D959',
	  color: 'black',
	  textAlign: 'center',
	  border: { width: 7, radius: 10, color: '#A2D959' },
	  tip: 'bottomLeft',
	  name: 'dark'
	}
  });
});

// suppose we have a <a href="test.php?page=2&sort=name">,
// make it ajax-style, not reload page, just refresh
// <div id="div_sort_pagination">
// 1. stop the default process which click the link.
// 2. use $.get to refresh the <div id="div_sort_pagination">.
$("tfoot td a, thead td a").each(function(index) {
  var $a = $(this);
  var t1 = $(this).attr('href');
  var turl = url+t1;
  $a.click(function(event) {
	event.preventDefault();
	$.get(turl, function(data){$("#"+divid).html(data)});
	return false;
  });
}); 

$('#form_id').bind('submit', function(event) {
  event.preventDefault();
  $.ajax({
	type: 'post',
	url: 'test.php',
	data: $('#form_id').serialize()+'&search=1',
	beforeSend: function() {
		$('#search').hide();
		$('#msg').show();
	},
	success: function(data) {
		$('#div_sort_pagination').hide().html(data).fadeIn(200);
		$('#search').show();
		$('#msg').hide();
	}
  });
  return false;
});