/**
 * block v1.0 
 *
 * Layouting blocks smoothly like puzzles.
 *
 * Requirement:
 *  - jQuery v1.4.2 or higher
 *   + http://jquery.com/
 *  - jQuery Easing v1.3 or higher
 *   + http://gsgd.co.uk/sandbox/jquery/easing/
 *  - Prototype v1.6.1 or higher
 *   + http://www.prototypejs.org/
 */


/**
 * Avoid conflict with Prototype.
 */
jQuery.noConflict();


var BLOCK_WIDTH = 220;
var BLOCK_HEIGHT = 150;
var BLOCK_MARGIN = 1;
var BLOCK_SIZE = BLOCK_WIDTH + BLOCK_MARGIN;
var BLOCK_MINLIMIT = 3;
var BLOCK_ANIMATE_DURATION = 500;
var BLOCK_ANIMATE_TYPE = 'easeInOutCubic';
var REMIX_INTERVAL = 500;



jQuery(window).ready(function(){

		jQuery('#block > div.block').css('width', BLOCK_WIDTH + 'px');
		jQuery('#block div.doublesize').css('width', BLOCK_WIDTH*2 + BLOCK_MARGIN + 'px');
		jQuery('#block > div.block_h').css('height', BLOCK_HEIGHT + 'px');
		jQuery('#block div.doubleheight').css('height', BLOCK_HEIGHT*2 + BLOCK_MARGIN + 'px');
		jQuery('#block div.helfheight').css('height', BLOCK_HEIGHT/2 + BLOCK_MARGIN + 'px');

		jQuery('div#footer table.search').css('height', BLOCK_HEIGHT/2 + BLOCK_MARGIN + 'px');


		remix();

		setInterval(remix, REMIX_INTERVAL);
		
	
});

function remix(){
		
		var windowsize_h = jQuery(window).height();
		var windowsize_w = jQuery(window).width()-260;
		var layoutarea_w = windowsize_w ;
		var block_row_max = Math.max(BLOCK_MINLIMIT, parseInt(layoutarea_w / BLOCK_SIZE));

		
		var block_row = 0;
		var startpos_x = startpos_y = 0;
		var maxpos_y = Array();
		for(i=0; i<block_row_max; i++){
				maxpos_y[i] = 0;
		}

		
		jQuery('#block > div.block').each(function() {
				var item_width = jQuery(this).outerWidth();
				var item_height = jQuery(this).outerHeight();
				var block_rowsize = Math.floor(item_width / BLOCK_WIDTH);
				if(block_rowsize == 1){
						
						block_row = 0;
						var minpos_y = maxpos_y.min();
						for(i=block_row_max; i>=0; i--){
								if(minpos_y == maxpos_y[i]){
										block_row = i;
								}
						}
						startpos_x = block_row * BLOCK_SIZE;
						startpos_y = maxpos_y[block_row];

						
						jQuery(this).animate({
										left: startpos_x + 'px',
										top: startpos_y + BLOCK_MARGIN + 'px',
										borderWidth: BLOCK_MARGIN + 'px'
								},
								BLOCK_ANIMATE_DURATION,
								BLOCK_ANIMATE_TYPE
						);

						
						maxpos_y[block_row] = maxpos_y[block_row] + item_height + BLOCK_MARGIN;
				}else if(block_rowsize == 2){
						
						block_row = 0;
						var pos_pair_max = Array();
						for(i=0; i<(block_row_max-1); i++){
								var pair = new Array(maxpos_y[i],  maxpos_y[i+1]);
								pos_pair_max[i] = pair.max();
						}
						var pos_pair_min = pos_pair_max.min();
						for(i=(block_row_max-1); i>=0; i--){
								if(pos_pair_min == pos_pair_max[i]){
										block_row = i;
								}
						}

						startpos_x = block_row * BLOCK_SIZE;
						if(maxpos_y[block_row] >= maxpos_y[block_row+1]){
								startpos_y = maxpos_y[block_row];
						}else{
								startpos_y = maxpos_y[block_row+1];
						}

						
						jQuery(this).animate({
										left: startpos_x + 'px',
										top: startpos_y + BLOCK_MARGIN + 'px',
										borderWidth: BLOCK_MARGIN + 'px'
								},
								BLOCK_ANIMATE_DURATION,
								BLOCK_ANIMATE_TYPE
						);

						
						maxpos_y[block_row] = startpos_y + item_height + BLOCK_MARGIN;
						maxpos_y[block_row+1] = startpos_y + item_height + BLOCK_MARGIN;
				}
		});

		
		var renderpos_x = parseInt((layoutarea_w - (BLOCK_SIZE * block_row_max))/2 );

		var header_h = Math.max(maxpos_y.max());
		var header_w = BLOCK_SIZE * block_row_max;
        if(header_w <= 1155) header_w = 1155;
		var footer_h = Math.max(maxpos_y.max());
		var footer_w = BLOCK_SIZE * block_row_max;
        if(footer_w <= 1155) footer_w = 1155;
/*		jQuery('#header').animate({
				top: 0,
				left: 0,
                width: 100 +'%'
				},
				BLOCK_ANIMATE_DURATION,
				BLOCK_ANIMATE_TYPE
		);
		jQuery('#footer').animate({
				top: footer_h + 377 +18 + 'px',
				left: renderpos_x + 'px',
                width: footer_w
				},
				BLOCK_ANIMATE_DURATION,
				BLOCK_ANIMATE_TYPE
		);
		jQuery('div#block_box').animate({
				display:block
				},
				BLOCK_ANIMATE_DURATION,
				BLOCK_ANIMATE_TYPE
		);
	jQuery('#block').animate({
				left: 260 + 'px' 
				},
				BLOCK_ANIMATE_DURATION,
				BLOCK_ANIMATE_TYPE
		);
	
		jQuery('#ftr').animate({
				top: footer_h + 260 + 'px'
				},
				BLOCK_ANIMATE_DURATION,
				BLOCK_ANIMATE_TYPE
		);
		jQuery('div.f_area').animate({
				left: renderpos_x + 'px',
                width: footer_w
				},
				BLOCK_ANIMATE_DURATION,
				BLOCK_ANIMATE_TYPE
		);
	*/
}