$(document).ready(function() {
	var infoBox = $('#client-info-box');
	var theTimeout;
	
	$('.people')
		.mouseleave(function() {
			$('#person-info').fadeOut();
		});
	
	$('.person').mouseenter(function() {
		var id = $(this).attr('data-id'),
				personObject = peopleData[id];
		
		var html = '<strong>' + personObject.name + '</strong><br/>';
		html += personObject.position + '<br/><br/>';
		html += 'Personality traits:<br/>';
		html += '<em>' + personObject.personality + '</em>';
		
		$(this).addClass('person_hover');
		
		$('#person-info .alpha-text .inner').html(html);
		
		$('#person-info').fadeIn();
	});
	
	$('.person').mouseleave(function() {
		$(this).removeClass('person_hover');
	});
	
	$('.client').mouseenter(function() {
		
		$(this).addClass('client_hover');
		
		var pos = $(this).position();
		var left = pos.left;
		
		//var image = $(this).find('img').eq(0), logoFilename = image.attr('data-logo');
		//image.attr('src', '/images/logos/colour/' + logoFilename);
		
		left += (left / 153 == 3) ? -153 : 153;
		
		var id = $(this).attr('data-id'),
				clientObject = clientData[id];
		
		var brief = clientObject.brief_description == null ? '' : clientObject.brief_description;
		
		infoBox.find('.client-name').text(clientObject.name);
		infoBox.find('.client-brief').text(brief);
		if (services[id].length > 0)
		{
			infoBox.find('.client-services-wrapper').css('display', 'block');
			infoBox.find('.client-services').html(services[id]);
		}
		else
		{
			infoBox.find('.client-services-wrapper').css('display', 'none');
		}
		
		clearTimeout(theTimeout);
		theTimeout = setTimeout(function() {
			infoBox.fadeIn(200);
			infoBox.css('left', left);
			infoBox.css('top', pos.top);
		}, 250);
		
		
	}).mouseleave(function() {
		
		$(this).removeClass('client_hover');
		
		//var image = $(this).find('img').eq(0), logoFilename = image.attr('data-logo');
		//image.attr('src', '/images/logos/white/' + logoFilename);
		
		clearTimeout(theTimeout);
			infoBox.hide();
		})
});