/*
* Url preview script 
* powered by jQuery (http://www.jquery.com)
* 
* written by Alen Grakalic (http://cssglobe.com)
* 
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/

this.screenshotPreview = function(){	
	/* CONFIG */
	xOffset = 30;
	yOffset = 10;
	
	// these 2 variable determine popup's distance from the cursor
	// you might want to adjust to get the right result
	
	/* END CONFIG */
	$("a.screenshot").hover(function(e){
		e.preventDefault();
		e.stopPropagation();
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("#screenshot").remove();
		
		var rel_array = this.rel.split("|");
		var width_str = '';
		var height_str = '';
		if(rel_array[1]) {
			width_str = "width='" + rel_array[1] + "'";
		}
		if(rel_array[2]) {
			height_str = "height='" + rel_array[2] + "'";
		}
		
		$("body").append("<p id='screenshot'><img src='"+ rel_array[0] +"' alt=\"" + this.t + "\" " + width_str + " " + height_str + "/>"+ c +"</p>");								 
		$("#screenshot")
			.css("top", (e.pageY + yOffset) + "px")
			.css("left", (e.pageX + xOffset) + "px")
			.fadeIn("slow");
			
		var viewportSize = getViewportSize();
		adjustPosition($("#screenshot"), xOffset, yOffset, viewportSize)
	},
	function(e){
		try {
			this.title = this.t;	
			if(e.relatedTarget == null) {
				return;
			}
			if(e.relatedTarget.id == "screenshot") {
				return;
			}
			$("#screenshot").remove();
		}
		catch(e) {
			alert(e.message);
		}
	});
};

function getViewportSize() {
	viewportSize = new Object();
	viewportSize.viewportWidth = $(window).width();
	viewportSize.viewportHeight = $(window).height();
	viewportSize.viewportScrollX = $(document).scrollLeft();
	viewportSize.viewportScrollY = $(document).scrollTop();

	return viewportSize;
}

function adjustPosition(oPreview, xOffset, yOffset, viewportSize) {
	var top = oPreview.position().top;
	var left = oPreview.position().left;
	var width = oPreview.width();
	var height = oPreview.height();

	var bottom = top + height;
	var right = left + width;

	var doAnimate = false;

	if(width > viewportSize.viewportWidth) {
		doAnimate = true;
		width = viewportSize.viewportWidth * 0.75;
	}
	if(height > viewportSize.viewportHeight) {
		doAnimate = true;
		height = viewportSize.viewportHeight * 0.75;
	}

	if(xOffset + right - viewportSize.viewportScrollX > viewportSize.viewportWidth) {
		doAnimate = true;
		left -= xOffset + right - viewportSize.viewportScrollX - viewportSize.viewportWidth;
	}
	if(bottom + yOffset - viewportSize.viewportScrollY > viewportSize.viewportHeight) {
		doAnimate = true;
		top -= bottom + yOffset - viewportSize.viewportScrollY - viewportSize.viewportHeight;
	}

	if(doAnimate) {
		oPreview.animate(
			{
			top: top,
			left: left,
			width: width,
			height: height
			});
	}
}

// starting the script on page load
$(document).ready(function(){
	screenshotPreview();
});