/*
 * JQuery plugin
 * jquery.tile.js
 *
 */

var EASING   = 'easeInOutCubic';
var ELEMENT  = '#tile';
var DURATION = 400;

var TILE_MINCOL = 4;
var TILE_WIDTH  = 210;
var TILE_MARGIN = 10;

var padding_x = 10;
var padding_y = 20;

var header_height = 0;


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

$(document).ready($.tile.init);

$.tile.window = {
	init: function() {
		$(window)
			.bind('resize', this.resize)
			.each(this.preload);
	},

	preload: function() {
		$('.tile').css({
			'float' : 'none',
			'position' : 'absolute'
		});
		$('#content').css({
			'position' : 'absolute',
			'text-align' : 'left'
		});
		header_height = $('#header').height() + $('#navigation').height();
		tiling("direct");
	},

	resize: function() {
		tiling("animate");
	}
};

function tiling(mode){

	var max_y = new Array();
	var max_h = 0;

	var col_num = 0;

	var window_h = $(window).height();
	var window_w = $(window).width();

	var new_w = window_w - $(ELEMENT).outerWidth() - padding_x*2 + TILE_MARGIN;
	var columns  = Math.max(TILE_MINCOL, parseInt(new_w / (TILE_WIDTH+TILE_MARGIN)));

	for (i=0; i < columns; i++) max_y[i] = 0;

	$('#content > .tile').each(function(i) {

		var pos, position, width, height = 0;
		var new_x = new_y = 0;

		tile_size  = (Math.floor($(this).outerWidth() / TILE_WIDTH));
		position = 0;

		if (tile_size == 1) {

			for (i=0; i < columns; i++) {
				position = (max_y[i] < max_y[position]) ? i : position;
			}
			new_x = position * (TILE_WIDTH + TILE_MARGIN) + padding_x;
			new_y = max_y[position] + padding_y;
			max_y[position] += $(this).outerHeight() + TILE_MARGIN;
			max_h = (max_y[position]>max_h) ? max_y[position] : max_h;

		}else{

			for (x=0; x < columns-(tile_size - 1); x++) {
				position = (max_y[i] < max_y[position]) ? i : position;
			}
			for(var i=0; i<tile_size; i++) {
				height = Math.max(height, max_y[position + i]);
			}
			for(var i=0; i<tile_size; i++) {
				max_y[position + i] = parseInt($(this).outerHeight()) + TILE_MARGIN + height;
			}
			new_x = position * (TILE_WIDTH + TILE_MARGIN) + padding_x;
			new_y = height + padding_y;
			max_h = (height > max_h) ? max_y[position + width - 1] : max_h;

		}

		if(mode == "direct"){

			$(this).css('left', new_x).css('top',new_y + TILE_MARGIN);

		}else{

			$('#debug').html(i+":"+new_x+":"+new_y+":"+tile_size+":"+columns+":"+new_w+":"+$('#tile').outerWidth());
			$(this).stop();
			$(this).animate({
					left: new_x + 'px',
					top: new_y + TILE_MARGIN + 'px',
					borderWidth: "10px"
				},
				DURATION,
				EASING
			);

		}

	col_num = (col_num < position) ? position : col_num;

	});

// center

	var target_width = (col_num + 1) * (TILE_WIDTH + TILE_MARGIN) - TILE_MARGIN;
	var target_x = parseInt( window_w/2 - ((col_num + 1) * (TILE_WIDTH + TILE_MARGIN) - TILE_MARGIN)/2 - padding_x);
	var target_x = parseInt((window_w -target_width)/2 - 10);

	var target_y = max_h + header_height + 80;
	var target_height = target_y + $('#footer').height() + 20;

	if(mode == "direct"){

		$('#content').css({
			"width" : target_width + 'px',
			"left" : target_x + 'px'
		});
		$('#footer').css({
			"position" : "absolute",
			"top" : target_y + 'px',
			"left" : "0"
		});
		$('body').height(target_height);

		$('#header').css({
			"width" : target_width + 'px'
		});
		$('#footer ul.forward').css({
			"width" : target_width + 'px'
		});
		$('#navigation ul').css({
			"width" : target_width + 'px'
		});
		$('#copyright').css({
			"width" : target_width + 'px'
		});

	}else{

		$('#footer').css({"top" : target_y + 'px'});
		$('body').height(target_height);

		$('#content').stop();
		$('#content').css({"width" : target_width + 'px'});
		$('#content').animate({"left":target_x+"px"},DURATION,EASING);

		$('#header').stop();
		$('#header').animate({width:target_width},200,EASING);

		$('#footer ul.forward').stop();
		$('#footer ul.forward').animate({width:target_width},200,EASING);

		$('#navigation ul').stop();
		$('#navigation ul').animate({width:target_width},200,EASING);

		$('#copyright').stop();
		$('#copyright').animate({width:target_width},200,EASING);

	}

};