(function($) {
$(function() {

/* 設定 ここから */

/* スクリーンのID */
var screenId = "#screen";
/* ヘッダ(クリック後)のID */
var headerId = '#header';
/* メインのID */
var mainId = '#main';
/* クリックでフェイドするアイテムのID */
var fadeId = '#box';

/* メインを開くクリックボタンのID */
var openMainId = '#box';
/* メインを閉じるクリックボタンのID */
var closeMainId = '#header';

/* 設定 ここまで */

var $screen = $( screenId );
var $header = $( headerId );
var $main = $( mainId );
var $fadeItem = $( fadeId );
var $openMainButton = $( openMainId );
var $closeMainBuntton = $( closeMainId );

$('*').css({overflow: 'hidden'});
$screen.show();
$fadeItem.show();
$header.hide();
$main.css({marginTop: 0});
setClickBind();

function setClickBind() {
$openMainButton.click(function(){
	$openMainButton.unbind('click');
	$closeMainBuntton.unbind('click');
	
	$header.show().css({visibitily: 'hidden'});
	var headerHeight = parseInt($header.css('height'));
	$header.hide().css({visibitily: 'visible'});
	var footerTop = $main.offset().top;
	var screenBottom = parseInt($screen.css('bottom'));
	
	$fadeItem.fadeOut('slow');
	var marginTop = headerHeight - footerTop;
	$screen.animate({marginTop: marginTop }, 'slow', 'swing', 
		function(){
			var screenHeight = $screen.height();
			$screen.css({'position':'fixed', 'top':(0 - screenBottom),
				'height':screenHeight, 'z-index':2});
			$main.css({'position':'absolute', 'top': headerHeight});
			$header.fadeIn( 'slow', function() {
				$('*:not(' + screenId + ')').css({overflow: 'auto'});
				setClickBind();
			});
		}
	);
});

$closeMainBuntton.click(function(){
	$openMainButton.unbind('click');
	$closeMainBuntton.unbind('click');
	
	$('*:not(' + screenId + ')').css({overflow: 'hidden'});
	$header.fadeOut( 'fast', function() {
		$fadeItem.fadeIn('slow');
		$('#supersized').resizenow();
		$screen.css({'position':'relative', top:'auto',
			'height':'100%', 'z-index':0});
		$main.css({position:'static', top: 'auto'});
		$screen.animate({marginTop:0}, 'slow', 'swing', setClickBind );
	});
});

}

});
})(jQuery);