$(function() {
	$('img.tooltip-imgpreview-controller').hover(
		function(e) {
			// remove previous if left
			$('#tooltip-imgpreview').remove();
			// create new one
			$(this).data('alt',$(this).attr('alt'));
			$(this).attr({
				alt: '',
				title: ''
			});
			$('body').append('<div id="tooltip-imgpreview" class="tooltip tooltip-2"><img src="'+ $(this).attr('src') +'" alt="' + $(this).data('alt') + '" /></div>');
			var offsetX = e.pageX + 15;
			var offsetY;
			var outerWidth = $('#tooltip-imgpreview').outerWidth();
			if (offsetX + outerWidth > $(window).width()) { // out of the viewport
				offsetX = ($(window).width() - outerWidth - 10);
				offsetY = e.pageY + 25;
			} else { // in the viewport
				offsetY = e.pageY + 5;
			}
			$('#tooltip-imgpreview')
				.css('position','absolute')
				.css('top',(offsetY) + 'px')
				.css('left',(offsetX) + 'px')
				.fadeIn('fast');
		},
		function() {
			$(this).attr('alt',$(this).data('alt'));
			$(this).attr('title',$(this).data('alt'));
			$('#tooltip-imgpreview').remove();
		}
	);
	$('img.tooltip-imgpreview-controller').mousemove(function(e) {
		var offsetX = e.pageX + 15;
		var offsetY;
		var outerWidth = $('#tooltip-imgpreview').outerWidth();
		if (offsetX + outerWidth > $(window).width()) { // out of the viewport
			offsetX = ($(window).width() - outerWidth - 10);
			offsetY = e.pageY + 25;
		} else { // in the viewport
			offsetY = e.pageY + 5;
		}
		$('#tooltip-imgpreview')
			.css('top',(offsetY) + 'px')
			.css('left',(offsetX) + 'px');
	});
});