$(function(){
//	$('body').css('overflow','-moz-scrollbars-vertical');
	var target = $('a.icon_detail');
	var commonPath = $($('script').get(2)).attr('src').split('common/')[0];
	 
	var tpl = '<div id="icon_list_window">';
	tpl += '<h3 class="title">アイコンの説明</h3>';
	tpl += '<img src="'+commonPath+'common/images/com_bt002.gif" alt="閉じる" width="21" height="21" class="close" />';
	tpl += '<dl>';
	tpl += '<dt><img src="'+commonPath+'common/images/com_ic001.gif" alt="アイテム" width="37" height="13" /></dt>';
	tpl += '<dd>紹介しているアイテムの一覧です。</dd>';
	tpl += '<dt><img src="'+commonPath+'common/images/com_ic002.gif" alt="シーン" width="37" height="13" /></dt>';
	tpl += '<dd>紹介しているアイテムの利用シーンです。</dd>';
	tpl += '<dt><img src="'+commonPath+'common/images/com_ic003.gif" alt="テーマ" width="37" height="13" /></dt>';
	tpl += '<dd>記事のテーマです。</dd>';
	tpl += '<dt><img src="'+commonPath+'common/images/com_ic004.gif" alt="テイスト" width="37" height="13" /></dt>';
	tpl += '<dd>紹介しているアイテムのデザインテイストです。</dd>';
	tpl += '</dl>';
	tpl += '</div>';
	// format 
	$('body').append(tpl);
	
	var iconWin = $('#icon_list_window');
	iconWin.hide().css('position','absolute');
	// fnc					
	target.click(function(){
		positionCenter(iconWin);
		iconWin.fadeIn().find('img.close').css('cursor','pointer').click(function(){
			iconWin.fadeOut();
		});
		return false;
	});
	
	function positionCenter(el){
		var pos = {
			boxWidth	:	el.width(),
			boxHeight : el.height(),
			scrollTop	:	document.body.scrollTop  || document.documentElement.scrollTop
		};
		el.css({
			'top'	:	pos.scrollTop + $(window).height()/2 - pos.boxHeight/2 +'px',
			'left'	:	$(window).width()/2 - pos.boxWidth/2 +'px'
		})
	}
	
	
	// hover blank icon
	var iconImg = '<img src="'+commonPath+'common/images/com_ic013.gif" width="15" height="16" id="blank-icon">';
	$('body').append(iconImg);
	var	iconEle = $('#blank-icon');
	iconEle.css({
		'position'	:	'absolute',
		'top'				:	'0',
		'display'		:	'none',
		'z-index'		:	'1000'
											 })
	$('a[target="_blank"]').each(function(){
		$(this).mousemove(function(event){
			iconEle.css({
				'display'	:	'block',
				'top'			:	document.body.scrollTop  || document.documentElement.scrollTop + event.clientY + 'px',
				'left'		:	event.clientX + 15+ 'px'
			});
		});
//		$(this).mouseleave(function(){
		$(this).mouseout(function(){
			iconEle.css({
				'display'	:	'none'
			});
		});
	});
	
})