/// <reference path="jquery-1.3.2.min.js"/>

$(document).ready(function() {
	var personCount = $(".person").length;
	var personWidth = $(".person").eq(0).width();

	$(".person").mouseenter(function(e) {
		var info = $(this).children(".info");
		info.show();
		$(document).trigger('expand', this.id);
		$(this).animate({ width: '750px' }, { duration: 300, queue: false, complete: function() { info.show(); } });
	});
	$(".person").mouseleave(function(e) {
		var info = $(this).children(".info");
		$(document).trigger('contract', this.id);
		$(this).animate({ width: personWidth + 'px' }, { duration: 300, queue: false, complete: function() { info.hide(); } });
	});

	$(document).bind('expand', function(e, activeId) {
		$(".person:not(#" + activeId + ")").stop(true).animate({
			width: personWidth - (750 - personWidth) / (personCount - 1) + 'px'
		}, {
			duration: 290,
			queue: false
		});
		$(".person:not(#" + activeId + ")").each(function() {
			var slideAmount = 65;
			switch (this.id) {
				case 'roland':
					slideAmount = 81;
					break;
				case 'fabienne':
					slideAmount = 88;
					break;
				case 'simone':
					slideAmount = 119;
			}
			$(this).animate({ backgroundPosition: '-' + slideAmount + 'px 0px' }, { duration: 290, queue: false });
		});
	});

	$(document).bind('contract', function(e, activeId) {
		$(".person:not(#" + activeId + ")").stop(true).animate({
			width: personWidth + 'px'
		}, {
			duration: 305,
			queue: false
		});
		$(".person:not(#" + activeId + ")").animate({ backgroundPosition: '0px 0px' }, { duration: 305, queue: false });
	});
});