var glossary = {
	'xmpp': 'A communications protocol for message based systems',
	'javascript': 'A scripting language used in web browsers to create dynamic content',
	'jquery': 'A cross-browser Javascript library used for simplifing scripting',
	'strophe': 'A Javascript library for connecting an XMPP server to a web browser',
	'php': 'A web development scripting language used for making dynamic websites',
	'mysql': 'A relational database management system',
	'front-end': 'A combination of HTML, CSS and Javascript',
	'back-end': 'The data processing and database interactions on a server',
	'html': 'The structured markup language behind web pages',
	'django': 'A high-level Python framework that encourages rapid development',
	'google analytics': 'A service provided by Google for generating detailed statistics about site visitors',
	'data visualization': 'The visual representation of data, either as a image or interactive display',
	'css': 'A language used to describe the presentation of a web document',
	'websockets': 'A technology used for providing interaction between a web client and a web server',
	'flash': 'A multimedia platform built by Adobe to add interactivity to web pages',
	'bot': 'An automated script',
	'node.js': 'A web server language based on Google\'s V8 Javascript engine',
	'express': 'A web framework built on node.js',
	'seo': 'Stands for search engine optimization, the process of improving visibility in search engines like Google'
};

$(function () {
	$('.text p, #aboutus p').each(function () {
		for (items in glossary) {
			if (glossary.hasOwnProperty(items)) {
				$(this).html($(this).html().replace(new RegExp('(' + items + ')', 'ig'), '<span class="glossary" data-item="' + items + '">$1</span>'));
			}
		}
	});

	var bubble = $('#bubble');
	var bubbleTimeout = null;

	
	$('span.glossary').each(function () {
		var self = this;
		
		$(this).hover(function () {
			
			bubbleTimeout = setTimeout(function () {
				$(self).addClass('glossaryhover');
				
				var top = $(self).position().top + $(self).outerHeight();
				var left = $(self).position().left;
				var posleft = (Math.floor(left/230) * 240);
				var bgleft = (left % 240) + ($(self).width()/2 - 10);
				
				bubble.css({
					'left': posleft + 'px',
					'top': top + 10,
					'opacity': 0,
					'background-position': bgleft + 'px 0px'
				}).animate({
					'opacity': 1,
					'top': top + 1
				}, 250);
				
				bubble.find('p').html('<strong>' + $(self).attr('data-item').toUpperCase() + ":</strong> " + glossary[$(self).attr('data-item')]);
				
			}, 250);
		}, function () {
			$(self).removeClass('glossaryhover');
			bubble.css({
				'opacity': 0,
				'left': '-9999px',
				'top': '-9999px'
			});
			clearTimeout(bubbleTimeout);
		});
	});
});