$(function(){
	$('a.pictureframe').click(function(){
		var source = $(this).attr('href');
		var imgWidth = 362;
		var imgHeight = 362;
		var id = 'frame';
		frameAction(source, imgWidth, imgHeight, id);
		return false;
	});
	$('a.pictureframe2').click(function(){
		var source = $(this).attr('href');
		var imgWidth = 402;
		var imgHeight = 372;
		var id = 'frame2';
		frameAction(source, imgWidth, imgHeight, id);
		return false;
	});
	
	//
	function frameAction(source, imgWidth, imgHeight, id){
		//ウィンドウの情報を取得
		var de = document.documentElement;
		var wWidth = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
		var wHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
		var sTop = document.body.scrollTop  || document.documentElement.scrollTop;
		
		//フレーム位置の値を作成
		var positionLeft = (wWidth/2)-(imgWidth/2);
		var positionTop = (wHeight/2)-(imgHeight/2) + sTop;
		
		//フレームの挙動
		$('#' + id).remove();
		
		$('body').append('<div id="' + id + '"><img src="' + source + '" alt="" /></div>');
		$('#' + id).css({ position:'absolute', left:positionLeft, top:positionTop, zIndex:1000 });
		$('#' + id).find('img').hide();
		$('#' + id).find('img').fadeIn('srow');
		
		$('#' + id).click(function(){
			$(this).fadeOut('srow');
		});
	}
});