$(function(){

	var VERTICAL_PADDING = 48;
	var HORIZONTAL_PADDING = 27;
	var SPACER = 20;
	var mouseX, mouseY, currentTooltip, loadingImage;
	var imgMap = {};
	var htmlMap = {};
	var isImage = /\.(jpe?g|png|gif)$/;

	var DIALOG_DIV =
	'<div id="screenshot_dialog" style="overflow:hidden; text-align:center;">' + 
		'<div id="loading_div" style="text-align: center; z-index: 100; margin:auto;">' +
			'<p>Loading screenshot..</p>' +
			'<img src="/static/images/loading.gif" style="margin: auto; z-index: 5;"/>' +	
		' </div>' +
		'<div id="screenshot_container" style="z-index: 50;">' +
		'</div>' +
	'</div>'
	$(DIALOG_DIV).appendTo($('body'));
	
	function onLoad(evt) {
		if (this != currentTooltip) return;
		loadingImage = false;
		showAndResizeDialog();
		positionDialog();		
	}	
	
	function showAndResizeDialog() {
		$('#loading_div').hide();		
		$('#screenshot_container').show();
		$("#screenshot_dialog").dialog('option', 'width', $(currentTooltip).width() + HORIZONTAL_PADDING);
		$("#screenshot_dialog").dialog('option', 'height', 'auto');
		$("#screenshot_dialog").css('height', 'auto');
	}
	
	function positionDialog() {
		var height = $('#screenshot_dialog').dialog().outerHeight(true) + SPACER + 50;
		var width = $('#screenshot_dialog').dialog().outerWidth(true) + SPACER + 50;
		var positionX = (mouseX + width > $(window).width()) ? mouseX - width : mouseX + SPACER;
		var positionY = (mouseY + height > $(window).height()) ? mouseY - height : mouseY + SPACER;
		$('#screenshot_dialog').dialog('option', 'position', [positionX, positionY]);
	}
	
	function showLoadingDiv() {
		loadingImage = true;
		$('#screenshot_container').hide();
		$('#loading_div').show();
		$("#screenshot_dialog").dialog('option', 'width', 350);
		$("#screenshot_dialog").dialog('option', 'height', 120);
	}
	
	function onScreenshot(evt){
		var url = $(this).attr('screenshot');
		mouseX = evt.clientX;
		mouseY = evt.clientY;
		$("#screenshot_dialog").dialog('open');
		
		// Check if its currentTooltip
		if (currentTooltip && currentTooltip.src == url) {
			if (loadingImage) positionDialog;
			else {
				showAndResizeDialog();
				positionDialog();
			}
			return;
		}
		
		$('#screenshot_container').empty().append()
		var tip_message = $(this).attr('tip_message');
		if (tip_message)
			$('<div style="line-height:14px; text-align: left; margin-bottom: 5px;">' + tip_message + '</div>').appendTo($('#screenshot_container'));
		
		// No screenshot
		if (!url) showAndResizeDialog();
		
		if (!imgMap[url]) {
			showLoadingDiv();
			currentTooltip = imgMap[url] = new Image();
			$(currentTooltip).load(onLoad);
			currentTooltip.src = url;
			$('#screenshot_container').append(currentTooltip);
		}
		else {
			currentTooltip = imgMap[url];
			$('#screenshot_container').append(currentTooltip);
			showAndResizeDialog();
		}
		positionDialog();		
		$('#screenshot_dialog').dialog('option', 'title', $(this).attr('tip_title'));
	}
	
	function hideScreenshot(evt) {
		$('#screenshot_dialog').dialog('close');
	}
	
	$('[screenshot]').mousemove(onScreenshot);
	$('[screenshot]').mouseleave(hideScreenshot);
	$("#screenshot_dialog").dialog({
		autoOpen: false,
		bgiframe: true,
		resizable: false,
		modal: false
	});
});