$( document).ready( function(){

//	document.title = location.hash;

	// 設定
	var BLOCK_WIDTH = 220; // ブロック幅px
	var BLOCK_MARGIN = 50; // ブロックの左右合わせたマージンpx
	var BLOCK_MINLIMIT = 3; // ウィンドウ幅が小さい時でも表示するカラム数
	var SIDEBAR_WIDTH = 140; // 画面左側のサイドバーのサイズ
	var PADDING_WIDTH = 10; // ブロック自体のマージンに加えるCONTENT左右の余白のサイズ

	// 角丸
	$('.box').corner("4px");
	//$('#sidebar').corner("4px");

	$("#bg_img").css("width",$(window).width() + "px");

	// レイアウト初期化
	if (location.hash.length > 1) {
		toggleMenu( location.hash.substr(1) );
	} else {
//		screen_reset();
		toggleMenu("all");
//		$(".box").addClass("visible");
//		$(".visible").delay(300).fadeIn("slow");
	}
	//$("#footer").show();
	
	// 画面幅変更イベント
	$(window).resize(function() {
		screen_reset();
		$("#bg_img").css("width",$(window).width() + "px");
	});

	// メニューボタン押下イベント
	$(".sort").click(function() {
		toggleMenu( this.id.substr(1) );
	});
	
	// メニューの切り替え処理
	function toggleMenu(id){

		$(".box").removeClass("visible");
		$(".box").hide();
		
		if($("."+id).size() == 0) {
			$(".box").addClass("visible");
		} else {
			$("."+id).addClass("visible");
		}
		screen_reset();
		
		// 時間差でフェードイン
		var t_add = 0;
		if ($('.visible').length > 15) t_add = 100;
		for(var i=0; i<jQuery('.visible').length; i++) {
			if (i < 32) {
				var t = 1500 - 0.095 * Math.pow(i - 120, 2) + t_add;
				$('.visible:eq(' + i + ')').delay(t).fadeIn(400);
			} else {
				// 35個目からはフェードインしない
				$('.visible:eq(' + i + ')').show();
			}
		}
	}
	
	// 表示のリセット
	function screen_reset(){
		
		// ボックスの表示数を計算して、コンテンツエリアのサイズを決める
		var block_cols = Math.max(BLOCK_MINLIMIT, parseInt(($("#container").width() - SIDEBAR_WIDTH - PADDING_WIDTH) / (BLOCK_WIDTH + BLOCK_MARGIN)));
		block_cols = Math.min($(".visible").length, block_cols);
		var layoutarea_width = (BLOCK_WIDTH + BLOCK_MARGIN) * block_cols + 10;
		var screen_left = ($("#container").width() - SIDEBAR_WIDTH - layoutarea_width - 12) / 2; // スクロールバーがあるので適当に調整
		// document.title = $("#container").width() + ", " + layoutarea_width + ", " + block_cols + ", " + screen_left;
		if(screen_left < PADDING_WIDTH / 2) screen_left = PADDING_WIDTH / 2;
		
		// コンテンツエリアのサイズの設定
		//$("#content").css("background-color", '#ffff00');
		$("#content").css("width", layoutarea_width + 'px');
		$("#content").css("left", screen_left + 'px');
		// ボックスを並べ替え
		$("#content").masonry({
			columnWidth: 270,
			singleMode: false, 
			itemSelector: ".visible"
		});
	}
	
});