/*
	 * Add functionality to add buttons to toolbar instead of pager
	 * Why can't we use the navButtonAdd method by passing toolbar as the element
	 *  1. By default toolbar:[true,"both/top/bottom"] adds a div perfectly between the table caption and header. But there is not table within this div. Due to this structure difference we can't make use of navButtonAdd
	 *      2. We can go ahead by appending table inside toolbar div and then reusing navButtonAdd. But that still needs some more customziation. So went ahead with a new method
	 */
	jQuery.fn.extend({
	/*
	 *
	 * The toolbar has the following properties
	 *  id of top toolbar: t_
	<tablename>
	 *  id of bottom toolbar: tb_
	<tablename>
	 *  class of toolbar: ui-userdata
	 * elem is the toolbar name to which button needs to be added. This can be
	 *  #t_tablename - if button needs to be added to the top toolbar
	 *  #tb_tablename - if button needs to be added to the bottom toolbar
	 */
	    toolbarButtonAdd: function(elem,p){
	       p = jQuery.extend({
	                caption : "newButton",
	                title: '',
	                buttonicon : 'ui-icon-newwin',
	                onClickButton: null,
	                position : "last"
	              }, p ||{});
	        var $elem = jQuery(elem);
	    var tableString="<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"color:#FFF;width:auto;\">";
	    tableString =tableString + "<tbody><tr></tr></table>";
	 
	      /*
	    * Step 1: check whether a table is already added. If not add
	    * Step 2: If there is no table already added then add a table
	    * Step 3: Make the element ready for addition to the table
	    * Step 4: Check the position and corresponding add the element
	    * Step 5: Add other properties
	    */
	        return this.each(function() {
	        if( !this.grid)  { return; }
	        if(elem.indexOf("#") != 0) {
	            elem = "#"+elem;
       }
	        //step 2
	        if(jQuery(elem).children('table').length === 0){
	            jQuery(elem).append(tableString);
	        }
	        //step 3
	        var tbd = jQuery("<td></td>");
	        jQuery(tbd).addClass('ui-pg-button ui-corner-all').append("<div class='ui-pg-div'><span class='ui-icon "+p.buttonicon+"'></span>"+p.caption+"</div>").attr("title",p.title  || "").click(function(e){
	        if (jQuery.isFunction(p.onClickButton) ) {  p.onClickButton(); }
	        return false;
	        })
	             .hover(
	        function () {jQuery(this).addClass("ui-state-hover");},
	        function () {jQuery(this).removeClass("ui-state-hover");}
	        );
	        if(p.id) {jQuery(tbd).attr("id",p.id);}
	        if(p.align) {jQuery(elem).attr("align",p.align);}
	        var findnav=jQuery(elem).children('table');
	        if(p.position ==='first'){
            if(jQuery(findnav).find('td').length === 0 ) {
	                jQuery("tr",findnav).append(tbd);
	            } else {
	                jQuery("tr td:eq(0)",findnav).before(tbd);
	            }
	        } else {
	            jQuery("tr",findnav).append(tbd);
	                }
	    });//this.each()
	     }
	});