/*
 * Image preview script 
 * powered by $ (http://www.$.com)
 * 
 * written by Alen Grakalic (http://cssglobe.com)
 * edited by Jan Chodura (http://www.creactive.cz)
 * 
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-$
 *
 */

this.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
	
		xWin = $(window).width();
		yWin = $(window).height();
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("a.previewImage").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='previewImage'><img src='"+ this.rel +"' alt='Image preview' />"+ c +"</p>");								 
		
		e = (e?e:event);
		pageX = (e.pageX?e.pageX:e.clientX);
		pageY = (e.pageY?e.pageY:e.clientY);
		
		pageY += (e.pageY?0:$(window).scrollTop());
		
		yImg = $("#previewImage").height();
		xImg = $("#previewImage").width();
		
		xTol = $(window).scrollLeft();
		yTol = $(window).scrollTop();
			
		cssTop = pageY - yOffset;
		
		if (pageX + (4*xOffset) + xImg > xWin + xTol) {
			cssLeft = pageX - (3*xOffset) - xImg;
		} else {
			cssLeft = pageX + xOffset;
		}

		
		if (cssTop + yImg > yWin + yTol) {
			 overflow = (pageY + yImg - yOffset) - (yWin + yTol);
			 cssTop = pageY - yOffset - overflow - yOffset;
		}

		$("#previewImage")
			.css("top", cssTop + "px")
			.css("left", cssLeft + "px")
			.fadeIn("fast");					
    },
	function(){
		this.title = this.t;	
		$("#previewImage").remove();
    }).mousemove(function(e){
		
		yImg = $("#previewImage").height();
		xImg = $("#previewImage").width();
		
		e = (e?e:event);
		pageX = (e.pageX?e.pageX:e.clientX);
		pageY = (e.pageY?e.pageY:e.clientY);

		pageY += (e.pageY?0:$(window).scrollTop());	
		
		xTol = $(window).scrollLeft();
		yTol = $(window).scrollTop();	
		
		cssTop = pageY - yOffset;
		
		if (pageX + (4*xOffset) + xImg > xWin + xTol) {
			cssLeft = pageX - (3*xOffset) - xImg;
		} else {
			cssLeft = pageX + xOffset;
		}
		
		if (cssTop + yImg > yWin + yTol) {
			 overflow = (pageY + yImg - yOffset) - (yWin + yTol);
			 cssTop = pageY - yOffset - overflow - yOffset;
		}

		$("#previewImage")
			.css("top", cssTop + "px")
			.css("left", cssLeft + "px");
	});
		
	$("div.previewImage").bind("mouseenter",function(e){
		this.t = this.title;
		this.title = "";
		$("div.previewImage a").each(function(){
			this.aTitle = this.title;
			this.title = '';
		});
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='previewImage'><img src='"+ this.lang +"' alt='Image preview' />"+ c +"</p>");								 
		
		e = (e?e:event);
		pageX = (e.pageX?e.pageX:e.clientX);
		pageY = (e.pageY?e.pageY:e.clientY);
		
		pageY += (e.pageY?0:$(window).scrollTop());
		
		yImg = $("#previewImage").height();
		xImg = $("#previewImage").width();
		
		xTol = $(window).scrollLeft();
		yTol = $(window).scrollTop();
			
		cssTop = pageY - yOffset;
		
		if (pageX + (4*xOffset) + xImg > xWin + xTol) {
			cssLeft = pageX - (3*xOffset) - xImg;
		} else {
			cssLeft = pageX + xOffset;
		}
		
		if (cssTop + yImg > yWin + yTol) {
			 overflow = (pageY + yImg - yOffset) - (yWin + yTol);
			 cssTop = pageY - yOffset - overflow - yOffset;
		}

		$("#previewImage")
			.css("top", cssTop + "px")
			.css("left", cssLeft + "px")
			.fadeIn("fast");
	}).bind("mouseleave",function(){
		this.title = this.t;
		$("div.previewImage a").each(function(){
			this.title = this.aTitle;
		});		
		$("#previewImage").remove();
	}).mousemove(function(e){
		
		yImg = $("#previewImage").height();
		xImg = $("#previewImage").width();
		
		e = (e?e:event);
		pageX = (e.pageX?e.pageX:e.clientX);
		pageY = (e.pageY?e.pageY:e.clientY);

		pageY += (e.pageY?0:$(window).scrollTop());	
		
		xTol = $(window).scrollLeft();
		yTol = $(window).scrollTop();	
		
		cssTop = pageY - yOffset;
		
		if (pageX + (4*xOffset) + xImg > xWin + xTol) {
			cssLeft = pageX - (3*xOffset) - xImg;
		} else {
			cssLeft = pageX + xOffset;
		}
		
		if (cssTop + yImg > yWin + yTol) {
			 overflow = (pageY + yImg - yOffset) - (yWin + yTol);
			 cssTop = pageY - yOffset - overflow - yOffset;
		}

		$("#previewImage")
			.css("top", cssTop + "px")
			.css("left", cssLeft + "px");
	});				
};

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