/*
cgCreate - Pagination Script
Requirements: Jquery Version 1.1.3.1 or higher.

args:  (con,item,num,nav)
	con: css selector of the element containing items to be grouped into pages
		ex: "ul.container", defaults to "#con" if unspecified
	item -
		def: css selector of elements to be grouped
		ex: "ul.container li", defaults to ".item" if unspecified
	num -
		def: integer, number of items per group/page
		ex: 4, defaults to 10 if unspecified
	nav -
		def: css selector of containing element for navigation controls
		ex: "#nav", creates .cgNav inside of the container if unspecified


css classes:
.hide -> Default property should be{ display:none}
.sel -> Selected page in paging controls

.firstBtn
.prevBtn
.nextBtn
.lastBtn
.pg1, .pg2...

*/

function cgCreate(con,pitem,num,nav)
{	
	var maxNumbers = 0;

	if(!con){	var nav = "#con";	}
	if(!pitem){	var nav = ".item";	}
	if(!num || num==0){	var num = 10;	}
	
	//Check to make sure the container exists
	if($(con)[0]){
		if(!nav){$(con).prepend("<div class='cgNav'></div>"); var nav = con+" "+".cgNav"; }

		var group = 1;
		var total= Math.ceil($(con+" "+pitem).length/num);
		var totalItems = $(con+" "+pitem).length;
		
		//Create numbered navigation for each page/group.
		var numArray = new Array();
		for(i=0;i<total;i++)
		{	
			numArray[i]=document.createElement("a");
			numArray[i].name = (i+1);
			numArray[i].className ="num"+(i+1);
			numArray[i].href="#";
			numArray[i].innerHTML = (i+1);
			$(numArray[i]).click(function() { group=$(this).attr('name'); cg_Switch(nav); return false; });
			
			for(e=0;e<num;e++)
			{
				if($(con+" "+pitem)[e+(i*num)]){
					$(con+" "+pitem)[e+(i*num)].className+=" pg"+(i+1);
				}
			}
		}

		/*$(nav).append("<span class='numbers'></span>");
		for(x in numArray)
		{
			$(nav+" .numbers")[0].appendChild(numArray[x]);
			if(x!=(numArray.length-1)){
				$(nav+" .numbers").append("<span> | </span>");
			}
		}*/
		
		//Display first, last, next and previous buttons
		if(totalItems>num){
			
			$(nav).append("<span class='disPg'>Showing "+(1 +((group-1)*num))+"-"+(16 +((group-1)*num))+" of "+totalItems+"</span>");
			var forWard = "<a href='#' class='nextBtn'>next</a><a href='#' class='lastBtn'>&gt;&gt;</a>";
			var backWard = "<a href='#' class='firstBtn'>&lt;&lt;</a><a href='#' class='prevBtn'>prev</a>";
			$(nav).append(backWard+forWard); 
			
			$(nav+" .numbers").remove();
			$(".firstBtn").click(function() {group=1; cg_Switch(nav); return false; });
			$(".prevBtn").click(function() {group--; cg_Switch(nav); return false; });
			$(".nextBtn").click(function() {group++; cg_Switch(nav); return false; });
			$(".lastBtn").click(function() {group=total; cg_Switch(nav); return false; });
			cg_Switch(nav);
		}
		
		
		
	}
	
	function cg_Switch(nav)
	{
		//keep group within boundaries
		if(group>total){group = total;}
		if(group<1){group=1;}

		//hide all *items except for the ones with the dynamic class
		$(con+" "+pitem).addClass("hide");
		$(con+" .pg"+group).removeClass("hide");
		
		//add sel class to selected page in navigation controls
		$(nav+" .numbers a").removeClass("sel");
		$(nav+" .numbers .num"+group.toString()).addClass("sel");
		
		var stN = 1 +((group-1)*num);
		var enN = num +((group-1)*num);
		$(nav+" .disPg").html("<span class='disPg'>Showing "+stN+"-"+enN+" of "+totalItems+"</span>");
	}
}