/////////////////////Função das boxes by Guilherme Nery/////////////////////

function customers(row,id_costumer,id_option,action,pos_seta) {
	$('.box *').clearQueue();

	if ($('#box-'+row).css("display") == "none") {
		$('.box').slideUp(300);
		$('.selected').fadeOut(300);
	}

	if (action == 'in') {
		if ($('#box-'+row+' #customer-'+id_costumer).css("display") == "none") {
			$('.box .customer').fadeOut(0);
			$('#box-'+row+' .options h6').css("color","#00739d");
			$('.box .info').fadeOut(0);

			$('#box-'+row+' #customer-'+id_costumer).fadeIn(0);
			$('#box-'+row+' #customer-'+id_costumer+' .option-1').css("color","#39a2d8");
			$('#box-'+row+' #customer-'+id_costumer+' .info-1').fadeIn(300);

			position_seta = $(pos_seta).position().left + ($(pos_seta).width() / 3);

			$('#box-'+row+' .seta').animate({
				left: position_seta
			}, 500);

			$('#box-'+row).slideDown(300, function() {
				position_select = $('#box-'+row+' #customer-'+id_costumer+' .option-1').position().left + ((($('#box-'+row+' #customer-'+id_costumer+' .option-1').width() - $('#box-'+row+' .selected').width()) / 2) + 25);

				$('#box-'+row+' .selected').animate({
					left: position_select
				}, 500).fadeIn(200);
			});
		}
	}

	if (action == 'change') {
		if ($('#box-'+row+' #customer-'+id_costumer+' .info-'+id_option).css("display") == "none") {
			position_select = $('#box-'+row+' #customer-'+id_costumer+' .option-'+id_option).position().left + ((($('#box-'+row+' #customer-'+id_costumer+' .option-'+id_option).width() - $('#box-'+row+' .selected').width()) / 2) + 25);

			$('#box-'+row+' .selected').animate({
				left: position_select
			}, 500);

			$('#box-'+row+' #customer-'+id_costumer+' .options h6').css("color","#00739d");
			$('#box-'+row+' #customer-'+id_costumer+' .option-'+id_option).css("color","#39a2d8");
			
			$('#box-'+row+' #customer-'+id_costumer+' .info').slideUp(333);
			$('#box-'+row+' #customer-'+id_costumer+' .info-'+id_option).slideDown(333);
		
		}
	}
}