/**
 * Namespace "StuffBrowser"
 * @class Paginate
 * @author jorn@info.nl
 * 
 * @desc Handles clicking Previous, Next and the paginating dots. Handles the current
 *       card state and works closely with the View & Card class.
 * 
 * - Stores what card is currently centered in a view (for each tab)
 */
StuffBrowser.Paginate = function($){
	var Obj;
	var card_holder, card_width, spread;
	var locked = false;
	var current_card = { // current card per view per tab (default 1)
		// tab: [views]
		0: [1, 1, 1],
		1: [1, 1, 1],
		2: [1, 1, 1]
	};
	
	function browse(next)
	{
		var leftpos = parseInt(card_holder.css('left'));
		
		if( next ){ // clicked next button
			// TODO: ajax load new json data
			StuffBrowser.Card.load(Obj.getCurrentCard() + spread +1); // load new card
			
			if( $('.card', card_holder).length > StuffBrowser.load_cards ){
				leftpos += card_width;
				card_holder.children('.card'+ (Obj.getCurrentCard() - spread)).remove(); // remove obsolete card
				card_holder.css('left', leftpos +'px'); // reset card holder position
			}
			leftpos -= card_width;
			$('#stuff-browser-pager .dots td:eq('+ Obj.getCurrentCard() +')').removeClass('dotnext'); // update dots
			Obj.setCurrentCard(Obj.getCurrentCard()+1);
		}
		else { // clicked previous button
			// TODO: ajax load new json data
			StuffBrowser.Card.load(Obj.getCurrentCard() - spread -1); // load new card
			
			if( $('.card', card_holder).length > StuffBrowser.load_cards ){
				leftpos -= card_width;
				card_holder.children('.card'+ (Obj.getCurrentCard() + spread)).remove(); // remove obsolete card
				card_holder.css('left', leftpos +'px'); // reset card holder position
			}
			leftpos += card_width;
			Obj.setCurrentCard(Obj.getCurrentCard()-1);
			$('#stuff-browser-pager .dots td:eq('+ Obj.getCurrentCard() +')').addClass('dotnext'); // update dots
		}
		slide(leftpos);
	}
	
	/**
	 * Perform the slide animation and make sure you can't paginate while
	 * animation is in motion
	 * 
	 * @param {Int} leftpos
	 */
	function slide(leftpos)
	{
		locked = true;
		card_holder.animate({left: leftpos +'px'}, slide_speed, 'swing', function(){
			checkButtons();
			locked = false;
		});
	}
	
	/**
	 * Jumps to card after pressing one of the paginating dots
	 * 
	 * @param {Int} card_nr
	 */
	function jumpToCard(card_nr)
	{
		if( card_nr == Obj.getCurrentCard() +1 )
			browse(true);
		else if( card_nr == Obj.getCurrentCard() -1 )
			browse(false);
		else
		{
			toggleAjaxLoader(true);
			Obj.setCurrentCard(card_nr);
			// TODO: ajax load json
			card_holder.empty();
			StuffBrowser.Card.load(card_nr, spread);
			Obj.reload(card_nr);
		}
	}
	
	/**
	 * Enable or disable buttons while paginating
	 */
	function checkButtons()
	{
		var p = $('#stuff-browser-pager');
		p.children('.disabled').removeClass('disabled');
		
		if( Obj.getCurrentCard() == 1 )
			$('.prev', p).addClass('disabled');
		if( Obj.getCurrentCard() == StuffBrowser.getLastCardNr() )
			$('.next', p).addClass('disabled');
	}
	
	/**
	 * Sets the card holder to default position after loading view or
	 * clicking a pagination dot.
	 * 
	 * @param {Int} card_nr
	 */
	function getHolderStartPos(card_nr)
	{
		if( card_nr <= spread )
			var left = (card_nr - 1) * card_width;
		else
			var left = spread * card_width;
		
		card_holder.css('left', '-'+ left +'px');
	}
	
	/**
	 * Creates the dots for pagination
	 */
	function buildPaginatorDots()
	{
		var dots_container = $('#stuff-browser-pager .dots tr');
		var last_card = StuffBrowser.getLastCardNr();
		var dots = new Array;
		
		dots_container.empty();
		// refill
		for( var i = 0; i < last_card; ){
			var dot = $(Obj.card_dot_template.replace(/\[id\]/g, ++i));
			if( i > Obj.getCurrentCard() )
				dot.addClass('dotnext');
			dots.push(dot);
		}
		if( dots.length > 0 )
			$(dots).appendTo(dots_container);
	}
	
	/**
	 * Toggles the stuffbrowser ajax loader
	 * 
	 * @param {Bool} show
	 */
	function toggleAjaxLoader(show)
	{
		if( show ){
			$(StuffBrowser.getCurrentTab() +' .card-holder').hide();
			$('#stuff-browser-ajaxloader').fadeIn(100);
		}
		else{
			$(StuffBrowser.getCurrentTab() +' .card-holder').show();
			$('#stuff-browser-ajaxloader').hide();
		}
	}
	
	return {
		card_dot_template: '<td><a href="#[id]" title="[id]"><span>[id]</span></a></td>',
		
		setCardHolder: function(current_tab)
		{
			card_holder = $(current_tab +' .card-holder');
		},
		
		/**
		 * Retrieves the current card for the selected view in active tab
		 */
		getCurrentCard: function()
		{
			return current_card[StuffBrowser.getCurrentTab(true)][StuffBrowser.View.getCurrent()];
		},
		
		/**
		 * Save card number for the selected view in active tab
		 * 
		 * @param {Int} card_nr
		 */
		setCurrentCard: function(card_nr)
		{
			current_card[StuffBrowser.getCurrentTab(true)][StuffBrowser.View.getCurrent()] = card_nr;
		},
		
		/**
		 * Reload the pagination elements to set 
		 * 
		 * @param {Int} card_nr
		 */
		reload: function(card_nr)
		{
			getHolderStartPos(Obj.getCurrentCard());
			toggleAjaxLoader(false);
			buildPaginatorDots();
			checkButtons();
		},
		
		/**
		 * Initialize this Class
		 */
		init: function(){
			Obj = StuffBrowser.Paginate; // set shortcut
			spread = (StuffBrowser.load_cards - 1)/2; // Cards that are loaded left and right of current one
			card_width = StuffBrowser.card_width;
			slide_speed = StuffBrowser.slide_speed;
			
			// Set with to all card-holders
			$('#stufftabs .card-holder').css('width', StuffBrowser.load_cards * card_width);
			
			// Store card-holder to object
			var activeTab = $('#stufftabs li.active');
			if( !activeTab[0] ) alert('No tab with class "active" has been found under #stufftabs. Check infoTabs plugin init.');
			Obj.setCardHolder(activeTab.children('a').attr('href'));
			
			// Bind events
			var pager = $('#stuff-browser-pager');
			$('a.prev, a.next', pager).bind('click.StuffBrowser.Paginate', function(){
				if( !$(this).hasClass('disabled') && !locked )
					browse($(this).hasClass('next'));
				return false;
			});
			
			$('.dots a', pager).live('click', function(){
				jumpToCard(parseInt($(this).attr('href').replace(/.*#/, '')));
				return false;
			});
		}
	};
}(jQuery);