$(document).ready(function() {
	//on ajoute aux éléments de la liste les attributs qu'il leur faut
	$('.reference_nav ul li').css('position','absolute');
	$('.reference_nav ul li').css('top','0px');
	
	var i = 0;
	$('.reference_nav ul li').each(function() {
		$(this).css('left', i+'px');
		i += $('.reference_nav ul li').width();
	});
	
	$('.reference_nav ul li a').css('display','block');
	$('.reference_nav ul li a').css('width',$('.reference_nav ul li').width() + 'px');
	
	//-----------------
	//ajout des boutons fléchés
	var arrow_left_anchor = document.createElement('a');
	arrow_left_anchor.href = '#';
	arrow_left_anchor.className = 'arrow_left_anchor';
	
	var arrow_right_anchor = document.createElement('a');
	arrow_right_anchor.href = '#';
	arrow_right_anchor.className = 'arrow_right_anchor';
	
	var arrow_nav = document.createElement('div');
	arrow_nav.className = 'arrow_nav';
	$('.reference_nav').append(arrow_nav);
	
	$('.reference_nav .arrow_nav').append(arrow_left_anchor);
	$('.reference_nav .arrow_nav').append(arrow_right_anchor);
	$('.reference_nav .arrow_nav .arrow_left_anchor').css({
		'display': 'block',
		'height': $('.reference_nav ul li').height() + 'px',
		'width': '50px'
	});
	$('.reference_nav .arrow_nav .arrow_right_anchor').css({
		'display': 'block',
		'height': $('.reference_nav ul li').height() + 'px',
		'width': '50px'
	});
	
	$('.reference_nav .arrow_nav .arrow_left_anchor').css({
		'position': 'absolute',
		'top': '0px',
		'left': '0px'
	});
	$('.reference_nav .arrow_nav .arrow_right_anchor').css({
		'position': 'absolute',
		'top': '0px',
		'left': $('.reference_nav ul li').width() - $('.reference_nav .arrow_nav .arrow_right_anchor').width() + 'px'
	});
		
	$('.reference_nav .arrow_nav').hide();
	
	
	$('.reference_nav .arrow_nav').show();
	showHideArrows();
	resetDescription();
	
	//gestion des evenements click
	$('.arrow_nav .arrow_right_anchor').live('click', function(e) {
		e.preventDefault();
		var dernier_li = $('.reference_nav ul li')[$('.reference_nav ul li').length - 1];
		if(parseInt($(dernier_li).css('left').replace('px','')) > 0) {
			$('.reference_nav ul li').each(function() {
				$(this).animate({
					left: parseInt($(this).css('left').replace('px','')) - $(this).width() + 'px'
				},200,'',function() { showHideArrows(); resetDescription(); });
			});
		}
	});
	
	$('.arrow_nav .arrow_left_anchor').live('click', function(e) {
		e.preventDefault();
		var premier_li = $('.reference_nav ul li')[0];
		if(parseInt($(premier_li).css('left').replace('px','')) < 0) {
			$('.reference_nav ul li').each(function() {
				$(this).animate({
					left: parseInt($(this).css('left').replace('px','')) + $(this).width() + 'px'
				},200,'',function() { showHideArrows(); resetDescription(); });
			});
		}
	});
	
});

//fonction qui calcul s'il faut montrer ou non les fleches
function showHideArrows() {
	var premier_li = $('.reference_nav ul li')[0];
	var dernier_li = $('.reference_nav ul li')[$('.reference_nav ul li').length - 1];
	if(parseInt($(premier_li).css('left').replace('px','')) == 0) {
		$('.arrow_nav .arrow_left_anchor').hide();
	} else {
		$('.arrow_nav .arrow_left_anchor').show();
	}
	
	if(parseInt($(dernier_li).css('left').replace('px','')) == 0) {
		$('.arrow_nav .arrow_right_anchor').hide();
	} else {
		$('.arrow_nav .arrow_right_anchor').show();
	}
}

//fonction qui montre une description de l'image
function resetDescription() {
	$('.reference_nav ul li').each(function() {
		if($(this).position().left == 0) {
			$('.reference_nav p.reference_description').html($(this).find('img').attr('alt'));
		}
		
	});
}