$( 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");

	// レイアウト初期化
	if (location.hash.length > 1) {
		toggleMenu( location.hash.substr(1) );
	} else {
		$(".box").addClass("visible");
		screen_reset();
		$(".visible").fadeIn("slow");
	}
	$("#footer").show();
	$("#bg_img").css("width",$(window).width() + "px");
	screen_reset();
	
	// 画面幅変更イベント
	$(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();
		$(".visible").fadeIn("slow");
	}
	
	// 表示のリセット
	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"
		});
	}
	
});