$(function() {
	var $cats = $('#centre div.bg');
	var catsLeft = {};
	
	var currentPage = 1;
	var pageCount = $('#content_table').find('td').size();
	var $suivant = $('#centre span.suivant');
	var $precedant = $('#centre span.precedant');
	
	var $precedantF = $('#sleft_button');
	var $suivantF = $('#sright_button');
	
	var isOpen = false;
	
	if(pageCount < 2) {
		$suivant.addClass('disabled');
	}
	else {
		$suivant.removeClass('disabled');
	}
	
	if($cats.size() > 5) {
		$('#right_button').show().addClass('arrow_visible');
	}
	
	$cats.each(function() {
		catsLeft[this.id] = $(this).css('left');
	});
	
	$('#centre div.b a').click(function(e) {
		e.preventDefault();
	});
	
	$('#centre div.bg').click(function() {
		if(isOpen) {
			isOpen = false;
			retour();
		}
		else {
		
			isOpen = true;
	
			$('#catalogue_ajax').html('').addClass('loading').load($(this).children('div.box').attr('href'), { 'ajax' : 'true' }, function() {
				$(this).removeClass('loading');
				
				currentPage = 1;
				pageCount = $('#content_table').find('td').size();
				$suivant = $('#centre span.suivant');
				$precedant = $('#centre span.precedant').addClass('disabled');
				
				$precedantF.hide();

				if(pageCount < 2) {
					$suivantF.hide();
					$suivant.addClass('disabled');
				}
				else {
					$suivantF.show();
					$suivant.removeClass('disabled');
				}
			});
			
			$_this = $(this);
			$others = $_this.siblings('div.visible');
			$_this_and_others = $_this.siblings('div.visible').andSelf();
			
			$_this.css('zIndex', 101);
			$_this_and_others.animate({ 'left': '0px' }, function() {
				$('#content').fadeIn('fast');
				$('#left_button, #right_button').hide();
				$others.css('top', '-9999px');
			});
		
		}
	});
	
	var retour = function() {
		$precedantF.hide();
		$suivantF.hide();
		$('#content').fadeOut('fast', function() {
			$('#centre div.bg').css('top', '0').each(function() {
				$t = $(this);
				$(this).animate({ 'left': catsLeft[this.id] }, function() {
					$(this).css('zIndex', 100)
				});
			});
			
			$('div.arrow_visible').show();
		});

	};
	
	$('#centre span.retour').live('click', retour);
	
	$suivant.live('click', function() {
		if($suivant.hasClass('disabled')) {}
		else {

			$('#content_table').animate( {'right': (currentPage * 652) + 'px'} );
			currentPage++;
			
			if(currentPage == pageCount) {
				$suivant.addClass('disabled');
				$suivantF.hide();
			}
			
			$precedant.removeClass('disabled');
			$precedantF.show();
		}
	});
	
	$precedant.live('click', function() {
		if($precedant.hasClass('disabled')) {}
		else {
			currentPage--;
			$('#content_table').animate( {'right': ((currentPage - 1) * 652) + 'px'} );
			
			if(currentPage == 1) {
				$precedant.addClass('disabled');
				$precedantF.hide();
			}
			
			if(pageCount > 1) {
				$suivant.removeClass('disabled');
				$suivantF.show();
			}
		}
	});
	
	$precedantF.click(function() {
		$precedant.click();
	});
	
	$suivantF.click(function() {
		$suivant.click();
	});
	
	$('#left_button').click(function() {
		if(parseInt($('#centre div.bg:first').css('left'), 10) < 0) {
			$('#centre div.bg').each(function() {
				var left = $(this).css('left');
				var newLeft = parseInt(left, 10) + 163 + 'px';
				catsLeft[this.id] = newLeft;
				if(parseInt(left, 10) + 163 < 0) {
					$(this).removeClass('box_visible');
				}
				else if(parseInt(left, 10) + 163 > 652){
					$(this).removeClass('box_visible');
				}
				else {
					$(this).addClass('box_visible');
				}
				
				$(this).animate({'left': newLeft}, function() {
					if(parseInt($('#centre div.bg:first').css('left'), 10) == 0) {
						$('#left_button').hide().removeClass('arrow_visible');
					}
					
					if(parseInt($('#centre div.bg:last').css('left'), 10) > 652) {
						$('#right_button').show().addClass('arrow_visible');
					}
				});
			});
			
			
		}
	});
	
	$('#right_button').click(function() {
		if(parseInt($('#centre div.bg:last').css('left'), 10) > 652) {
			$('#centre div.bg').each(function() {
				var left = $(this).css('left');
				var newLeft = parseInt(left, 10) - 163 + 'px';
				catsLeft[this.id] = newLeft;
				if(parseInt(left, 10) - 163 < 0) {
					$(this).removeClass('box_visible');
				}
				else if(parseInt(left, 10) - 163 > 652){
					$(this).removeClass('box_visible');
				}
				else {
					$(this).addClass('box_visible');
				}
				
				$(this).animate({'left': newLeft}, function() {
					if(parseInt($('#centre div.bg:first').css('left'), 10) < 0) {
						$('#left_button').show().addClass('arrow_visible');
					}
					
					if(parseInt($('#centre div.bg:last').css('left'), 10) == 652) {
						$('#right_button').hide().removeClass('arrow_visible');
					}
				});
			});
		}
	});
});