/***********************************
 *
 *	Critter Tabbed category view
 *
 ***********************************/


/******************************************
	Function used to compare two objects
*******************************************/
$.fn.equals = function( compareTo ) 
{
	if ( !compareTo || !compareTo.length || this.length != compareTo.length )
	{
		return false;
	}
	for ( var i=0; i< this.length; i++ ) 
	{
		if ( this[i] !== compareTo[i] ) 
		{
			return false;
		}
	}
	return true;
} 


/*****************************************
	pagination 
******************************************/
$.fn.paginate = function(  )
{
	// pad paginators
	$("#paginators a:nth-child(2)").css("margin", "18px 10px 0 10px");
	// light up first paginator
	$("#paginators a:first").css("background-position", "0 0");
	
	// hide 4-11
	for ( var i = 0; i < 12; i++ )
	{
		if ( i < 4 ) { this.eq(i).show(); }
		else { this.eq(i).hide(); }
	}
	
	var cat = this;

	$("#paginators a").click( function( event )
	{
		// switch the highlighted icon to the first one	
		$("#paginators a").css( "background-position" , "0 -13px" );
		$(this).css("background-position" , "0 0");					

		for ( var i = 0; i < 12; i++ )
		{
			if ( $(this).is(":first-child") )
			{
				//show 0 - 3, hide 4 - 11
				if ( i >= 0 && i < 4 ) { cat.eq(i).show(); } else { cat.eq(i).hide(); }
			}
			else if ( $(this).is(":last-child") )
			{
				// show 4-7, hide 0 - 3 and 8 - 11	
				if ( i > 3 && i < 8 ) { cat.eq(i).show(); } else { cat.eq(i).hide(); }	
			}
			else
			{	
				// show 8-11 and hide 0-7
				if ( i > 7 ) { cat.eq(i).show(); } else { cat.eq(i).hide(); }
			}
		}
		return false;
	});
}

/*****************************************
	Main 
******************************************/
$( function() 
{	
	$(".cat").not(":first").hide();										// hide all category div except the first one
	
	$(".cat:first").before("<div id='tabTop'></div>");					// add tab topper for rounded corners
	$("#tabTop").css("background-position" , "0 -10px");
																		
																		// add controls at the bottom of first div
	$(".cat:first").after("<div class='catBottom'><div id='paginators'><a href='#' class='paginator'></a><a href='#' class='paginator'></a><a href='#' class='paginator'></a></div><a href='" + 
			$(".cat:first").attr("name") + "'id='viewAll'>view all</a></div>");
	
	
	$("#paginators a:nth-child(2)").css("margin", "0 10px 0 10px");		// pad paginators
	
	$("#paginators a:first").css("background-position", "0 0");			// light up first paginator

	
	$(".cat h3").remove();												// remove section title h3
	
	$(".cat:first .largeThumb").paginate();

	
	$("#catNav a").click( function( event )								// tab click handler 
	{				
		$(".cat").hide();												// hide all category divs
		
		$("#catNav a").addClass("inactiveTab").removeClass("activeTab");// set all of the buttons to use the inactive class
		
		$(this).removeClass("inactiveTab").addClass("activeTab");		// remove inactive from the button clicked and assign the active class
				
		$(".catBottom").remove();										// remove any controls div and tab topper				
		$("#tabTop").remove();

		var curTab = event.target.name;									// store the name of the selected button
		
		$(".cat[id=" + curTab + "]").show()								// show the active div
									.before("<div id='tabTop'></div>")
									.after("<div class='catBottom'><div id='paginators'><a href='#' class='paginator'></a><a href='#' class='paginator'></a><a href='#' class='paginator'></a></div><a href='" + 
											$(".cat[id=" + curTab + "]").attr("name") + "'id='viewAll'>view all</a></div>");
		
		$(".cat[id=" + curTab + "] .largeThumb").paginate();

		if( $('.cat:first').equals( $(".cat[id=" + curTab + "]") ) )	// check if the active tab is first, last or middle. Adjust tabtop sprite accordingly
		{
			$("#tabTop").css("background-position" , "0 -10px");
		}
		else if ( $('.cat:last').equals( $(".cat[id=" + curTab + "]") ) )
		{
			$("#tabTop").css("background-position" , "0 -20px");
		}
		else
		{
			$("#tabTop").css("background-position" , "0 0px");
		}

		return false;													// disable the link
	});
});