$(document).ready(function() { 
	// Validation Form
	$("#commentForm").validate();
	
	/* This is basic - uses default settings */
		
	$("a#single_image").fancybox();
	
	/* Using custom settings */
	
	$("a#inline").fancybox({
		'hideOnContentClick': true
	});
	
	$("a.group").fancybox({
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	
	/* Fancy Box */
	/*  images */
		$(".mypics").fancybox({
			'titlePosition' 		: 'over',
			'titleFormat'		: 'formatTitle'
		});
		
		$(".mypics2").fancybox({
			'width'				: '100%',
			'height'			: '100%',
			'titleFormat'		: 'formatTitle'
		});
		
		$(".mypics3").fancybox({
			'width'				: '800',
			'titleFormat'		: 'formatTitle'
		});

		$("a#example1").fancybox({
			'titleShow'		: false
		});

		$("a#example2").fancybox({
			'titleShow'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});

		$("a#example3").fancybox({
			'titleShow'		: false,
			'transitionIn'	: 'none',
			'transitionOut'	: 'none'
		});

		$("a#example4").fancybox();

		$("a#example5").fancybox({
			'titlePosition'	: 'inside'
		});

		$("a#example6").fancybox({
			'titlePosition'	: 'over'
		});

		$("a[rel=example_group]").fancybox({
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'titlePosition' 	: 'over',
			'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
				return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
			}
		});


		$("#various4").fancybox({
			'padding'			: 0,
			'autoScale'			: true,
			'width'				: '100%',
			'height'			: '100%',
			'transitionIn'		: 'none',
			'transitionOut'		: 'none'
		});
		
		$(".mybox").fancybox({
			'padding'			: 0,
			'autoScale'			: true,
			'transitionIn'		: 'elastic',
			'transitionOut'		: 'elastic'
		});
		
		$(".mybox2").fancybox({
			'padding'			: 0,
			'autoScale'			: true,
			'titlePosition'	: 'inside',
			'transitionIn'		: 'elastic',
			'transitionOut'		: 'elastic'
		});

}); 

this.screenshotPreview = function(){	
	/* CONFIG */
		
		xOffset = 10;
		yOffset = 30;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$(".plop").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");								 
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
	},
	function(){
		this.title = this.t;	
		$("#screenshot").remove();
	});	
	$(".plop").mousemove(function(e){
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};


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