$(function() {

	var popupwidth = '200';

	$('.name-full').css({
		'display': 'none',
	});

	$('body').append('<div id="popup_title"></div>');
	$('#popup_title').css({
		'display': 'none',
		'position': 'absolute',
		'color': 'black',
		'padding': '2px',
		'border': 'solid 2px yellow',
		'background-color': 'pink',
		'width': popupwidth + 'px'
	});

	$('.name, .screen').mouseover(function(e) {
		if ( $(this).attr('class') == 'name' ) {
			$('#popup_title').html($(this).next().text());
		} else {
			$('#popup_title').html($(this).prev().text());
		}
		$('#popup_title').css({'opacity': '0.8', 'display': 'none'}).fadeIn(200);
	}).mousemove(function(e) {
		var border_top = $(window).scrollTop();
		var border_right = $(window).width();
		var left_pos;
		var top_pos;
		var offset = 20;
		if( border_right - (offset *2) >= $('#popup_title').width() + e.pageX ){
			left_pos = e.pageX + offset;
		} else{
			left_pos = border_right - $('#popup_title').width() - offset;
		}
		left_pos = left_pos - offset - popupwidth / 2;

		if( border_top + (offset *2)>= e.pageY - $('#popup_title').height() ){
			top_pos = border_top + offset;
		} else {
			top_pos = e.pageY - $('#popup_title').height() - offset;
		}
		$('#popup_title').css({'left':left_pos, 'top':top_pos});
	}).mouseout(function() {
		$('#popup_title').css({'left': '-9999px'});
	});


});