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

var COLUMN_MIN = 4;
var COLUMN_WIDTH = 148;
var COLUMN_MARGIN = 25; 
var COLUMN_MARGINw = 30;
var COLUMN_MARGINh = 10;

var _offset_x=_offset_y=0;

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

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {window.location = "./index.html";}
grid$(document).ready(grid$.grid.init);


var cookie="";
grid$.grid.window = {
	init: function() {
		grid$(window)
			.bind('resize', this.resize)
			.bind('scroll', this.scroll)
			.each(this.preload);
	},

	preload: function() {
		cookie = grid$.cookie('ready');
//		if(!cookie){
			grid$('body').append('<div id="loading" style="position:absolute;top:0;left:0;margin:0;padding:0; 50% 50% no-repeat;width:'+grid$(window).width()+'px;height:'+grid$(window).height()+'px;z-index:100;background-color:#111111;"></div>');
			
			//grid$.cookie('ready','true',{expires:30,path:'/'});
			grid$.timer(200,function(timer){
				grid$('#loading').animate({'opacity':0},1000,'easeOutCubic',function(){grid$(this).remove();});
			});
	//	}


		grid$('#grid').css({'visibility':'visible'});
		_offset_y = grid$('div#grid').offset().top;
		_offset_x = grid$('div#grid').offset().left;
	

		adjust(false);
	},

	//ƒŠƒTƒCƒY
	resize: function() {
		
		adjust(true);
	},
	scroll: function() {
		var st=grid$(document.body).scrollTop();
		st = (!st)?document.documentElement.scrollTop:st;
	}
};


function adjust(mode){

	var _max_y = new Array();
	var _max_h = 0;
	var _max_col = 0;

	var _window_h=grid$(window).height();
	var _window_w=grid$(window).width();


	/*var limit=grid$('#header div.inner').height();

	if(limit+32 < _window_h){
		grid$('#header').height(_window_h-8);
	}*/

	var limit =0;

	var _target_w = _window_w-grid$('div#grid').outerWidth();

	grid$('div#pagebody').width(_target_w);

	var _footer_y=0;
	var columns = Math.max(COLUMN_MIN, parseInt(_target_w / (COLUMN_WIDTH+COLUMN_MARGIN)));

	grid$('div#grid > div.item').css('width',COLUMN_WIDTH +'px');
	grid$('div#grid div.item_double').css('width',COLUMN_WIDTH*2+COLUMN_MARGINw);
	grid$('div#grid div.item_tripple').css('width',COLUMN_WIDTH*3+COLUMN_MARGINw*2);


	for (x=0;x<columns;x++)
		_max_y[x] = 0;

	grid$('div#grid > div.item').each(function(i) {

		var pos, cursor, width, height= 0;

		var target_x=target_y=0;

		width=(Math.floor(grid$(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(grid$(this).outerHeight()) + COLUMN_MARGINh + height;
			}
			target_x=pos*(COLUMN_WIDTH+COLUMN_MARGINw)+_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_MARGINw)+_offset_x;
			target_y=_max_y[cursor]+_offset_y;
			_max_y[cursor] += grid$(this).outerHeight()+COLUMN_MARGINh;
			_max_h=(_max_y[cursor]>_max_h)?_max_y[cursor]:_max_h;
		}

		var h_height = grid$('div#header div.inner').height();
		_footer_y=(_footer_y<(_max_h  + h_height))?(_max_h  + h_height):_footer_y;

		if(!mode){
			grid$(this).css('left', target_x).css('top',target_y - grid$('div#header div.inner').height() - 305 +COLUMN_MARGINh);
		}else{
			grid$(this).stop();
			grid$(this).animate({left: target_x + 'px',top: target_y - grid$('div#header div.inner').height() - 305 +COLUMN_MARGINh + 'px',borderWidth: "10px"},100,'easeInOutCubic');
		}
		_max_col=(_max_col<cursor)?cursor:_max_col;
	});


	var target_x=parseInt((grid$('body').innerWidth()-(COLUMN_WIDTH+COLUMN_MARGINw)*(_max_col+1))/2);
	
	grid$('div#grid').stop();
	grid$('div#footer').stop();

	if(!mode){
		grid$('div#grid').css({'left':target_x});
		grid$('div#footer').css({'left':0,'top':_footer_y + 40});
	}else{
		grid$('div#grid').animate({left:target_x, top:0},100,'easeInOutCubic');
		grid$('div#footer').animate({left:0,top:_footer_y + 20},100,'easeInOutCubic');
	}
	


grid$('div#grid > div.item').mouseover(function() {
		grid$(this).css({'background-color':'#ffff00','border-color':'#EF006C'});

});
	grid$('div#grid > div.item').mouseout(function() {
		grid$(this).css({'background-color':'#ffffff','border-color':'#ffffff'});
	});
};