$(document).ready(function(){
	function main_hero()
	{
		var scope = $('#hero_player');
		var heros = $('#hero_player > div');
		var nbHeros = heros.size();
		
		var carres = $('<div class="carres" />').appendTo(scope);
		for (var i = 0; i < nbHeros; i++)
			carres.append('<a href="#" class="carre"></a>');
		scope.find('.carre:first').addClass('current');		
		heros.addClass('heros');
		
		scope.find('.carre').click(function(){
			scope.find('.carre.current').removeClass('current');
			$(this).addClass('current');
			
			var index = scope.find('.carre').index($(this));
			
			scope.find('.heros:visible').fadeOut(400, function(){
				scope.find('.heros').eq(index).fadeIn(400);
			});
			
			$('#image_header').fadeOut(400, function(){
				$(this).css('background-image', "url('" + base_path + "img/header/accueil_" + (index + 1) + ".jpg')");
				$(this).fadeIn(400);
			});
			
			return false;
		});
		
		var interval = setInterval(triggerClick, 5000);
		
		function triggerClick()
		{
			if(scope.find('.carre.current').next().length != 0)
				scope.find('.carre.current').next().trigger('click');
			else
				scope.find('.carre').first().trigger('click');
		}
		
		scope.mouseenter(function(){
			clearInterval(interval);
			interval = null;
		});
		
		scope.mouseleave(function(){
			interval = setInterval(triggerClick, 5000);
		});
	}
	
	main_hero();
	
	function slider_images()
	{
		var scope = $('#slider_images');
		var heros = $('#slider_images > img');
		var nbHeros = heros.size();
		
		var carres = $('<div class="carres" />').appendTo(scope);
		for (var i = 0; i < nbHeros; i++)
			carres.append('<a href="#" class="carre"></a>');
		scope.find('.carre:first').addClass('current');		
		heros.addClass('heros');
		
		heros.first().addClass('current');
		heros.not(heros.first()).css('opacity', 0);
		
		scope.find('.carre').click(function(){
			var prevIndex = scope.find('.carre').index(scope.find('.carre.current'));
			var index = scope.find('.carre').index($(this));
			
			scope.find('.carre.current').removeClass('current');
			$(this).addClass('current');
			
			var multiplier = -1;
			if(prevIndex > index)
				multiplier = 1;
			
			scope.find('.heros.current').animate({ 
				'left': (1 * multiplier * 100) + '%', 
				'opacity': 0
			}, 400);
			
			scope.find('.heros').eq(index).css({'left': (-1 * multiplier * 100) + '%'})
				.animate({
					'left': '0%', 
					'opacity': 1
				}, 400);	
			
			scope.find('.heros.current').removeClass('current');
			scope.find('.heros').eq(index).addClass('current');
			
			return false;
		});
		
		var arrow_left = $('<a href="#" class="arrow_left"></a>').appendTo(scope);
		var arrow_right = $('<a href="#" class="arrow_right"></a>').appendTo(scope);
		
		scope.find('.arrow_left').click(function(){
			if(scope.find('.carre.current').prev().length != 0)
				scope.find('.carre.current').prev().trigger('click');
			else
				scope.find('.carre').last().trigger('click');
				
			return false;
		});
		
		scope.find('.arrow_right').click(function(){
			if(scope.find('.carre.current').next().length != 0)
				scope.find('.carre.current').next().trigger('click');
			else
				scope.find('.carre').first().trigger('click');
				
			return false;
		});
	}
	
	slider_images();
});