/*
 * Image 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.imagePreview = function(){	
	/* CONFIG */
		
		xOffset = 150;
		yOffset = 50;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$(".occ_item img:first-child").live('mouseenter',function(e){
		
		
		if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
			if (e.pageX > 120) yOffset = -270; else yOffset = 30;
			xOffset = -70;
		}
		else{
		
			if (e.pageX > 680) yOffset = -550; else yOffset = 50;
		
		}
		
		
		
		this.t = this.title;
		
		var img = ($(this).attr('rel'));
		//var c = this.title;
		var c = '<span class="imglabel">'+$(this).parent().parent().find('.occ_text b').html()+'</span><br>'+$(this).parent().parent().find('.occ_details').html();

		this.title = '';
		$("body").append("<p id='preview' ><img src='"+ img +"' alt='Image preview' />Klik op de occasion voor meer gegevens en foto's</p>");				

		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.css("width", '0px')
			.animate({
				opacity: 1,
				width: $("#preview").css('max-width')
			
			},600)
			

    },
	
	function(){
		this.title = c;
		$("#preview").remove();
    });	
	
	$(".occ_item img:first-child").live('mousemove',function(e){
		$("#preview")
			.css("top",(e.pageY - xOffset) + "px")
			.css("background", 'white url("./images/merken/groot/'+ this.merk_name+'.jpg") bottom right no-repeat')
			.css("left",(e.pageX + yOffset) + "px");
	});	
	
	$(".occ_item img:first-child").live('mouseleave',function(e){
		$("#preview").remove();
		$(this).attr({'title':$(this).data.title});
	});			
};


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