/**
 *  - jQuery v1.3.2 or higher
 *   + http://jquery.com/
 *  - jQuery Easing v1.3 or higher
 *   + http://gsgd.co.uk/sandbox/jquery/easing/
 */

/**
 * 設定
 */
var BOX_WIDTH = 300;
var BOX_MARGIN = 10;
var BOX_SIZE = BOX_WIDTH + BOX_MARGIN;
var BOX_MINLIMIT = 2;
var BOX_ANIMATE_DURATION = 800;
var BOX_ANIMATE_TYPE = 'easeInOutCubic';
var LAYOUT_TOP = 10;
var REMIX_INTERVAL = 300;

/**
 * 初期化
 */
var timerID = null;

$(window).ready(function(){
	remix(true);
	$(".box").fadeIn("slow");
});

// リサイズイベント
$(window).resize(function(){
	if(timerID) clearTimeout(timerID);
	timerID = setTimeout("remix()", REMIX_INTERVAL);
});

// ブラウザバージョン
function getBrowserVersion() { // @return Number:
	return window.opera ? (opera.version().replace(/\d$/, "") - 0) // Opera10 shock
	: parseFloat((/(?:IE |fox\/|ome\/|ion\/)(\d+\.\d)/.
	exec(navigator.userAgent) || [,0])[1]);
}


// 配列の最大値を算出
function array_max(arr){
	var max = null;
	for (var i in arr) {
		if (max == null) {
			max = arr[i];
		} else if (max < arr[i]){
			max = arr[i];
		}
	}
	return max;
}

// ボックスの再配置
function remix(init){
	var windowsize_w = $(window).width();
	var layoutarea_w = windowsize_w - 310;
	var box_row_max = Math.max(BOX_MINLIMIT, parseInt(layoutarea_w / BOX_SIZE));
	var box_row = 0;
	var maxpos_y = Array();
	var current_y = LAYOUT_TOP;
	var max_y = 0;

	// ボックスの座標を計算
	$('#boxes > div.box').each(function() {

		if (init) {
			$(this).css("left", box_row * BOX_SIZE + 'px');
			$(this).css("top", current_y + BOX_MARGIN + 'px');
			$(this).css("top", current_y + BOX_MARGIN + 'px');
		} else {
			// アニメーション
			$(this).animate(
				{ left: box_row * BOX_SIZE + 'px', top: current_y + BOX_MARGIN + 'px'},
				BOX_ANIMATE_DURATION, BOX_ANIMATE_TYPE
			);
		}
	
		// 座標計算
		bottom_y = current_y + $(this).outerHeight() + BOX_MARGIN;
		if ( max_y < bottom_y) {
			max_y = bottom_y;
		}
		
		// 次の段へ
		box_row ++;
		if (box_row == box_row_max) {
			current_y = max_y;
			box_row = 0;
		}
	});

	// メインDIVの高さを設定する。
	$("#boxes").css("height", max_y + "px");
}