$(document).ready(function(){
	//console.log('hiantonia');
	//$('.meaning').addClass('offscreen'); // we're selecting all elements with the class "meaning" and add a new class to all of them named "offscreen"
	$('.meaning').each(function(){ //for each of the found elements we're doing a function one after the other
		//console.log('hiantonia');
		// $(this) here points to $('.meaning')
		var meaning = $(this);
		var backlink = meaning.find('.backtoword');
		var id = meaning.attr('id'); // i.e. politicians02 getting the id of each element with the class meaning, and saving it to the variable id
		var a = $('a[href=#' + id + ']') // results the query $('a[href=#politicians02']') except the id part is always the one from the current iteration
		
		a.click(function(event){
			event.preventDefault();
			// $(this) here points to a
			//meaning.removeClass('offscreen');
			meaning.css({'position':'static'});
			var heading = meaning.find('.term');// find the class .term within meaning and is a heading and then
			heading.attr('tabindex',-1);
			heading.focus(); // focus on on what we've found (ie will be to do with .term and heading but the class is the driver)
		});
		backlink.click(function(event){
			event.preventDefault();
			//meaning.addClass('offscreen');
			
			meaning.css({'position':'absolute'});
			a.focus();
		});
	});
	
	
});