﻿this.imagePreview = function(){	
	/* CONFIG */
		xOffset = 235;
		yOffset = -720;
		scrollTopDefault = 100;
	// these 2 variable determine popup's distance from the cursor
	// you might want to adjust to get the right result
	/* END CONFIG */
	
	/*$('#miniSamplesWrapper').hover(function(e){ // For the background fade */
		$("a.preview").hover(function(e){
			this.t = this.name;
			//this.name = "";
			var c = (this.t != "") ? '<b class="previewText">' + this.t + "</b><br />" : "";
			
			$("body").append("<p id='preview'>"+ c +"<br><img src='"+ this.href +"' alt='Image preview' /></p>");
			$("#preview")
				.css("top",(e.pageY - xOffset) + "px")
				.css("left",(e.pageX + yOffset) + "px")
				.fadeIn("fast");
			
/* For the background fade			
//			$('#overlayHeader').stop().css({'z-index' : '250'});
//			$('#overlayScroll').stop().css({
//				'z-index' : '11'
//				, 'top' : (scrollTopDefault - $(window).scrollTop()) + 'px'
//			});
//			
//			$('#overlayHeader').stop().show().animate({
//				opacity : '0.4'
//			}, 'slow');
//			$('#overlayScroll').stop().show().animate({
//				opacity : '0.4'
//			}, 'slow');
//			$('body').stop().animate({
//				backgroundColor : '#999999'
//			}, 'slow'); */
		}, function(){
			this.name = this.t;
			$("#preview").remove();
			$('#overlayHeader').stop().animate({
				'opacity' : '0'
			}, 'slow');
			$('#overlayScroll').stop().animate({
				opacity : '0'
			}, 'slow');
			$('body').stop().animate({
				backgroundColor : '#ffffff'
			}, 'slow');
		});
		
		$("a.preview").mousemove(function(e){			
			$("#preview")
				.css("top",(e.pageY - xOffset) + "px")
				.css("left",(e.pageX + yOffset) + "px");
		});
/* For the background fade
//		}, 
//		function(){
//			$('#overlayHeader').stop().css({'z-index' : '-100'});
//			$('#overlayScroll').stop().hide().css({'z-index' : '-100'});
//		}); */

	// For the scrolling function of the samples
//	var $container = $('#miniSamplesWrapper').css('overflow', 'hidden');
//	
//	$container.before('<a class="previous" href="javascript:void(0);"><img id="imgDown" src="images/previous.png" style="border:0;" alt="" /></a><a class="next" href="javascript:void(0);"><img id="imgUp" src="images/next.png" style="border:0;float:right;" alt="" /></a>');
//	
//	$('.previous').click(function(e){
//		$container.animate({
//			scrollLeft : '-=204'
//		});
//		
//		return false;
//	});
//	
//	$('.next').click(function(e){		
//		$container.animate({
//			scrollLeft : '+=204'
//		});
//		
//		return false;
//	});
};
