$(function() {
	/* BUBBLES */
	$('#header div.button').click(function(e) {
		$('#header div.bubble_bl, #header div.bubble_tl, #header div.bubble_br').css({
			'left' : '0px',
			'top' : '-99999px'
		});
		$('#header div.button').removeClass('button_active');
	
		var $_this = $(this);
		var rel = $_this.attr('rel');
		var $matchingDiv = $('div[rev="'+rel+'"]');
		
		if($_this.hasClass('button_active')) {
			$_this.removeClass('button_active');
			$matchingDiv.css({
				'left' : '0px',
				'top' : '-99999px'
			});
		}
		else {
			var left = $matchingDiv.attr('left');
			var top = $matchingDiv.attr('top');
			
			$_this.addClass('button_active').siblings().removeClass('button_active');
			$matchingDiv.css({
				'left' : left,
				'top' : top
			});
		}
		
		e.stopPropagation();
		
	});
	
	$(document).click(function() {
		$('#header div.bubble_bl, #header div.bubble_tl, #header div.bubble_br').css({
			'left' : '0px',
			'top' : '-99999px'
		});
		$('#header div.button').removeClass('button_active');
	});
	/* END BUBBLES */
	/* STEPS */
	
	var $table = $('#StepsTable');
	var stepWidth = 241;
	var numSteps = $table.find('td').size();
	var maxRight = (numSteps * stepWidth) - 618;
	var currentRight = 0;
	var $suivant = $('#btn_suivant')
	var $precedant = $('#btn_precedent')

	$suivant.click(function() {
		var newRight = currentRight + stepWidth;
		if(newRight >= maxRight) {
			// disable button
			$suivant.addClass('btn_inactif');
			
			newRight = maxRight;
		}
		if(newRight > 0) {
			$precedant.removeClass('btn_inactif');
		}
		
		$table.animate({ right: newRight + 'px' });
		currentRight = newRight;
	});
	
	$precedant.click(function() {
		var newRight = currentRight - stepWidth;
		if(newRight <= 0) {
			// disable button
			$precedant.addClass('btn_inactif');
			
			newRight = 0;
		}
		if(numSteps > 2) {
			$suivant.removeClass('btn_inactif');
		}
		
		$table.animate({ right: newRight + 'px' });
		currentRight = newRight;
	});
	
	/* END STEPS */
});