this.imagePreview = function(){	
	
	gap = 6;
	imgx = 500;
	imgy = 375;
	
	$("a.preview").hover(function()
	{
		this.t = this.title;
		this.title = "";	
		
		if(this.t != "")
			caption = this.t;
		else				
			caption = "";
		
		author = $(this).find(".author").text();
		rating = $(this).find(".rating").text();
		link  = $(this).find(".link").text();
		//$("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview'><span class=\"caption\">"+ caption +"</span><br><span class=\"left\">By: "+ author +"</span><span class=\"right\">Votes: "+ rating +"</span></p>");
		$("body").append("<p id='preview'><img src='"+ link +"' alt='Image preview'><span class=\"caption\">"+ caption +"</span><br><span class=\"left\">By: "+ author +"</span><span class=\"right\">Votes: "+ rating +"</span></p>");
		
		imgsizex = imgx + 10; // 500 + 10 padding
		imgsizey = imgy + 55; // 375 + 10 padding + 40 for text
		
		docx = $(window).width() + $(window).scrollLeft();
		docy = $(window).height() + $(window).scrollTop();
		
		img = $(this).find("img");
		imgpos = img.offset();
		
		x = imgpos.left + img.width() + gap;
		if((x + imgsizex) > docx)
			x = imgpos.left - gap - imgsizex;
		
		y = imgpos.top;
		if((y + imgsizey) > docy)
			y -= (y + imgsizey) - docy;
		
		$("#preview")
			.css("width", 500)
			.css("left",(x) + "px")
			.css("top",(y) + "px")
			.fadeIn("fast");						
    },
	function()
	{
		this.title = this.t;	
		$("#preview").remove();
    });	
};


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