jQuery.noConflict();
var j$ = jQuery;

var COLUMN_MIN = 4;
var COLUMN_WIDTH = 175;
var COLUMN_MARGIN = 15; 

var _offset_x=_offset_y=0;

j$.grid = {
	init: function() {
		for (module in j$.grid) {
			if (j$.grid[module].init)
				j$.grid[module].init();
		}
	}
};

j$(document).ready(j$.grid.init);

j$.grid.window = {
	
	init: function() {
		j$(window)
			.bind('resize', this.resize)
			.bind('scroll', this.scroll)
			.each(this.preload);
		
		j$(".fadehover").fadeTo(1,1).hover( 
		    function(){ j$(this).fadeTo(130, 0.6); },
		    function(){ j$(this).fadeTo(150, 1); }
		);
		
		adjust(true);
	},

	preload: function() {
		_offset_y = j$('#grid').offset().top;
		_offset_x = j$('#grid').offset().left;

		adjust(false);
	},
	resize: function() {
		adjust(true);
	},
	scroll: function() {
		var st=j$(document.body).scrollTop();
		st = (!st)?document.documentElement.scrollTop:st;
		j$('#header').css({top: st+COLUMN_MARGIN});
	}
};

function adjust(mode){
	var _max_y = new Array();
	var _max_h = 0;
	var _max_col = 0;

	var _window_h=j$(window).height();
	var _window_w=j$(window).width();
	
	var _target_w = _window_w;
	j$('#contents').width(_target_w-15);
	j$('#contents').css({'margin':'auto'});

	var _footer_y=0;
	var columns = Math.max(COLUMN_MIN, parseInt(_target_w / (COLUMN_WIDTH+COLUMN_MARGIN)));
	j$('#grid > div.item').css('width',COLUMN_WIDTH+'px');
	j$('#grid div.item_double').css('width',COLUMN_WIDTH*2+COLUMN_MARGIN);
	j$('#grid div.item_triple').css('width',COLUMN_WIDTH*3+COLUMN_MARGIN*2);

	for (x=0;x<columns;x++) _max_y[x] = 0;
	j$('#grid > div.item').each(function(i) {
		var pos, cursor, width, height= 0;
		var target_x=target_y=0;
		width=(Math.floor(j$(this).outerWidth()/COLUMN_WIDTH));
		
		cursor=0;
		if (width>1) {
			for (x=0;x<columns-(width-1);x++) cursor=(_max_y[x]<_max_y[cursor])?x:cursor;
			pos=cursor;
			for(var x=0; x<width; x++) height = Math.max(height, _max_y[pos+x]);
			for(var x=0; x<width; x++) _max_y[pos+x] = parseInt(j$(this).outerHeight())+COLUMN_MARGIN+height;
			target_x=pos*(COLUMN_WIDTH+COLUMN_MARGIN)+_offset_x;
			target_y=height+_offset_y;
			_max_h=(height > _max_h)?_max_y[pos+width-1]:_max_h;
		}else{
			for (x=0;x<columns;x++) cursor=(_max_y[x]<_max_y[cursor])?x:cursor;
			target_x=cursor*(COLUMN_WIDTH+COLUMN_MARGIN)+_offset_x;
			target_y=_max_y[cursor]+_offset_y;
			_max_y[cursor] += j$(this).outerHeight()+COLUMN_MARGIN;
			_max_h=(_max_y[cursor]>_max_h)?_max_y[cursor]:_max_h;
		}
		_footer_y=(_footer_y<_max_h)?_max_h:_footer_y;
		if(!mode){
			j$(this).css('left', target_x).css('top',target_y+COLUMN_MARGIN);
		}else{
			j$(this).stop();
			j$(this).animate({left: target_x + 'px',top: target_y+COLUMN_MARGIN + 'px',borderWidth: "10px"},500,'easeInOutCubic');
		}
		_max_col=(_max_col<cursor)?cursor:_max_col;
	});
	var target_x=parseInt((j$('body').innerWidth()-(COLUMN_WIDTH+COLUMN_MARGIN)*_max_col)/2)-102;
	j$('#grid').stop();
	j$('#footer').stop();
	if(!mode){
		// 最初に開いたときの挙動
		j$('#grid').css('left',target_x);
		j$('#contents').css({'height':_footer_y});
	} else {
		// ウィンドウのサイズ変更時の挙動
		j$('#grid').animate({left:target_x},500,'easeInOutCubic');
		j$('#contents').animate({height:_footer_y},500,'easeInOutCubic');
	}
};