/* ---------------------------------------
* スクリーンショットtooltip
----------------------------------------- */
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 */
	$("a.screenshot").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("slow");						
    },
	function(){
		this.title = this.t;	
		$("#screenshot").remove();
    });	
	$("a.screenshot").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();
});

/* ---------------------------------------
* tooltip
----------------------------------------- */
$(function(){
	
	/* --- まずid = tooltip のdivタグを生成してbodyに追加しておく --- */
	 var appearTooltip = $('<div id="tooltip"></div>').hide();
	$('body').append(appearTooltip);

	/* --- 今回適用する、aタグtooltipclassのタイトルのみに絞る（filter) ---*/
	$("a.tooltip").filter(function(){
		return this.title && this.title.length>0;	// --- a.tooltipのタイトルで、長さが0以上のものにのみ適用
	}).each(function(){
		var self = $(this);
		var tooltipText = self.attr("title");	// --- titleの値をtooltipTextに回避
		
		/* a.tooltipのtitle属性を持ったものをmauseoverすることで発動 */
		self.hover(
			function(e){ 	/* -- (e:eventの意味) -- */
				/* -- ツールチップを表示しないようにtitle属性を一時的に空にしておく -- */
				self.attr("title","");
			
				/* -- tooltipにテキストをいれて表示する -- */
				appearTooltip
					.stop(true,true)
					.fadeIn('slow')
					.text(tooltipText)
					.css({
						position: 'absolute',
						top: e.pageY+20,	// --- e.pageX or (Y) : カーソルが乗った時点のXorY座標を取得
						left: e.pageX +20
					});
		},
		/* -- mouseoutの時の処理 -- */
		function(){
			/* -- mouseoverでカラにしていたtitle属性をもとに戻す -- */
			self.attr("title",tooltipText);
			
			/* -- tooltipを非表示にする -- */
			appearTooltip.fadeOut('normal');
		});
		/* -- mousemoveのときは付いてくるようにする -- */
		self.mousemove(function(e){
			$("#tooltip").css({
					top: e.pageY+20,
    					left: e.pageX+20
				});		
		});
	});			
});