jQuery.noConflict();
this.Magic_cardPreview = function(){	
	/* CONFIG */	
	xOffset = 30;
	yOffset = 10;
	xminusOffset = 218; //questi offset vengono usati se l'immagine si trova nella met? destra o inferiore della pagina
	yminusOffset = 302;
	/* END CONFIG */
	
	jQuery("a.magic_card").hover(function(e){
		this.title = "";//altrimenti appare un tooltip con scritto undefined sopra al link
		var link = this.rel;
		link = link.replace(" ", "_"); 
		jQuery("body").append("<p id='magic_card_style'><img src='"+ link +"' /></p>");								 
		//la posizione dove appare il box dipende dalla posizione del link. Devo fare in modo che non vada fuori dai limiti della pagina
		if(e.pageX > (jQuery(window).width() / 2))
			jQuery("#magic_card_style")
				.css("left",(e.pageX - xminusOffset) + "px");						
		else
			jQuery("#magic_card_style")				
				.css("left",(e.pageX + xOffset) + "px");						
				
		if(e.pageY > (jQuery(window).height() / 2))
			jQuery("#magic_card_style")
				.css("top",(e.pageY - yminusOffset) + "px");
		else
			jQuery("#magic_card_style")
				.css("top",(e.pageY - yOffset) + "px");
		//faccio apparire il paragrafo		
		jQuery("#magic_card_style").fadeIn("fast");
    },
	function(){
		this.title = this.t;	
		jQuery("#magic_card_style").remove();
    });	
	jQuery("a.magic_card").mousemove(function(e){
		if(e.pageX > (jQuery(window).width() / 2))
			jQuery("#magic_card_style")
				.css("left",(e.pageX - xminusOffset) + "px");
		else
			jQuery("#magic_card_style")
				.css("left",(e.pageX + xOffset) + "px");
		
		if(e.pageY > (jQuery(window).height() / 2))
			jQuery("#magic_card_style")
				.css("top",(e.pageY - yminusOffset) + "px");
		else
			jQuery("#magic_card_style")
				.css("top",(e.pageY - yOffset) + "px");
	});			
};


// starting the script on page load
jQuery(document).ready(function(){
	//setTimeout (Magic_cardPreview(),2500);
	Magic_cardPreview();
});

// html <a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?name=Firebolt" class="magic_card" rel="http://www.wizards.com/global/images/magic/general/Firebolt.jpg">Firebolt</a>
/* CSS
#magic_card_style{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:5px;
	display:none;
	color:#fff;
	}
*/